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.

Reklama

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: 

Reklama

Komentáře

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

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 ;-)

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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

Zdravím. Kdysi jsem s tím laboroval, ale výsledek si už nepamatuji.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

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.

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

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

Souhlas, je to něco za něco. Snad se brzy dočkáme kombinace obojího, a to v podobě Inline API (http://groups.drupal.org/node/8707).
Co se týče File Manageru - IMCE by vám nevyhovoval?

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Ještě mě napadla jedna věc. pro Drupal 5 je k dispozici i modul Upload previews, který zobrazuje náhledy v seznamu připojených souborů.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

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?

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

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ší.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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

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

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?

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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?

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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 :(.

NBa odstraňování diakritiky z přikládaných souborů použijte modul Transliteration. Funguje bechybně.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

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!!!

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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?

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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?

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?

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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)

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í.

Problém musí být někde v oprávnění

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

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á.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

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?

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

Já se nezlobím :)

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

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ť?

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)....

:) 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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Kričalo...

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

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

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

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Stránky

Přidat komentář