Videonávod: jak na slideshow článků v Drupalu 7 a jejich stylování

9.8.2011, Jan Polzer

Vytváříte-li článkově orientovaný web v Drupalu, jistě občas budete potřebovat sestrojit slideshow článků, kde se v jednotlivých slajdech střídají obrázky doprovázené například nadpisem článku, a kde nechybí ani malé náhledy pro přepínání slajdů. Vše jde v Drupalu 7 vytvořit velmi rychle a jednoduše.

Reklama

Různá slideshow se na webech objevují v hojném počtu. V podstatě ani nemusí jít o článkové weby, jak jsem zmínil v úvodníku. Různá slideshow mají například realitní weby, které zde umisťují svou nejnovější nabídku, podobně to můžete využít i u firemních stránek, kde lze touto formou prezentovat nejnovější produkty či realizace zakázek.

V době, kdy byl aktuální Drupal 6, jsem připravil návod Jak na slideshow článků v Drupalu. Tehdy návod ukazoval využití modulu Nodecarousel. Ten měl své kouzlo, líbila se mi možnost úprav výsledného slideshow. Na druhou stranu to nebylo úplně nejschůdnější pro méně zkušené uživatele, kteří třeba zvládají stylování Drupalu, ale už si neporadí s úpravami v kódu šablony nebo v template.php.

Dnešní návod snad udělá radost všem. Použitá kombinace modulů umožňuje velice komfortní sestavení slideshow přímo z administrace Drupalu, bez nutnosti cokoli kódovat. Jen jí musíte přiřadit nějaký vzhled pomocí kaskádových stylů, které doplníte do tématu vzhledu.

Videonávod ukazuje řešení slideshow pracující s následujícími moduly:

V návodu využívám také modul Devel pro hromadné vygenerování článků. Jinak je to čistě běžná základní instalace Drupalu 7. Pro nástin stylování vytvořeného slideshow jsem ještě jako pomůcku použil doplněk webového prohlížeče Firefox s názvem Firebug. Stejnou funkcionalitu najdete i v Google Chrome nebo v Internet Exploreru, viz článek Firebug a další nástroje prohlížečů pomáhající při tvorbě CSS.

Nyní tedy již slíbený návod:

Tagy: 
Drupal

Podobné články

jQuery Chosen: vylepšete si rozbalovací nabídky na svém webu
jQuery Chosen: vylepšete si rozbalovací nabídky na svém webu
Jak se stavěl web časopisu 100+1 zahraniční zajímavost
Jak se stavěl web časopisu 100+1 zahraniční zajímavost
Wysiwyg CodeMagic: pohodlná úprava zdrojového HTML v editoru v Drupalu
Wysiwyg CodeMagic: pohodlná úprava zdrojového HTML v editoru v Drupalu
Drupal, Google Analytics + AdSense a Custom Variables. Kteří autoři nebo typy obsahu vám nejvíce vydělávají?
Drupal, Google Analytics + AdSense a Custom Variables. Kteří autoři nebo typy obsahu vám nejvíce vydělávají?

 

Volná místa v IT

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

Reklama

Další a předchozí články

<< Stáhněte si snadno svá data z různých služeb Googlu pomocí Takeout
Readefine vám zobrazí obsah z RSS jako novinové články >>

Komentáře

Martin2 (neověřeno) 10.8.2011 10:03:57 ()

Super článek, díky za něj.

Pokud jde o další téma na tutorial, mě osobně by se líbil článek Drupal a propojení se sociálními sítěmi, Facebook, Twitter atd

Obrázek uživatele Jan Polzer

Jan Polzer (www.polzer.cz/) 10.8.2011 10:27:46 ()

Díky, popřemýšlím.

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

Obrázek uživatele VOMI - Vendy atelier

vomi (www.vendyatelier.cz) 11.8.2011 09:08:57 ()

