Video: obrázky v Drupalu pomocí modulů Inline, Imagecache a Lightbox2

Trápí vás, že redakční systém Drupal ve výchozí podobě nenabízí zrovna komfortní práci s obrázky? Tento problém lze jednoduše vyřešit pomocí sady několika doplňkových modulů. Ze široké nabídky obrázkových modulů pro Drupal jsem vybral kombinaci modulů Inline, ImageCache a Lightbox2. Tato kombinace umožní připojení obrázků k článkům, automatickou změnu velikosti a propojení na jednoduchou galerii.

Podrobnosti k nastavení těchto modulů najdete na prvním z videonávodů pro Drupal, který jsem na Maxiorlovi připravil. Zastávám názor, že člověk živící se psaním by neměl moc „fušovat" do řemesla lidem, které živí jejich hlas. Jsem toho důkazem, omluvte prosím případné zadrhávání mluveného komentáře.

Kromě modulů Inline, ImageCache a Lightbox2 je ve videu zmíněn i modul UploadPath, který umožňuje přiložené obrázky automaticky třídit do zvoleného systému složek. Video je připraveno pro Drupal 6, v předchozí verzi je nicméně použití a nastavení těchto modulů podobné.

Video vyžaduje javaScript a nejnovější verzi přehrávače Flash Player. Stáhnout jej můžete odsud.

//

Užitečné odkazy

Uvítám všechny připomínky, kritické komentáře a další poznámky k videu, i náměty na případná další videa. Určitě budu rád, když napíšete, zda by tato videa pro vás byla užitečná a má v nich smysl pokračovat.

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Ahoj jsem sice nováček Drupalista, ale mohu s klidem doporučit kombinaci IMCE a TinyMCE, je to myslím taková zlatá střední cesta pro nováčky, wysiwyg s implementovaným rozhraním pro obrázky. Funguje to dobře a konfigurace není nikterak složitá. Myslím že video a přesný popis tohoto spojení by bylo také přínosem.

Jinak modul Upload Path vypadá velice zajímavě, zřejmě ho drupnu a podle zalíbení možná i použiji. -- děkuji za recenzi a vida

Profile picture for user Jan Polzer

ahoj, díky za námět.
Video, s popisem používání, nastavení a výhod/nevýhod, určitě udělám. IMCE a TinyMCE je univerzálnější řešení, ale jako takové je samozřejmě pomalejší a myslím, že pro některé neználky a nepořádníky méně vhodné. Vysvětlím v příštím videu ;-)

návštěvník

Dobry den,

rikal jsem si, kdyz muze lightbox pekne zobrazovat obrazky podle pomoci modulu inline ve strance, mohl by fungovat lightbox i pro Image Gallery.
Prochazel jsem administraci a nepodarilo se mi nastavit Lightbox2, Gallery tak, aby spolu spolupracovali.
Nastavoval jste nekdy lightbox2 tak, aby fungoval i v Galerii?

Diky za info

Petr Podrabsky

návštěvník

Výborně pane Polzere. Skvělé video. Jen tak dál. Uvítal bych video s CCK a Views. Jinak ještě otázka. Ten odkaz "Email this page" je řešen pomocí modulu Forward? Děkuji. Přeji hodně úspěchů s videonávody pro Drupal.

návštěvník

A ještě jedná otázka? Jak je řešeno ta horní lišta (menu) sloužící k administraci Drupalu? Vlastní řešení nebo modul? Děkuji.

návštěvník

cituji: "modul Administration Menu (pokud se vám ve videu zalíbilo)"

Profile picture for user Jan Polzer

Tak tak, je to Administration Menu. Jinak díky za námět a podporu. Co se týče toho E-mail this page, tak je to skutečně modul Forward.

návštěvník

Výborné řešení.
Odrazuje mě jen, že obrázky nejsou vidět ve WYSIWYG editoru. Například já používám fckeditor, a tam jsem zvyklý je při psaní skrze jeho file manager do článku a hned je vidět.
Ale to samozřejmě neřeší tvorbu náhledů a automatické uložení do struktury složek.

Zajímalo by mě, zda znáte nějaký file manager pro Drupal, kterým lze procházet adresář /files, vytvářet složky, kopírovat soubory, třeba opětovně vybírat skrze Vaše řešení dříve použité obrázky atd.

návštěvník

Já mám rád modul Image, protože dokáže vytvářet galerie a tak nemusím v případě použití jednoho obrázku ve více článcích, což občas dělám, jej kopírovat na server vícekrát, ale najdu jej v logicky řazených galeriích.

Profile picture for user Jan Polzer

Jo, galerie má pěkné, používám to na Screenshots Archive. Jenže pro normální článek, ve kterém je několik obrázků na více místech prostě Image použít nejde. Nebo si myslíte něco jiného?

