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í hodnotusrcset
atributu 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í
<?php $img_src = wp_get_attachment_image_url( $attachment_id, 'medium' ); $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' ); ?> <img src="<?php echo esc_url( $img_src ); ?>" srcset="<?php echo esc_attr( $img_srcset ); ?>" sizes="(max-width: 50em) 87vw, 680px" alt="Oprásek"> |
Pokud se chcete dozvědět o použití atributů srcset a sizes, doporučuji web Vzhůru dolů.cz