Отзивчиви изображения и WordPress

Милен Петрински - Гонзо

WordCamp Sofia 2017

Кой?

Гонзо Виелицата

Милен Петрински - Гонзо

http://greatgonzo.net

@gonzomir on WordPress.org

@gonzomir on Twitter

Какво е това „отзивчиви изображения“?

И каква е ползата от тях?

Нещо като дефиниция

Метод за сервиране на различни източници за едно изображения в зависимост от размера на екрана, неговата разделителна способност, или други фактори.

Превключване на резолюцията


<img src="image.jpg" srcset="image-360x270.jpg 360w, image-800x600.jpg 800w" sizes="(min-width: 840px) 800px, calc(100vw - 40px)" alt="" />
  

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes

Артистични съображения

<picture>
  <source media="(min-width: 840px)" src="image-800x600px.jpg" type="image/jpeg" />
  <source media="(min-width: 840px)" src="image-800x600px.webp" type="image/webp" />
  <source media="(max-width: 640px) and (orientation: portrait)" src="image-640x800px.jpg" />
  <source media="(max-width: 640px) and (orientation: landscape)" src="image-640x400px.jpg" />
  <img src="image.jpg" alt="" />
</picture>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Ползата

dimitaraleksov.com

десктоп
~1.6MB
Снимка на екрана на лаптоп на dimitaraleksov.com
телефон
~600KB
Снимка на екрана на телефон на dimitaraleksov.com

sibela.eu

десктоп
~1.2MB
Снимка на екрана на лаптоп на sibela.eu
телефон
~700KB
Снимка на екрана на телефон на sibela.eu

Как да използваме отзивчиви изображения в WordPress теми?

С какво разполагаме?

От версия 4.4 насам WordPress разполага с доста функции за работа с отзивчиви изображения.

https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

add_image_size()
Казва на WordPress да генерира определен размер изображение още при качване на файла в библиотеката.
wp_get_attachment_image_srcset()
Връща низ със генериран srcset за дадено изобажение от медийната библиотека.
wp_get_attachment_image_sizes()
Генерира стойност за атрибута sizes.
wp_make_content_images_responsive()
Филтрира елементи img в съдържанието на публикация и добавя атрибути srcset и sizes.
max_srcset_image_width
Филтър, чрез който се ограничава максималния размер, включван в srcset.
wp_calculate_image_srcset и wp_calculate_image_sizes
Филтри, с които могат да се променят подразбиращите се атрибути srcset и sizes съответно.
wp_get_attachment_image_attributes
Филтър, с който могат да се променят атрибутите на изображения, зареждани от медийната библиотека.
get_header_image_tag
Филтър, с който може да се манипулира кода на заглавното изображение.

По подразбиране

WordPress генерира сам srcset, като включва всички изображения със същите пропорции като изображението в src.

По подразбиране WordPress генерира sizes="(max-width: [image width]) 100vw, [image width]".

Първата стъпка

Накарайте WordPress да генерира нужните ви размери картинки.

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

https://developer.wordpress.org/reference/functions/add_image_size/

Пример


// header images on big screens
add_image_size( 'header-image-huge', 1920, 453, true );
add_image_size( 'header-image-large', 1650, 390, true );
add_image_size( 'header-image-big', 1366, 323, true );
add_image_size( 'header-image-small', 1024, 242, true );

// header images on medium screens
add_image_size( 'wide-large', 1024, 391, true );
add_image_size( 'wide-big', 800, 306, true );

// header images on small screens
add_image_size( 'square-big', 520, 320, true );
add_image_size( 'square-medium', 360, 222, true );

Основно изображение

Ръчно добавяне на атрибут sizes.

the_post_thumbnail( 'image-medium', array( 'sizes' => '(min-width: 60em) 29.5em, (min-width: 37.5em) calc(50vw - 1.5em), 100vw' ) );

Основно изображение

Използване на филтър.

