Jak na galerii pod článkem v Drupalu 7

Vytvoření galerie obrázků pod článkem je díky tomu, že většina potřebných modulů je již přímo v jádře Drupalu, opravdu hračkou. Stačí je pouze správně nastavit a použít. V tomto návodu se podíváme, jak vytvořit jednoduché procházení obrázků pod článkem pomocí Colorboxu.

Dnešní návod bude v podstatě jen jednoduchou zkouškou vašich znalostí Drupalu 7. Budeme totiž pracovat s jeho moduly Fields a Image. Vytvoříme obrázkové políčko pro nahrávání fotografií, nastavíme styl obrázku a takto připojené fotografie necháme zobrazovat pod článkem. Jakmile někdo klikne na jejich náhled, zobrazí se mu okno Colorboxu, ve kterém si bude moci všechny fotografie jednoduše prohlížet.

Vše, co tedy budete potřebovat, je základní instalace Drupalu 7 s doplněným modulem Colorbox a samozřejmě se stejnojmennou knihovnou, kterou nakopírujete do složky sites/all/libraries.

Vytvoření políček u článku

Přepněte se do nastavení Struktura > Typy obsahu > Článek > Správa polí. Ve spodní části v sekci Přidat nové pole doplňte název políčka Fotografie, strojové označení fotografie, jako typ dat vyberte obrázek a jako widget také obrázek. Poté klepněte na tlačítko Uložit. V dalším kroku nastavení jen potvrďte a pokračujte tlačítkem Uložit nastavení pole.

Vytvoření nového políčka

V doplňkovém nastavení můžete upřesnit několik vlastností políčka pro fotografie. Doporučuji nastavit adresář souborů, do kterého vyplníte například foto/[current-date:custom:Y]/[current-date:custom:m]. Po takovém nastavení bude Drupal ukládat všechny obrázky nahrané prostřednictvím tohoto políčka do složky se soubory, ve které udělá složky foto a následně podsložky podle roku a měsíce, kdy nahrávání proběhne. Zabráníte tak hromadění tisíců nebo stovek souborů v jednom umístění.

Dále zapněte volby Popis a Název, Počet hodnot nastavte na Neomezeně a nastavení dokončete klepnutím na tlačítko Uložit nastavení.

Nyní můžete zkusit vytvořit nový článek a nahrát k němu několik fotografií. To, jak se u článku zobrazí, vyřešíme následně.

Nastavení stylů obrázků

Obrázky pod článkem se vám s největší pravděpodobností zobrazí v originále, tedy s velkými rozměry, což není žádoucí. V dalším kroku bychom tedy mohli nastavit jejich zobrazování formou náhledu, který Drupal nabízí coby jeden z výchozích stylů obrázků. My si ale raději vytvoříme vlastní styl, který použijeme jen u těchto fotografií.

Přejděte do sekce Konfigurace > Média > Styly obrázků. Klepněte na odkaz Přidat styl. Nazvěte jej třeba fotogalerie a pokračujte dále. Nyní musíte Drupalu sdělit, jak má obrázek při aplikaci tohoto stylu zpracovat. Z nabídky Efektů vyberte Změnit velikost se zachováním poměru stran a oříznout. Klepněte na tlačítko Přidat a v dalším kroku nastavte rozměry například na 120 a 90.

Definice stylu obrázku

S tímto nastavením budou všechny obrázky se stylem fotogalerie zmenšeny na šířku 120 px x 90 px, přičemž v případě, že budou mít jiný poměr stran, dojde u zmenšeniny k oříznutí tak, aby se těchto rozměrů docílilo. Klidně byste místo tohoto efektu mohli použít Scale, který obrázky zmenšuje v poměru, ale už neořezává. Jenže pak by fotogalerie pod článkem mohla vypadat kostrbatě.

Tip: Efekty můžete v rámci jednoho stylu obrázku kombinovat. Klidně můžete přidat otáčení nebo změny barev. Chcete-li do snímků vkládat vodoznak, doplňte si modul Imagecache Actions, který nabídku efektů výrazně rozšíří.

Nastavení zobrazení náhledů fotek

Styl obrázků pro náhledy snímků ve fotogalerii máme připraven, teď jej jenom musíme aplikovat. Přejděte do administrační části Struktura > Typy obsahu > Článek > Správa zobrazení a zde se nahoře přepněte na úvodník. V něm políčko Fotografie vypněte. Dále se přepněte na Výchozí zobrazení nebo na Celý obsah a u políčka Fotografie vypněte popisek. Ve sloupečku Formát ponechejte Obrázek.

