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.

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

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

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

 

Profile picture for user Jan Polzer

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

návštěvník

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.

Profile picture for user Jan Polzer

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

návštěvník

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

Profile picture for user Jan Polzer

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.

návštěvník

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

Danek

návštěvník

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.

návštěvník

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.

návštěvník

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?

Profile picture for user Jan Polzer

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?

návštěvník

Ďakujem, už to funguje.

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

návštěvník

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

Profile picture for user Jan Polzer

Zdravím, toto pomůže:

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

návštěvník

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

návštěvník

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!

Profile picture for user Jan Polzer

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

návštěvník

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

návštěvník

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.

Profile picture for user Jan Polzer

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.

návštěvník

Dobrý den, mám nainstalovaný Drupal 8, moduly Colorbox, Insert. Veškeré výše uvedené rady se mi podařilo provést (za ně moc děkuji). Při psaní článků, ale vkládám obrázky také do textu (pomocí modulu Insert). Jsem schopný nastavit, aby se mi obrázky vkládaly v určitém stylu a případně daly rozkliknout na celou obrazovku. Nedaří se mi ale, aby se mi takto vložené obrázky otevíraly v Colorboxu. V podstatě potřebuji, aby to fungovalo jako na Vašem webu. Děkuji za odpověď. Aleš

Profile picture for user Jan Polzer

Zdravím, tam je jenom důležité, aby se obrázek vložil jako odkaz na Colorbox, nikoli jen jako upravená kopie. V nastavení obrázkového políčka, kde zapínáte propojení s modulem Insert se ujistěte, že máte zapnuté i volby "Colorbox název stylu obrázku".

návštěvník

Děkuji za odpověď, bohužel právě v tom posledním je u mne problém, který nevím jak vyřešit. V nastavení obrázkového políčka, tam kde se zapíná to propojení s modulem Insert žádný Colorboxový styl obrázku nemám a netuším jak ty Colorboxové styly tam dostat. Přímo ve Stylech obrázků také žádný Colorboxový styl není. Před tím, než jsem Vám napsal jsem pročetl spoustu diskuzí a zkouknul různa videa s tímto tématem, ale nikde jsem nic nenašel.

Dneska jsem přišel ještě na jeden problém, pokud v článku odstraním obrázek nebo přiložený soubor na web-serveru mi tyto soubory stále zůstávají na nesmažou se (v podstatě se jenom zneviditelní v článku). Jsou také stále přístupné v Drupalu v sekci OBSAH - Soubory. Co nastavit, aby se to smazalo i na web-serveru.
Jinak moc děkuji za Vaše kniny o Drupalu a návody na tomto webu. Aleš

Profile picture for user Jan Polzer

Hm, tam by to mělo být tak, že to vypíše všechny styly obrázků a pak totéž, ale s propojením na Colorbox.

Pokud smažete obrázek z editoru, tak se na serveru nic neodstraňuje. Pokud jej smažete z obrázkového políčka, měl by se ze serveru smazat v případě, že není nikde znovu použit.

návštěvník

Právě tam, co ukazuje váš obrázek, žádný Colorboxový styl nemám. Kde ty styly vytvořit (nebo se vytváří automaticky a něco je potřeba někde nastavit... už opravdu nevím)? Ve stylech obrázků to nelze. V konfiguraci modulů Insert a Colorbox, tam taky nic nevidím.

Ke druhému dotazu. Pokud obrázek nebo soubor odstraním z obrázkové políčka nebo políčka souboru. Na serveru mi vše zůstává a znovu použit níkde také není.

Profile picture for user Jan Polzer

Colorbox položky by tam měly naskočit automaticky tím, že převezmou styly obrázků v Drupalu a přidají k nim svoje propojení. Takže těžko říct, kde je problém.

návštěvník

Postupuji podle návodu na Drupal 8.Colorbox funguje ale nedaří se mi zapsat styl. Fotografie jsou pod sebou a chci vedle sebe, v drupal 7 jsem neměl problém
.node .field-name-field-fotografie .field-item {
display: inline-block;
}
Nexus Theme 8.x-1.1 (výchozí téma vzhledu)
www/themes/nexus/assets/css/style.css
Děkuji za radu

Profile picture for user Jan Polzer

Záleží na to, co přesně se Vám tam generuje a také, co dělají výchozí styly tématu vzhledu. Já Nexus ani jiné volně dostupné nepoužívám, takže nevím. Pošlete odkaz na stránku, kde je to k vidění a vyřešíme to. Naslepo asi těžko.

návštěvník

Dobrý den,

řešil jsem podobný problém, v Drupalu 8 je trošku jiné pojmenování tříd, toto zafungovalo pro style Bartik, soubor css/components/node.css

.node .field--name-field-fotografie .field__item{
display: inline-block;
margin: 2px;
}

.node .field--name-field-fotografie .field__item img{
border: 2px solid #222;
border-radius: 5px;
padding: 2px;
background: #fff;
}

I.S.

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

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru