Адаптивные изображения в WordPress 4.4+

Комментарии — 11

• Егор 19 Дек 2015 

  Здравствуй, Миша. Вот в новой теме WP подгонка картинок

  /**
   * Add custom image sizes attribute to enhance responsive image functionality
   * for content images
   *
   * @since Twenty Sixteen 1.0
   *
   * @param string $sizes A source size value for use in a 'sizes' attribute.
   * @param array  $size  Image size. Accepts an array of width and height
   *                      values in pixels (in that order).
   * @return string A source size value for use in a content image 'sizes' attribute.
   */
  function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
  	$width = $size[0];
   
  	840 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   
  	if ( 'page' === get_post_type() ) {
  		840 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
  	} else {
  		840 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
  		600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
  	}
   
  	return $sizes;
  }
  add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );
   
  /**
   * Add custom image sizes attribute to enhance responsive image functionality
   * for post thumbnails
   *
   * @since Twenty Sixteen 1.0
   *
   * @param array $attr Attributes for the image markup.
   * @param int   $attachment Image attachment ID.
   * @param array $size Registered image size or flat array of height and width dimensions.
   * @return string A source size value for use in a post thumbnail 'sizes' attribute.
   */
  function twentysixteen_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
  	if ( 'post-thumbnail' === $size ) {
  		is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px';
  		! is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px';
  	}
  	return $attr;
  }
  add_filter( 'wp_get_attachment_image_attributes', 'twentysixteen_post_thumbnail_sizes_attr', 10 , 3 );
• Александр 20 Дек 2015 

  Обновился, но атрибуты scrset и sizes и не появилось. Подскажите, что может быть.
  • Миша 20 Дек 2015 

    Описанные в статье условия соблюдаются?
    • Александр 20 Дек 2015 

      <img itemprop="image" class="alignnone size-full wp-image-520" src="111.jpg" alt="альт">

      WP свежий, браузеры тоже. Кэш удалил.
    • Александр 20 Дек 2015 

      Я и у вас не вижу ничего подобного.

      <img src="https://misha.agency/images/2015/12/responsive-izobrazhenie.jpg" alt="Адаптивные изображения в WordPress" title="Адаптивные изображения в WordPress" height="533" width="800">
      • Миша 20 Дек 2015 

        У меня пока не используется :)
    • Александр 20 Дек 2015 

      UPD: на новых картинках заработало.
      • Роман 21 Дек 2015 

        Также
• Александр 31 Дек 2015 

  А возможно ли это использовать в том случае, когда изображение подставляем фоном к блоку?
  Сейчас же все адаптивное нужно, а там есть cover. Например, и в шапку ставлю, и вывод миниатюр в ленте и пр.
  • Александр 31 Дек 2015 

    Сам спросил, сам ответил. Они и для фона это как-то подключили.
• Алекс 18 Янв 2016 

  После обновления WP добавились srcset к изображениям, причем выборочно, к каким-то добавилось, а к каким-то нет. На iphone(Safari) перестали картинки с srcset отображаться, просто пустое место.
  Решил проблему этим:
  remove_filter( 'the_content', 'wp_make_content_images_responsive' );

  Напридумывают всякое, что потом не работает или только на Айфоне так)

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.