Klepněte na ozubené kolo na konci řádku políčka Fotografie. Jako styl obrázku zde nastavte před chvílí vytvořenou Fotogalerii a jako cíl odkazu Soubor. Nastavení aktualizujte a následně vespod ještě uložte, jinak se změna neprojeví. Nyní byste měli obrázky pod článkem vidět ve formě malých náhledů pod sebou. Když na některý kliknete, otevře se v prohlížeči originál obrázku.

Doplnění Colorboxu

Protože ale chceme pohodlnější galerii, ve které se bude možné přepínat z obrázku na obrázek, doplníme modul Colorbox. Jak jsme zmínil nahoře, po jeho zapnutí je ještě potřeba nakopírovat javascriptové soubory. Po zapnutí modulu můžete přejít do jeho nastavení v Konfigurace > Média > Colorbox a upravit jeho Styl, který řídí vzhled Colorboxu. Není to ale nutné.

Důležité nyní je Drupalu sdělit, že obrázky ve fotogalerii nemá otevírat do nové stránky, ale ve formě Colorboxu. Vraťte se tedy do sekce Struktura > Typy obsahu > Článek > Správa zobrazení, kde u Fotogalerie místo formátu Obrázek nastavíte Colorbox. Znovu klepněte na ozubené kolečko u Fotogalerie a upravte nastavení tak, aby styl obrázku v uzlu byl fotogalerie (naše připravené malé náhledy), Colorbox image style byl na původním obrázku, galerii nastavte na Per field in post gallery (tedy všechny obrázky z políčka v daném příspěvku) a Caption (popisek) nechejte buď na automatice nebo na některé z dalších nabízených vlastností.

Opět, aktualizujte, uložte a podívejte se, jak se chování fotogalerie po kliknutí na obrázek změnilo. Originál fotografie by se nyní měl otevírat v Colorboxu s tím, že se zde můžete rovnou překlikávat na další a předchozí obrázky. Zároveň se zobrazuje jejich popisek. K ovládání lze použít i šipky na klávesnici.

Prohlížení obrázků v Colorboxu

Úprava CSS (volitelná)

Nyní zbývá jen drobná úprava vzhledu náhledů v galerii. V první řadě je budeme chtít zobrazit vedle sebe, dále můžeme přidat zaoblení a nějaký rámeček. Do souboru s CSS ve svém tématu vzhledu proto doplňte příslušné definice:

.node .field-name-field-fotografie .field-item{

  display: inline-block;

  margin: 3px;

}

.node .field-name-field-fotografie .field-item img{

  border: 2px solid #222;

  border-radius: 10px;

  padding: 2px;

  background: #fff;

}

První pravidlo určuje, že pracujeme s uzlem, daty v políčku fotografie a s jednotlivými položkami v něm. Řekneme jim, aby byly zobrazeny na řádku s tím, že jim dáme vnější odsazení 3 px. Druhé pravidlo zacílí přímo na obrázek v každé položce a sdělíme zde, že chceme vytvořit téměř černý rámeček o tloušťce 2 px, se zaoblením 10 px, s vnitřním odsazením 2 px a bílým pozadím. Je to klasická práce s CSS, potřebné konstrukce pro zacílení jednotlivých prvků byste určitě zjistili například ve Firebugu. Pokud nevíte jak na to, koukněte na článek Návod jak stylovat Drupal s využitím CSS3.

Výsledek by měl vypadat nějak takto: náhledy fotografií pod článkem jsou zobrazeny vedle sebe, mají černý rámeček a mezi ním a obrázkem je ještě navíc 2 px široká bílá linka.

Náhledy fotografií pod článkem po úpravě CSS

Tipy na možná vylepšení

Pokud chcete zobrazovat v Colorboxu obrázky včetně vodoznaků, pak samozřejmě při nastavení zobrazení políčka nedáváte do Coloboxu originál obrázku. Dopředu si vytvoříte nový styl, ve kterém třeba nebudete měnit rozměry, ale ponecháte je v původním stavu a jen přidáte vodoznak. Takovýto styl pak necháte zobrazovat v Colorboxu.

Dalším častým případem je požadavek na umístění galerie do některého bočního sloupce. Stačí tedy doplnit modul CCK Blocks, zeditovat nastavení políčka s tím, že jej umožníte používat jako blok a v Struktura > Bloky pak blok s fotogalerií umístíte do bočního panelu. Fotogalerie se zde pak zobrazí v případě, že jsou u článku nějaké fotografie do daného políčka nahrány.