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

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.

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

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

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

Profile picture for user vomi

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

návštěvník

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

Profile picture for user Jan Polzer

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.

návštěvník

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

návštěvník

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.

návštěvník

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

návštěvník

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. 

Profile picture for user Jan Polzer

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.

návštěvník

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.

návštěvník

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.

Profile picture for user Jan Polzer

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

návštěvník

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

návštěvník

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ěď.

návštěvník

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í?

Profile picture for user Jan Polzer

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.

návštěvník

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

návštěvník

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

návštěvník

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.

Profile picture for user Jan Polzer

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

návštěvník

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

Profile picture for user Jan Polzer

Já bych to zkusil asi s modulem FlexSlider. Je to o něco složitější nakonfigurovat, ale pokud chcete docílit tohoto, tak je to možné.

návštěvník

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

Profile picture for user Jan Polzer

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{ ... }

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
Nové diskuze
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