Reklama

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.

Reklama

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.

Drupal 7 fotogalerie

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.

Drupal 7 fotogalerie

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.

Drupal 7 fotogalerie

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.

Drupal 7 fotogalerie

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.

Tagy: 

Volná místa v IT

Další pracovní místa najdete na stránce Volná pracovní místa v IT.

Reklama

Komentáře

Lze nějak zařídit, aby se pole Název zobrazovalo u náhledů obrázků nikoli po přejetí myší ale třeba nad nebo pod náhledem obrázku ?

Díky, Ruda

 

Zkuste v nastavení Colorboxu zvolit jiný vzhled, možná to podporuje. Pokud ne, určitě by se to dalo udělat úpravou CSS.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Colorbox ale má vliv až na zobrazení galerie, když se na obrázek pod článkem klikne. Mě jde o to, aby se Název zobrazoval přímo v článku nad nebo pod náhledem obrázku.

No, v tom případě si musíte upravit šablonu tpl.php poskytovanou modulem Insert.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Dobrý den,

do položky Adresář souborů nahraji nabízený údaj foto/[current-date:custom:Y]/[current-date:custom:m], na ftp mi to však založí adresář stejného jména - nezamění to hodnotami. Asi dělám nějakou banální chybu.

Dalo by se nějak udělat, abych si nadefinoval cestu souborů až při ukládání konkrétního článku? Aby to nebylo datum, ale například projekt1, vánoce atp.

Děkuji za odpověď.

Danek

Dobrý den, máte aktivní modul Token?

Co se týče definice složky až při ukládání článku, zřejmě by to šlo přípravou nějakého políčka, kterému ve vlastnostech zobrazení dáte všude ukrytí a při definici té cesty zvolíte nahrazovací vzorek dodávající hodnotu právě z tohoto políčka. Ale nikdy jsem o ještě nezkoušel.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Nejenže jsem modul Token neměl aktivní, ale ani nainstalovaný. Děkuji za pomoc.

Danek

Prečo mi to v IE7 zobrazuje obrázky vo fotogalérii pod sebou? V IE8 a IE9 to zobrazuje tak ako má. Vedľa seba.

Dobrý den,
velice Vám děkuji za tento příspěvek, problém se zobrazováním náhledů fotografií pod článkem byl (doufám) jedním z posledních, jenž mě při tvorbě našeho webu trápil a nedařilo se mi najít jeho řešení. Až zde díky Vám. A přidání zakulacených rohů k miniaturám mi udělalo obzvláštní radost...

Ještě jednou děkuji,
Marek Odstrčil.

Díky, rád slyším, když můj článek něčemu konkrétnímu pomůže.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Dobrý deň,

vďaka za poučný článok. Nastavil som všetko podľa neho a funguje mi to. Akurát som stroskotal na úprave CSS. Môžete, prosím, poradiť do akého súboru mám vložiť formátovanie pre náhľady fotografií. Používam vzhľad Bartik 7.14. Skúšal som to doplniť v themes/bartik/css/style.css ale nezmenilo sa nič... Kde robím chybu?

Ten soubor máte dobře. Nemáte zapnuté cacheování, čili že se Vám změna neprojeví hned? Případně, neudělal jste v definici třeba překlep?

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Ďakujem, už to funguje.

Nemal som vymazanú cache na serveri. Iba opätovné načítanie v prehliadači nestačilo...

Dobrý den, mám fotky zobrazeny pod sebou a chtěl jsem si je zobrazit vedle sebe. Zkusil jsem použít tento CSS kód, ale to nepomohlo.
.field-name-field-fotografie .field-item{ float: left; }

Možná bych měl dát místo fotografie něco jiného, ale nevím co... Nemohl byste mi poradit nebo upravit tento kód tak, aby fungoval?Jedná se o stránku http://www.fechtlcup-cerekvicka.tode.cz/node/54
Děkuji :)

Zdravím, toto pomůže:

.field-name-field-fotka .field-item{
float: left;
margin-right: 5px;
 }

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

jéééé moc děkuji, už mi to funguje

Zdravím, a když bych tam dal dvě miniatury pod sebou a chtěl bych aby mi je text obsahu obtékal? Děkuji za rady!

.field-name-field-fotka{
float: left;
margin-right: 5px;
width: NĚJAKÁ ŠÍŘKA V px
 }

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Bože, to mě mohlo napadnout když jsem viděl že je to pole celou šířkou, že ho stačí omezit.
Děkuji

Dobrý den, vše jsem nastavila dle článku, ale po kliknutí na fotografii se mi stále otevírají v jednotlivých oknech fotografie. Zřejmě jsem přímo nepochopila jakou cestu a co je obsahem složky knihovny, ráda bych to použila na systému Drupal 7 a umístila jsem obsah složky "colorbox" do "\sites\all\modules\libraries". Zkoušela jsem nechat i původní pojmenování složky knihovny "colorbox-master", ale nepomohlo a změna se mi neprojevila.
Taky bych případně uvítala lepší navedení, kde přesně vypnout v úvodníku a nebo jak vlastně, pole "fotografie", protože jsem tuto možnost tam nenašla.
Děkuji.

Několikrát se mi stalo, že bylo potřeba vyprázdnit cache, aby se Colorbox chytil. Podle popisu bych řekl, že nakopírované to máte dobře.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.