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.

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: 

Reklama

Komentáře

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

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

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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.

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

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

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

Tvořím weby. Nabízím poradenství pro Drupal. Jsem na Twitteru.

Přidat komentář