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:
Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development 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.
Podobné články
Komentáře k článku
Díky, popřemýšlím.
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....
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
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.
Tak žádný problém se zápisem obrázků není a nepomohlo ani odinstalování a nová instalace modulu.
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.
Pokud však manuálně vložím foto do článku tak to jde. Tudíž, je zjevně problém v modulu Devel.
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.
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.
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.
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.
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é.
Děkuju, trvalo mi to asi 5 min a super:-)
Ď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.
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ěď.
Jasně, záleží na Vás, jak si to nastylujete.
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á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.
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 :-)
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
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.
Dobrý den, děkuji za videonávod slideshow-bez problému. Chtěl bych se zeptat,
u Vašeho BROKER CONSULTING je možno kliknout na velkou fotku a otevřít novou stránku.
Neporadil byste mi, jak je to provedeno. Děkuji.
Stránky u sebe mají políčko "Obrázek pro slideshow". V té slideshow pak tyto obrázky rotují. Mají nasaveno zobrazení a prolinkování na svůj obsah. Takže velice jednoduché.
Dobrý den, chci se zeptat, jak to udělat, když chci, aby mi tam rotovalo třeba devět obrázků, které by se zobrazovali ve skupinách po třech a kolem těch minináhledů by byli přepínače na posunutí na další tři?
Zkoušel jsem na to různé moduly, ale nikdy se mi nepodařilo udělat stejný efekt, jak máte vy, akorát s tím posunutím náhledů.
Dobrý den,
chci se zeptat jak stylovat v Drupal 8 Views? V Drupal 7 sem použil nástroj pro vývojáře, kde jsem si našel ID views a ten pak styloval, jenže v Drupal 8 se ID views zobrazuje pouze u Bloků, u stránek ne (nějaká "značka" tam je, ale nevím co si z ní vzít abych mohl stylovat, není tam to co je u bloků např: views-block-priklad atd. Prosím o radu. Děkuji
Stylování Views v Drupalu 8 je stejné, jako u čehokoli jiného. Přednostně používejte classy, nikoli ID prvku. Třeba View posledních komentářů tu na boku má class view-comments-recent. Takže do stylů by se dalo:
.view-comments-recent{ ... }
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