Váš návod jsem ještě v den vydání zkoušel v noci a krom drobných nepřesností které jsem asi někde sám udělal to funguje dokonale, ale dokázal jsem dle vašeho vodítka si ty věci vypnout. Colorbox je dobré řešení. Díky za tyto pro nás pochopitelné vodítka. Jste borec!!! S Facebookem mám také problémy. Vyskoušel jsem snad všechny pro mne pochopitelné moduly které fungují spolehlivě až na to že ve finále při odeslání sdílení na stránku Facebooku vloží jinou miniaturu než modul tvrdil....

plavacek (neověřeno) 10.8.2011 20:43:54 ()

Dobrý den,

super článek, kterej mi moc pomůže. Jen se chci zeptat na funkčnost modulu Devel, protože mi generuje jen nadpisy článků, ale žádný text ani obrázky. Kde mám chybu. Díky

Obrázek uživatele Jan Polzer

Jan Polzer (www.polzer.cz/) 10.8.2011 22:39:44 ()

Zdravím. To je zvláštní. Co se textu týče, netuším, kde je problém. U obrázků bych to tipl na problém se zápisem do složky souborů. Koukněte na Konfigurace > Média > Systém souborů, zda to nepíše nějakou chybu.

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

plavacek (neověřeno) 11.8.2011 10:24:52 ()

Tak žádný problém se zápisem obrázků není a nepomohlo ani odinstalování a nová instalace modulu.

Obrázek uživatele l.lenek

l.lenek (www.babylonie.cz) 30.1.2012 21:42:56 ()

Tak jsem celá natěšená až to dle vašeho návodu zprovozním. Bohužel, také se mi vygeneroval pouze název článku bez textu i obrázku. Chybu mi to žádnou nehlásí (Konfigurace > Média > Systém souborů) a do tmp je přístup i všechen .hattces jsem zakomentovala. Včem ještě by to pls asi tak mohlo býti? Děkuji.

www.babylonie.cz

Obrázek uživatele l.lenek

l.lenek (www.babylonie.cz) 30.1.2012 21:45:05 ()

Pokud však manuálně vložím foto do článku tak to jde. Tudíž, je zjevně problém v modulu Devel.

www.babylonie.cz

MilanS 2.9.2011 11:17:07 ()

Podĺe Vašeho návodu jsem vytvořil vlastní slideshow článků na své stránce, které jsem ještě nastyloval pomocí Display Suite tak, že se zobrazuje vlevo obrázek a v pravo nadpis a zkrácený náhlaed článku. V FF i Chrome funguje v pořádku, v IE je problém v tom, že první slide se zobrazí v pořádku, u druhého  nadpis a text z pravé části mírně zasahují do obrázku vlevo a při dalšícm slidu patrně již zasahují tak hodně, že jsou zobrazeny pod obrákem (v levém sloupci).  Bohužel většina návštěvníků ma IE a mnoho z nich ještě IE7. Nevíte jak lze tu nekompatibilitu IE7 v Drupalu7 ošetřit? Na Googlu jsem nic nenašel. Děkuji. 

Obrázek uživatele Jan Polzer

Jan Polzer (www.polzer.cz/) 2.9.2011 15:24:49 ()

To je věcí CSS, já to ve videu zmínil jen hodně rychle, jinak by to trvalo ještě další minuty navíc. Nejlépe bude, když zmíníte adresu, kde je to vidět a já nebo někdo jiný vám poradí.

Rozhodně bych to nenazýval nekompatibilitou Drupalu s IE7, to je opravdu jen věcí toho, jak si upravíte kaskádové styly.

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

amigo.honza (rrvysocina.cz) 11.10.2011 22:13:56 ()

díky za pěkný návod, použil jsem ho v kombinaci s modulem Views jQFX: Nivo Slider a funguje to parádně.

Jestli uvažujete o dalším návodu, líbilo by se mi něco s videem, jak přehrávat html5 apod.

slavosek 19.7.2012 00:42:22 ()

Vše funguje super, články se zobrazují, já bych potřeboval zobrazovat třeba 3 jpg.

Děkuji za radu kam nahrát obr. jpg a jak to nastavit.

Obrázek uživatele Jan Polzer

Jan Polzer (www.polzer.cz/) 20.7.2012 07:55:37 ()

Detailní rada je nad možnosti komentáře. Prostě si k obsahu přidejte obrázkové pole a jeho obsah nechejte ve View zobrazovat. Toť celé.

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

slavosek 22.7.2012 14:19:33 ()

Děkuju, trvalo mi to asi 5 min a super:-)

Kathy (www.biolampa.info) 28.8.2012 15:18:47 ()

Ďakujem moc za tento návod. Potrebovala som urobiť slideshow v D7 a neviem moc anglicky, sa mi to nedarilo. Vďaka Vám som to konečne pochopila a ľahko vytvorila.

Jezinka (www.malkovskeho.eu) 13.11.2012 02:46:18 ()

Dobrý den,rád bych se zeptal, zda je možné s tímto modulem vytvořit slideshow který by byl podobný třeba tomuto http://www.stream.cz/ ale v trošku lepším provedení. Tedy aby bylo vidět více menších fotek a postupně rotovali z nějakého zásobníku. Děkuji za odpověď.

Obrázek uživatele Jan Polzer

Jan Polzer (www.polzer.cz/) 13.11.2012 16:14:01 ()

Jasně, záleží na Vás, jak si to nastylujete.

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

Jezinka (www.malkovskeho.eu) 13.11.2012 17:14:36 ()

Myslel jsem, že tento slideshow umí zobrazit najednou pouze jen jeden obrázek. Tedy, aby nedošlo k nedorozumění, je možní zobrazit obrázek který přijíždí, který je uprostřed hlavní a třetí který odjíždí?

Obrázek uživatele Jan Polzer

Jan Polzer (www.polzer.cz/) 13.11.2012 19:45:11 ()

Obrázků vám Views Slideshow zobrazí tolik, kolik si řeknete. Co se týče těch efektů u krajních obrázků, zkuste nastavit jiný efekt u položky Transition. Jestli je tam to, co popisujete, ale netuším.

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

Jezinka (www.malkovskeho.eu) 14.11.2012 16:30:22 ()

Tak se mi podařilo vytvořit myslím krásný slideshow. Díky Youtube a i vašemu videu. Jen každé řešení otvírá nový problém a ten současný zatím neumím vyřešit. Jedná se o CSS a mam pocit, že né vše jde v CSS asi udělat. Asi bych to ale rozebral soukromě a pokud jezdíte do Prahy tak i s nějakou domluvenou konzultací placenou. Dejte prosím vědět, zda jezdíte a máte čas. Díky :-)

Jezinka (www.malkovskeho.eu) 20.11.2012 16:45:14 ()

Našel jsem ještě jednu krásnou možnost pro slideshow s pomocí NIVO. To by samo o sobě nebylo nic zvláštního, ale ten člověk, co nahrál video na https://www.youtube.com/watch?v=hhZmSIemHIE k tomu používá galerii. Není nikde ale podrobně vidět, jak má nastaveno v bloku aby používal galerii. Zdá se, že views nemá a mě se to přes něj ani nepodařilo zobrazit. Views nejspíš neumí vytáhnout fotky z galerie, která je na videu (tu galerii mam již nainstalovanou). Poznáte pane Polzere, jak je to řešeno? Kde se nastaví, aby si blok slide bral fotografie z galerie pro to určené? Děkuji

Obrázek uživatele Jan Polzer

Jan Polzer (www.polzer.cz/) 20.11.2012 23:01:41 ()

Kromě Nivo Slider jako takového ještě existuje modul Views Nivo Slider, tak bych mrknul na to. Ve videu sice Views nevidím, ale proč to nezkusit.

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