Drupal 8, responzivní obrázky a značka picture

Jak řešíte responzivní obrázky? Nastavením maximální šířky a automatické výšky pomocí CSS? Tato základní úprava zajistí, že se design stránky nerozpadne a obrázek se natáhne či smrští podle toho, kolik mu zbyde na tom kterém displeji prostoru.

Díky HTML5 tu ale máme i další možnosti. Využijete-li atributy srcset a sizes u klasické značky <img>, pak jste schopni říci, že zatímco do prohlížeče se šířkou 1024 px a větší se pošle obrázek o rozměru 1200 x 600 px, do mobilního telefonu se pošle jeho kopie nebo jiná fotka s polovičními rozměry.

Tím uživateli ušetříte datový limit, stránka se načte na mobilním připojení o něco rychleji a případně jste schopni i poslat fotku v jiném poměru stran, vyžaduje-li to design webu v různých rozlišeních. Viz ukázka značky <img> a obou zmíněných atributů:

<img src="medium_1024.png" 
  srcset="small_600.png 600w, medium_1024.png 1024w, large_1600.png 1600w"
  width="200" height="200" alt="popisek">

Třetí možností, jak reagovat na šířku displeje a zároveň také načítat odlišné soubory s obrázky, je použití HTML5 značky <picture>. Ta rovněž umožňuje specifikovat rozměry a k nim vyhovující soubory, používá k tomu ale vnořené elementy <source> spolu se zpětnou kompatibilitu zajišťujícím prvkem <img>:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Drupal 8 responzivní obrázky umí v tom smyslu, že tam, kde se generuje fotka z obrázkového políčka (náhledové foto článků, galerie pod článkem a podobně), použije některý z připravených rozměrů a dalších úprav v závislosti na rozměru okna prohlížeče. Výstup generuje do značky <picture>.

Podpora responzivních obrázků v Drupalu samozřejmě nemá nic společného s tím, jestli web může být responzivní, to je čistě záležitost nakódovaného CSS.

Jak na responzivní obrázky v Drupalu 8

K využití podpory responzivních obrázků v Drupalu 8, tak jak jsem ji výše popsal, potřebujete dvě věci:

1. Zapnout modul Responsive Image spolu s modulem Breakpoint (oba jsou součástí jádra)
   
   
2. Definovat si breakpointy ve svém tématu vzhledu (je asi více možností, budu se držet této)
   
   

Zde je vhodné zmínit, že byste měli mít rozmyšlený design a chování webu. Nastavení breakpointů a tím pádem i responzivních obrázků už není něco, co byste mohli střílet od boku, bez rozmyslu.

Definice breakpointů v Drupalu 8

Podle mého názoru bude nejčastějším místem, kde si nadefinujete jednotlivé breakpointy, body zlomu, téma vzhledu. Definicí řekneme, jaké jsou hraniční rozměry jednotlivých změn v designu webu a na základě toho pak budeme moci upřesnit, že třeba pro mobil až do určité šířky displeje se pošle obrázek oříznutý na stojáka, pro široké displeje pak obrázek naležato.

1. V tématu vzhledu vytvořte nový soubor s názvem temavzhledu.breakpoints.yml.
   
   
2. Přidejte do něj zápis dle následující struktury. Ta vychází z výše zmíněného a specifikuje dva body zlomu. První pojmenovává jako mobil a říká, že se uplatní vždy, když bude šířka prohlížeče menší než 639 px včetně. Druhý se pro jednoduchost jmenuje desktop a aplikuje se vždy od šířky 640 px a výše.

temavzhledu.mobil:
  label: mobil
  mediaQuery: 'all and (max-width: 639px)'
  weight: 1
  multipliers:
    - 1x
temavzhledu.desktop:
  label: desktop
  mediaQuery: 'all and (min-width: 640px)'
  weight: 1
  multipliers:
    - 1x   

Jakmile budete mít soubor s breakpointy připravený, vymažte cache Drupalu a nastavte responzivní chování obrázků.

Tip: bodů zlomu si samozřejmě můžete nadefinovat libovolný počet, tak jak to design vašeho webu vyžaduje.

Responzivní styly obrázků

Než začneme pracovat s modulem pro responzivní obrázky, připravte si v administrační části Nastavení > Média > Styly obrázků klasické styly pro úpravu fotek. Pro naše účely dva. Jeden se bude aplikovat v mobilním zobrazení (takže třeba bude mít efekt pro změnu velikosti a oříznutí na výšku), druhý se bude aplikovat na desktopu.

1. S touto základní přípravou se pusťte do nastavení responzivních obrázků:
   
   
2. Přejděte do administrační části Nastavení > Média > Responsive image styles. Klikněte zde na tlačítko Add responsive image style pro přidání nového stylu.
3. Zadejte nějaké pojmenování, se kterým budete pracovat dále v administraci (např. responsivní galerie) a z rozbalovací nabídky Skupina breakpointů vyberte název svého tématu vzhledu. Zde je důležité, abyste neměli překlep v předchozí části s definicí breakpointů.
4. Výběrem tématu vzhledu vám ve formuláři přibydou kolonky s jeho definovanými breakpointy. U každého z nich pak zvolte jako Type volbu Select a single image style a následně z rozbalovací nabídky styl obrázku, který se pro daný breakpoint uplatní. Tím vlastně definujete výstup do značky <source> ve výsledné značce <picture>.
   
5. Následně ještě zadejte styl obrázku, který se aplikuje pro případ, že by prohlížeč nerozuměl značce <picture> (tj. vygeneruje to značku <img> uvnitř <picture>) a nastavení uložte.
6. Nyní zbývá jediné. Jděte do nastavení správy zobrazení u obrázkového políčka a v nastavení formátovače vyberte Responsive image. Klepněte na ozubené kolečko a vyberte připravený responsivní styl obrázků.

Tip: Chcete-li si raději místo značky <picture> a jejích definic <source> pohrát s atributy srcset a sizes, zapněte ve výše uvedeném kroku 4 jako Type volbu Select multiple image styles and use the sizes attribute.

Použití responzivních obrázků v Drupalu 8 tedy není nic příliš složitého. Chce to jen mít správně připravený a rozmyšlený design webu a následně si zvyknout na trochu odlišnou definici aplikování stylů na obrázkové políčko.