function twentyseventeen_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
  if ( is_archive() || is_search() || is_home() ) {
    $attr['sizes'] = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
  } else {
    $attr['sizes'] = '100vw';
  }
  return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'twentyseventeen_post_thumbnail_sizes_attr', 10, 3 );

Картинки в съдържанието на публикация

function twentyseventeen_content_image_sizes_attr( $sizes, $size ) {
  $width = $size[0];

  if ( 740 <= $width ) {
    $sizes = '(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px';
  }

  if ( is_active_sidebar( 'sidebar-1' ) || is_archive() || is_search() || is_home() || is_page() ) {
    if ( ! ( is_page() && 'one-column' === get_theme_mod( 'page_options' ) ) && 767 <= $width ) {
       $sizes = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
    }
  }

  return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentyseventeen_content_image_sizes_attr', 10, 2 );

Заглавно изображение

function twentyseventeen_header_image_tag( $html, $header, $attr ) {
  if ( isset( $attr['sizes'] ) ) {
    $html = str_replace( $attr['sizes'], '100vw', $html );
  }
  return $html;
}
add_filter( 'get_header_image_tag', 'twentyseventeen_header_image_tag', 10, 3 );

Заглавно изображение с picture

function picture_header_image_tag( $html, $header, $attr ) {

  $new_html = '<picture>';

  $srcset = wp_get_attachment_image_srcset( $header->attachment_id, 'image-portrait' );
  $new_html .= '<source media="(orientation: portrait)" srcset="' . esc_attr( $srcset ) . '" sizes="100vw" />';

  $srcset = wp_get_attachment_image_srcset( $header->attachment_id, 'image-landscape' );
  $new_html .= '<source media="(orientation: landscape)" srcset="' . esc_attr( $srcset ) . '" sizes="100vw" />';

  $new_html .= $html;
  $new_html = '</picture>';

  return $new_html;
}
add_filter( 'get_header_image_tag', 'picture_header_image_tag', 10, 3 );

Джаджа за изображение

function grid_mag_image_sizes( $attr, $attachment ){
  if( array_key_exists( 'style', $attr ) && $attr['style'] == 'max-width: 100%; height: auto;' ) {
    // It's the image widget
    $attr['sizes'] = '(min-width: 60em) calc( (100vw - (2.5em + (20vw - 12em)) * 2 - 3em) / 3 ), (min-width: 40em) calc( (100vw - (1.5em + (5vw - 2em)) * 2 - 1.5em) / 2 ), calc(100vw - 3em)';
  }
  return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'grid_mag_image_sizes', 10, 2 );

Въртележки, слайдъри и подобни

По-хубавите разширения имат подходящи филтри, чрез които да манипулирате атрибутите на изображението или целия HTML.

Meta Slider

metaslider_{type}_slider_image_attributes
Позволява манипулиране на атрибутите на изображенията.
metaslider_image_{type}_slider_markup
Позволява манупилиране на пълния HTML на всеки слайд.

https://www.metaslider.com/documentation/category/developer-api/
https://allurewebsolutions.com/adding-srcset-attribute-meta-slider-images

Slider Revolution

revslider_slide_get_image_attributes
Позволява манипулиране на атрибутите на изображенията, май.

Полезни разширения

Manual Image Crop
Позволява ръчно изрязване на изображенията за всеки отделен размер.
YoImages
Изрязване на изображения, ръчна замяна на изображението за даден размер и др.
Image Regenerate & Select Crop
Позволява ръчно регенерирне на всеки размер, показва детайли за различните размери и др.
Regenerate Thumbnails
Регенерира всички размери изображения.
EWWW Image Optimizer
Намалява размера на файловете без да намалява качеството локално на вашия сървър.
WP Smush
Намалява размера на файловете без да намалява качеството чрез външна услуга.

Полезни статии

Основните стъпки накратко

  1. Генерирайте нужните размери изображения;
  2. Задайте коректни стойности на атрибута sizes за всички изображения;
  3. Дайте възможност на редакторите да управляват изображенията.

Вашите коментари?

Статълр и Уолдорф не са единодушни в оценката си.