návštěvník

Myslím to tak, že třeba ke spoustě článků přidávám logo výrobku, nebo služby, o kterých píšu. Podla vámi popsaného řešení bych musel při každém použití daného loga jej znovu nahrát na server, tak bych měl ke 30 článkům 30 různých souborů stejného obrázku. Když to řeším pomocí galerií, mám 1 soubor obrázku, který se prostě zobrazuje u 30 článků. Nebo jsem něco pochopil špatně a u vašeho postupu je také možné používat 1 obrázek ve více článcích.

Nebo ještě jiný příklad, typicky fotografie známých lidí - stačí mi jedna fotka na serveru Caesara pro všechny články, kdy o něm píšu. Mám ji v galerii Řím a vždy, když píšu článek o Caesarovi, vytáhnuji z tohoto umístění a nenahrávám ji znovu na server.

Každopádně jsem se díval, že i na Maxiorlovi podle videa máte modul Image.

Profile picture for user Jan Polzer

tak tak. Je třeba rozlišovat obrázky vkládané do textu (nap.ř u recenzí) - k tomu je toto video, a obrázky sloužící jen jako doplnění neo třeba ikonka článku. Pak je Image nebo ImageField vhodnější.

návštěvník

Velmi dobré video. Díky za něj a těším se na další.

návštěvník

Rad jsem se nechal prekvapit, ze video muze byt takto inspirujici. Rekl bych, ze je o uroven lepsi, nez pouha studie dane problematiky.
Diky za nej

Petr

návštěvník

Tak jsem to chtěl zkusit. Drupal 5.
Pokud otevřu nastavení Inline, zobrazí se pouze chyba "Fatal error: Call to undefined function _imagecache_get_presets() in /usr/local/www/webs/cz/doom5/www/modules/inline/inline.module on line 86". Na fóru jsem našel, že novější verze imagecache (2.2) tuto funkci nemá a je nutné použít verzi (1.5).

Vám to pod Drupalem 5 šlo?

Profile picture for user Jan Polzer

Přesně tak. Pro Drupal použijte inline v kombinaci s ImageCache 5.x-1.7. Fungovalo to perfektně - Maxiorel.cz to používal do nedávna. Teď už běží na Drupalu 6.

návštěvník

To je důležitá informace, to by mohlo v tom videu nebo někde okolo být ;), už jen proto, že downgradování modulu Drupal moc nemiluje a teď jsem musel čistit databázi od novějšího imagecache ručně...
Každopádně, 1.7 funguje, ale narazil jsem na další problém. Pokud spustím modul Upload path, tak obrázky sice vidím jako přílohy, ale po zapsání stylem [inline:01] se zobrazí pouze hláška NOT FOUND: obrazek.jpg. Myslím, že by to mohlo mít spojitost s tím, že Upload path si ten vložený soubor přejmenuje třeba obrazek_jpg_494a24e596.jpg, zatímco ty vkládané inline o tom nevědí a hledají pořád ten obrazek.jpg. Nevím, je to zakleté. Neřešil jste s Upload path něco podobného?

Profile picture for user Jan Polzer

No, na začátku je uvedeno, že se to vztahuje na Drupal 6 ;-)

Podobný problém jsem často řešil třeba na ExtraWindows.cz. Zdá se, že ImageCache si neporadí s obrázky od určité velikosti. Ovšem v tom případě se na ně zobrazí odkaz, nikoli tato hláška.

Ta chyba je tím, že Vám Upload Path přejmenoval soubor. Chybu bych viděl někde v jeho nastavení. Standardně se totiž mění jen složka, kde je soubor umístěn. Modulu inline záleží na jeho názvu - ten musí zůstat zachován. Funguje nicméně odstraňování diakritiky z názvu souboru, to se ale aktivuje už při nahrávání. Tedy jak říkám, koukněte do nastavení Upload Path.

návštěvník

Tak jsem to zkoumal, je to opravdu tím, že Upload path změní název souboru. Pokud vypnu "Clean file upload filenames", tak vše funguje. Takže je nějaké zakleté a k přejmenování dojde tak, že o tom inline při vkládání tagů [inline:číslo] neví. Zároveň ale v přílohách pod článkem to má správně... Nechápu. Tady to mám pěkně vidět na pokusné stránce http://opera.milichovsky.com/adasds :(.

návštěvník

Drobné vylepšení nastavení pro Lightbox2 spočívá ve vybrání volby Slideshow místo Lightbox grouped s tím, že v kartě Slideshow odtrhneme Automatically start slideshow. Při zobrazení obrázku pomocí Lightboxu pak vše vypadá stejně, ale do nabídky se přidá tlačítko pro start nebo zastavení slideshow.

