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

Pro Drupal existuje celá řada modulů vytvářejících slideshow. Vesměs mají jedno společné. Po vytvoření slideshow si ji musíte nastylovat. Jak se ukazuje, nastylování stránky v Drupalu je pro mnoho CSS začátečníků nadlidský úkol.  Proto budete zřejmě vděčni za modul, který vytváří slideshow rovnou připravenou k provozu, bez nutnosti ji dále stylovat.

Reklama

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:

Flex Slider - slideshow pro Drupal 7

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.

Flex Slider - slideshow pro Drupal 7

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.

Flex Slider - slideshow pro Drupal 7

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.

Flex Slider - slideshow pro Drupal 7

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.

Flex Slider - slideshow pro Drupal 7

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.

Flex Slider - slideshow pro Drupal 7

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.

Flex Slider - slideshow pro Drupal 7

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:

Flex Slider - slideshow pro Drupal 7

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.

Tagy: 

Volná místa v IT

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

Reklama

Komentáře

Dobrý den,

netušíte proč se mi ve Flexi Slideru nezobrazují obrázky? Generuje se tento kód:

 

<div class="flexslider-content flexslider clearfix" id="flexslider-1"> <ul class="slides"> <li><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_full/public" width="800" height="500" /> </li> <li><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_full/public" width="800" height="500" /> </li> <li><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_full/public" width="800" height="500" /> </li> <li><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_full/public" width="800" height="500" /> </li> </ul> 

</div>

Je chybný i rozměr obrázků. Má být 940px x 350px.

Děkuji za jakoukoliv radu. 

 

Zdravím, přidal jste do View políčko typu Image? V tom uvedeném zdrojáku totiž nevidím cestu k souboru s obrázkem, je to nějaké rozpadlé.

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

Vše tam je dle návodu ... http://imgup.cz/?v=f/flexsliderproblem.jpg

Nemůže problém způsobovat modul file field path?

Jestli to způsobuje FileField Paths opravdu netuším. Ale problém tam evidentně je, protože podle obrázku vám to nefunguje ani v náhledu. Když zkusíte změnit zobrazení ve View z Flex Slider na normální třeba Unformatted, obrázky se objeví?

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

Ano, pokud dám formát zobrazení Unformated list tak se náhledy objeví. Chyba bude evidentně v tom FlexiSlideru ... pokoušel jsem se hledat na stránkách modulu v sekci issues a nic ;-)

Už je to vyřešeno, typ obsahu nesmí být vícejazykový, musí být jazykově neutrální. Teď už se obrázky zobrazují správně. Děkuji za spolupráci.

Aha, věděl jsem to, taky jsem na to narazil, ale nedošlo mi to :)

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

Dobrý den,

slideshow se mi podařilo dle článku zprovoznit. Je to prima. Jen mi nejdou hyperlinky na jednotilivé obrázky. Použil jsem nastavení View, Pole, Obsah, Obrázek - odkázat obrázkem na obsah a ono to nefunguje :(
Prosím, nevíte, kde dělám chybu ?
Děkuji

Pavel Soukup

Dobrý den, jak nejde? Nevykreslí se to jako odkaz? Nebo je odkaz chybný? Ujistěte se, že nemáte obrázek samotný ještě vykreslovaný přes jeho rewrite jako odkaz, to by se pak dublovalo a nefungovalo.

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

Obrázek nevykreslí jako odkaz :(
A bohužel nevím, jak se ujistit o tom, že obrázek nemám vykreslovaný přew rewrite :(

Pavel Soukup