Flex Slider: slideshow pro Drupal bez nutnosti úprav stylů CSS

Po pravdě, přiznám se, že nechápu, proč se někteří z vás pouštějí do vytváření dynamických prvků na stránce, jako je třeba slideshow, když nejsou schopni uplatnit základní znalosti tvůrce webu v oblasti kódování CSS. V Drupalu totiž máte na výběr mnoho modulů pro tvorbu slideshow a jste díky nim schopni vytvořit si slideshow obrázků přesně podle grafického zadání pro web. Nemusíte tak jen kopírovat již někým vytvořené části stránky.

Takových modulů jsem na Maxiorlovi v minulosti zmínil už několik. Například Views Carousel a Nodecarousel nebo momentálně můj oblíbený Views Slideshow. Jak jsem jej použil v praxi, můžete vidět třeba na webu Broker Consulting.

Každopádně pokud vám úprava CSS skutečně dělá problémy a radši čas nad ní strávený věnujete práci na jiné části webu, mám pro vás zajímavý tip a návod. Podívejte se na modul Flex Slider. Umožní vám vytvořit jednoduchou slideshow obrázků, automaticky do ní zakomponuje ukazatel počtu a znázornění aktuálního slajdu, doplní tlačítka pro přecházení mezi slajdy, podporuje ovládání šipkami na klávesnici, dovede slideshow pozastavit a spustit, náhodně ji promíchat a také k obrázku automaticky doplnit text s popiskem. Skoro se nechce věřit, že by něco tak připraveného bylo ve flexibilní skládačce jménem Drupal, co říkáte?

Základní příprava pro slideshow v Drupalu a Flex Slider

Připravte si následující:

• Modul Flex Slider - klasická instalace do složky sites/all/modules
• JavaScript Flexslider - rozbalte jej, složku přejmenujte na flexslider a nakopírujte ji do sites/all/libraries, budete tedy mít sites/all/libraries/flexslider
• Views - klasika, bez které se větší web neobejde, instalujte zase normálně do sites/all/modules
• Libraries a Chaos Tools - rovněž známé, podpůrné moduly, instalujte klasicky do sites/all/modules

Jakmile máte vše nakopírováno, přejděte do administrační části Moduly a zapněte Flex Slider, Flex Slider Views Style, obě součásti modulu Views, Libraries a Chaos Tools. Další části z balíčků zmíněných modulů nejsou třeba.

Tím máme připravenu základní sadu modulů pro sestrojení slideshow. Nyní musíme říci, co bude ve slideshow rotovat. Nejjednodušším řešením je vzít nějaký typ obsahu a doplnit k němu obrázek. Řekněme tedy, že k obsahu typu Základní stránka doplníme nahrávání obrázku do samostatného políčka a ve slideshow budeme rotovat úplně všechny stránky, které mají obrázek vyplněn.

V praxi by samozřejmě bylo lepší mít na slajdy připraven vyhrazený typ obsahu nebo to nějak jinak filtrovat, abyste neskončili se stovkou položek v jednom slideshow.

Přejděte tedy do administrační části Struktura > Typy obsahu > Základní stránka > Správa polí. Přidejte nové políčko typu obrázek a nastavte, aby k němu bylo možné vkládat Nadpis a popisek Alt. Viz screenshot:

Nyní vytvořte několik stránek, ke kterým nahrajete obrázky a doplníte u nich popisky. Ve slideshow se na prvním místě popisu jako tučný text zobrazí obsah políčka Nadpis následovaný alternativním textem.

Dále se rozhodněte, v jaké části webu chcete slideshow zobrazit, Jestli ji budete zobrazovat přes celou šířku, zjistěte si šířku webu. Jestli bude slideshow jenom třeba v obsahovém regionu a vedle ní už bude postranní panel, zjistěte si šířku obsahového regionu. Přejděte do administrační části Konfigurace > Média > Styly obrázků a vytvořte nový styl - pojmenujte jej třeba slajdy. Výchozí styl, který zde doplnil Flex Slider, vám totiž do webu zřejmě nezapadne.

Do vytvářeného stylu obrázku dejte minimálně jeden efekt - Změnit velikost se zachováním poměru stran a oříznout. Rozměry výsledného obrázku, na který se nahraný originál upraví, nastavte tak, aby pokrývaly šířku oblasti, kam slideshow vložíte, a výšku, jakou požadujete.

Já jsem pro umístění slideshow do regionu Zvýrazněno v tématu vzhledu Bartik použil šířku 935px a výšku obrázku jsem nastavil na 500px. Nahrané fotky se mi tedy do slideshow budou zmenšovat na výškově ořezávat.

V nastavení Konfigurace > Média > Flex Slider najdete možnost definovat sady nastavení - pro případ, že byste chtěli na jednom webu mít více různě se chovajících slideshow. Běžně si vystačíte jen se základním nastavením Default, které si rozklikněte pro úpravu a přepište v něm popisky ovládacích tlačítek pro přechody mezi snímky. Podle potřeby upravte i další nastavení a uložte jej.

Jak vytvořit slidehow pro Drupal 7 s modulem Flex Slider

V tuto chvíli byste tedy měli mít připraven obsah (stránky s obrázky pro slideshow), nastaven styl obrázků pro zobrazení ve slideshow a upraveno nastavení modulu Flex Slider. Je čas pustit se do vytvoření slideshow samotné.

Pomocí Struktura > Views > Add new View přidejte nový pohled. Nazvěte jej třeba slideshow, zvolte v něm zobrazování jen obsahu typu stránka, a to ve formě Flex Slideru s políčky. Nechejte View vytvořit jen Blok.

Přejděte pak do nastavení vytvořeného View a odstraňte z něj políčko s nadpisem uzlu. Místo něj vložte obrázkové pole, u kterého nastavíte styl obrázku na před chvílí vytvořené slajdy.

Ve filtrech byste měli mít filtrování jen pro vydaný obsah, pro obsah typu stránka a ještě přidejte filtr pro Obrázek:fid, kde nastavte, že chcete do View zahrnout jen ty uzly, které mají tuto hodnotu NOT NULL (nejsou prázdné, tedy mají nahraný obrázek).

Podle svého uvážení můžete v kritériích řazení vyhodit seřazení záznamů dle abecedy a nastavit zde náhodné seřazení pomocí kritéria Global: Random.

View nyní uložte a přejděte do Struktura > Bloky. Vyhledejte v něm právě nadefinovaný blok pro slideshow a umístěte jej do zvoleného regionu na stránce. Výsledek by měl vypadat takto:

Jak vidíte, vytvoření slideshow pro Drupal pomocí modulu Flex Slider je maximálně jednoduché. V celém návodu nevidíte žádný zásah do CSS. Samozřejmě, chce to znát práci s Views. Pokud je pro vás i toto problém, pak buď sáhněte po nějakém tématu vzhledu, kde je slideshow připraveno a jen vyměníte obrázky, případně si práci s Drupalem trochu dostudujte v nějakém kurzu pro Drupal.

To, jak modul Flex Slider zapadne do vašeho webu ovlivňuje správné nastavení velikosti obrázků, které v něm rotují. Pokud rozměr netrefíte, nebudou obrázky centrovány a už bude nutný zásah do CSS, případně úprava ve stylech obrázků v administraci Drupalu. Součástí modulu Flex Slider je také modul přidávající další způsob zobrazení k obrázkovým políčkům přilepeným k obsahu. Můžete si tak třeba definovat, že políčko s více nahranými obrázky chcete v režimu celého zobrazení uzlu ukazovat ve formě slideshow s těmito obrázky. Ale to už je téma na jinou debatu.