V novém WordPressu 4.4, bude přidána nativní podpora responsivních obrázků, pomocí atributů srcset a sizes. Jak přesně to bude fungovat?
Při každém nahrání obrázku do médií, vytváří WordPress sadu obrázků o různých rozměrech. Díky vložení dostupných velikostí do atributu srcset, mohou si prohlížeč zvolit nejvhodnější velikost obrázku, který budou stahovat a díky tomu se rychlost načítání stránky velmi zrychlí.
Aby si mohl prohlížeč lépe vybrat vhodný obrázek, bude vkládán „sizes“ atribut, který je ekvivalent k „(max-width: {{image-width}}px) 100vw, {{image-width}}px“. Přestože by tento postup měl fungovat ve většině prohlížečů, šablona má možnost upravovat výchozí sizes atribut, pomocí „wp_calculate_image_sizes“ filtru.
Nové funkce a hooky
wp_get_attachment_image_srcset()– vrací hodnotusrcsetatributu pro obrázek.wp_calculate_image_srcset()– pomocná funkce pro vytvoření atributu srcset.wp_get_attachment_image_sizes()– vrací hodnotu sizes atributu pro obrázek.wp_calculate_image_sizes()– pomocná funkce pro vytvoření atributu sizes.wp_make_content_images_responsive()– filter, pomocí kterého můžete ovlivnit přidání sizes a srcset pro obrázky v obsahu.wp_image_add_srcset_and_sizes()–přidá atributy szes a srcset pro již existující obrázky.
Příklad použítí
;%20?></img>)
Pokud se chcete dozvědět o použití atributů srcset a sizes, doporučuji web Vzhůru dolů.cz