návštěvník

Dobry den pan Polzer, skusal som prave na jednom z mojich webov vytvorit obsah podla vasho videa, avsak obrazky, ktore mali byt zobrazene v texte clanku sa zobrazili len ako odkazy na ten subor a po kliknuti na ten link sa uz zobrazi LightBox. Urobil som niekde chybu v nastaveni modulov? Druha otazka, akym modulom sa da urobit to, ze ku kazdej kategorii clanku budu urcity obrazok (mate to aj vy na maxiorlovi - male obrazky vpravo vedla clanku). Dakujem za odpoved. Mimochodom super video len tak dalej!!!

Profile picture for user Jan Polzer

Dobrý den, toto se děje občas v situaci, kdy je zdrojový obrázek moc velký a ImageCache jej už nedovede zpracovat (typicky věci na 2 MB). Na vině může být i problém s oprávněním zápisu do složky, kam ImageCache ukládá upravené obrázky.

Obrázky k článkům - já je mám řešeny pomocí modulu Image, resp. jeho součásti Image Attach. Existuje také modul Taxonomy Image, který vkládá obrázky k článkům na základě jejich kategorie automaticky.

Díky za podporu.

návštěvník

Dobrý deň,

ako začiatočník som si nastavil prácu s obrázkami podľa tohoto návodu, všetko sa zdá OK, ale v rámci článku sa nezobrazuje náhľad obrázku, zobrazuje sa len krížik ako keď neexistuje obrázok na ktorý smeruje jeho definícia. Po preskúmaní obsahu zložiek cez FTP pripojenie (cez Total Commander) som zistil, že zložka ImageCache, kde by mal byť uložený súbor je prázdna - adresárová štruktúra je vytvorená podľa definície, ale žiadny súbor sa tam nenachádza. Uploadovaný obrázok sa v príslušnej zložke nachádza.
Atributy zložky ImageCache mi TC zobrazuje ako 775, prípadne 755, nefunguje to ani keď som atributy zmenil na 775 u všetkých vnorených zložiek.
Kde môže byť chyba?

Profile picture for user Jan Polzer

Dobrý den, možné příčiny:
1. Problém se zápisem do složky (což tedy asi není tento případ)
2. Problém se zápisem kvůli pravidlu v .htaccess ve složce /files. Zkuste obsah .htaccess zakomentovat, ale soubor tam nechejte
3. Použití vývojové verze 2.x. Nedávno jsem ji zkoušel a chovala se stejně, jak píšete.

návštěvník

body 1. a 2. asi nebudú problém, skúsil som nechat prázdny .htaccess subor vo files - nepomohlo, do inych zložiek vo files systém zapisuje.
Používam verziu 6.x-2.0-beta6 ktorá je najnovšia na drupal.org - máta vyskúšanú inú verziu ktorá pracuje OK?

Profile picture for user Jan Polzer

Používám stejnou verzi. Když klepnete v admin/build/imagecache na úpravu presetu, zobrazí se vám pod ním zkušební obrázek nebo taky jenom odkaz?

návštěvník

Ani tu sa mi náhľad nezobrazí, len odkaz a krížik, keď kliknem na odkaz, tak mi to vráti chybu 500, ked sa cez FTP pozriem do zložky, kam odkazuje odkaz, tak tam žiadny taký súbor nevidím... (imagecache_sample.png)

návštěvník

Doplnenie k náhľadom:
ak zruším všetky action v presete, tak sa mi náhľad ukážky zobrazí (Drupal logo), akonáhle tam pridám akúkoľvek action, tak sa náhľad nezobrazí.

návštěvník

Zdravím.
Mám nejspíš podobný problém jako Flint. Obrázek se uloží, s názvem stejným jako cesta z prohlížeče, jen se prostě nezobrazí. V průběhu nastavování jsem si všiml v Hlášení stavu:
ImageAPI GD Memory (Limit 32M)
It is highly recommended that you set you PHP memory_limit to 96M to use ImageAPI GD. A 1600x1200 images consumes ~45M of memory when decompressed and there are instances where ImageAPI GD is operating on two decompressed images at once.

To tyto moduly potřebují tolik paměti?
Paměť na PHP skripty mám 32M. V nastavení dle Vašeho návodu mám všechno podobně jako vy. Kromě standardní instalace D6.9 jen Views2 a CCK.
Dík za případnou radu.

Profile picture for user Jan Polzer

U obrázků s velkými rozměry bych se asi nedivil. Ta spotřeba paměti není dána moduly jako takovými, ale PHP knihovnou GD. Na HostGatoru mám 128 MB a na problém jsem ještě nenarazil. Případně zkuste knihovnu ImageMagick, pokud je na vašem hostingu dostupná.

návštěvník

No, jenže já mám velikost obrázků omezenou na 0,5M, příp. 400x300px.

Profile picture for user Jan Polzer

Fakt bych zkusil nastavit větší velikost paměti. Buď přes php.ini nebo ve spolupráci s poskytovatelem wehostingu. je to nejjednodušší, jak zjistit, kde je problém.

návštěvník

Obávám se, že mi poskytovatel jen tak paměť nezvýší.
Zkusím instalaci ještě jednou.
Nevíte jestli ty moduly zmiňované Vámi výše se musí odinstalovat, nebo je stačí smazat?
Od jejich instalace blbne celé PHP (nemůžu se dostat do Modulů), i když se mi je podařilo vyplnou a hlášení o přeplněné paměti se nezobrazuje.

Profile picture for user Jan Polzer

Ideální je odinstalace - po smazání totiž zůstanou v databázi data od původní instalace modulu a po jeho nové aktivaci budete mít zpátky stejné nastavení. Bohužel ne všechny moduly umožňují odinstalaci včetně smazání databázových struktur.

Nemůžete-li se dostat do správy modulů, pak s tím nic neuděláte. Tedy, smazáním složky některých modulů se Vám to asi zase zpřístupní, ale web prostě nebude fungovat do doby, dokud nezvýšíte paměť.

Kde hostujete?

návštěvník

Hostuju na Savaně, /PHP 32M.
Nezlobte se, že tak reaguju, prostě se mi nezdá, že by pouhé instalaci modulů (bez momentálního zpracování obrázků) nestačilo 32M.

návštěvník

Ešte jedno doplnenie:
Ak zruším všetky actions v presete, tak obrázok sa vloží do článku v plnej veľkosti, je klikateľný a potom sa zobrazí v lightboxe, obrázok sa uloží do príslušnej zložky pod ImageCache aj na miesto kam má ísť originál. Vyzerá to, že je tam nejaký problém s actions, jednoducho nefungujú. Asi vyskúšam iné verzie imagecache.

návštěvník

Medzitým som si pozrel logy, chybové hlášky možno napovedia viac (škoda že ma to nenapadlo už skoršie, holt začiatočník...). Keď zobrazím článok, v ktorom je vložený obrázok pomocou postupu uvedenom v článku, alebo keď idem editovať preset v ImageCache module, náhľad obrázku alebo príklad v ImageCache sa nezobrazí a v logoch sa objavia hlášky:
- ImageAPI failed to open sites/default/files/imagecache_sample.png with
- Failed generating an image from imagecache_sample.png using imagecache preset sirka400
Dany subor sa na danom mieste nachadza, práva vyzerajú byť OK, druha hlaska je asi uz len dôsledkom tej prvej.
Napadá niekoho niečo, čím by to mohlo byť?

návštěvník

Práve som na to prišiel, nemal som zapnutý modul ImageAPI GD2 (súčasť ImageCache), keď som inštaloval ImageCache, tak som ho nezapol, vychádzajúc z predpokladu že nezapínam moduly ktoré nepotrebujem, keď som si prechádzal nainštalované moduly, tak mi u tohoto modulu udrelo do očí že robí niečo ako "PHP image processing", skúsil som ho zapnúť a ono to funguje. Ja debil som týmto stratil cca týždeň času (našťastie len po chvíľach voľna, daný web robím ako hobby aktivitu)....

Profile picture for user Jan Polzer

:) Jo, to se občas člověku stane. Tak hlavně, že je vyřešeno. Vždycky doporučuji kouknout do Logy|Hlášení stavu, mám pocit, že zrovna toto tam mělo křičet.

návštěvník

Dobrý večer, hned na začátek: jsem totální játro a začátečník.
Prosím Vás, postupovala jsem dle Vašeho video návodu (je perfektní !), a bohužel se mi nezobrazuje nic. Přitom obrázek je ve složce. Možná jsem jen něco přehlédla, nebo mám něco špatně v .htaccess (SetHandler Drupal_Security_Do_Not_Remove_See_SA_2006_006
Options None
Options +FollowSymLinks), no podívejte se kdyžtak sami. je to na adrese: http://www.medicatechnology.cz/profesionalni-pristroj-sts-ipl-medica-tec...
Jó, ten náhled (ikony drupalu) se mi taky nezobrazuje. Prosím Vás o pomoc.
Děkuji l.lenek

návštěvník

To jsem ještě já, obrázek se pořád nezobrazuje a PHP memory_limit mám 100MB, to by mělo stačit, nemyslíte? Prosím Vás, můžete mi někdo pomoc? Děkuji l.lenek

Profile picture for user Jan Polzer

Zdravím, do souboru .htaccess doplňte na začátek každého řádku znak #, uložte to a zkuste.

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Poslední komentáře