Responzivní obrázky ve WordPress 4.4

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í hodnotu srcset 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">
Čtěte  Nová galerie produktu ve WooCommerce 2.7

 

Pokud se chcete dozvědět o použití atributů srcset a sizes, doporučuji web Vzhůru dolů.cz

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *