WordPress как на ладони
Наставник Трепачёв Д.П., phphtml.net wordpress jino

wp_get_attachment_image_srcset() WP 4.4.0

Получает значение для атрибута srcset html тега <img>. Значение будет содержать имена всех имеющихся размеров указанной картинки (вложения) в таком виде: image.jpg 1x, image-sm.jpg 640w".

Функция получает по ID картинки-вложения все имеющиеся размеры этой картинки и создает из полученных данных строку для атрибута srcset.

Функция ничего не вернет если:

  • указанная картинка это анимированная GIF картинка. В этом случае промежуточные размеры получить невозможно.

  • удалось получить только данные одного промежуточного размера. Для srcset нужно как минимум два.

При поиске промежуточных размеров функция пропускает картинки если:

  • если ширина промежуточной картинки больше 1600px. Это значение можно изменить через фильтр max_srcset_image_width

  • Пропускает картинки которые были отредактированы (оригиналы).

  • Пропускает картинки пропорции которых отличаются от основной. Т.е. height/width не равно height/width промежуточной картинки. При сравнении допускается погрешность в 0.002.

Эта функция используется в связке с wp_get_attachment_image_sizes()

Об атрибуте scrset

Атрибут scrset — это замена атрибута src. В scrset указываются несколько URL картинки и условие для каждого URL при котором он должен использоваться. Этот атрибут важнее чем src и src будет использован только если браузер не поддерживает scrset.

Например такая строка:

<img src="image-small.jpg" srcset="image-small.jpg 1x, image-large.jpg 2x, image-cropped-sm.jpg 640w">

Обработается так:

  • Если нет поддержки srcset - будет использована картинка image-small.jpg
  • Если стандартное разрешение экрана - image-small.jpg
  • Если это экран с повышенной пикселизацией (ретина) - image-large.jpg
  • Если максимальная ширина экрана устройства меньше или равна 640px - image-cropped-sm.jpg
Работает на основе: wp_calculate_image_srcset(), wp_get_attachment_image_src()
✈ 1 раз = 0.001658с = очень медленно | 50000 раз = 35.26с = очень медленно

Хуков нет.

Возвращает

Строку/true/false. Значение атрибута 'srcset' или false.

Использование

wp_get_attachment_image_srcset( $attachment_id, $size, $image_meta );
$attachment_id(число) (обязательный)
ID картинки вложения, значения для которой нужно получить.
$size(массив/строка)

Размер картинки для которой будет построено значение атрибута srcset.

Может принимать любой зарегистрированный размер или массив: array(100,150), где 100 - ширина, а 150 высота в пикселях.

Значение передается в функцию wp_get_attachment_image_src() еще описание смотрите там.

По умолчанию: 'medium'

$image_meta(массив)

Метаданные картинки, в формате который возвращается функцией: wp_get_attachment_metadata().

Или можно получить метаданные вложения так: get_post_meta( $attachment_id, '_wp_attachment_metadata', true );

По умолчанию: null

Примеры

#1 Получим значения srcset для полного размера картинки

echo wp_get_attachment_image_srcset( 6587, 'full' );
// выведет: 
// http://wp-kama.ru/wp-content/uploads/2015/12/WP-Recall-0-120x69.jpg 120w, http://wp-kama.ru/wp-content/uploads/2015/12/WP-Recall-0.jpg 975w

#2 Добавим атрибут srcset для картинки

$attachment_id = 6587;

printf( '<img src="%s" srcset="%s">',
	wp_get_attachment_image_url( $attachment_id ),
	wp_get_attachment_image_srcset( $attachment_id, 'full' )
);

/* выведет:
<img
	src="/wp-content/uploads/2015/12/WP-Recall-0-80x80.jpg"
	srcset="http://wp-kama.ru/wp-content/uploads/2015/12/WP-Recall-0-120x69.jpg 120w, http://wp-kama.ru/wp-content/uploads/2015/12/WP-Recall-0.jpg 975w">
*/

#3 Добавление необходимых атрибутов в IMG

<img
	src="<?php echo wp_get_attachment_image_url( $attachment_id, 'large' ) ?>"
	srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'large' ) ?>"
	sizes="<?php echo wp_get_attachment_image_sizes( $attachment_id, 'large' ) ?>"
>

Код wp get attachment image srcset: wp-includes/media.php WP 4.8.1

<?php
function wp_get_attachment_image_srcset( $attachment_id, $size = 'medium', $image_meta = null ) {
	if ( ! $image = wp_get_attachment_image_src( $attachment_id, $size ) ) {
		return false;
	}

	if ( ! is_array( $image_meta ) ) {
		$image_meta = wp_get_attachment_metadata( $attachment_id );
	}

	$image_src = $image[0];
	$size_array = array(
		absint( $image[1] ),
		absint( $image[2] )
	);

	return wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id );
}

Cвязанные функции

Из раздела: Картинки

Подробно на сайте www.Mkdg.Ru

подробно на сайте www.Mkdg.Ru заказать разработку по

mkdg.ru

wp_get_attachment_image_srcset 5 комментариев
  • Dzmitry Roshchyn cайт: pribylvseti.ru

    Тимур, а это нормально для поисковиков, когда три ссылки на разные размеры станут указываться в одном изображении?

    Ответить1.5 года назад #
    • campusboy1745 cайт: wp-plus.ru
      @

      Поисковик увидит только то, что прописано в src, а всё остальное не поймет. Так что всё нормально.

      Ответить1.5 года назад #
  • ситуация:
    есть 2 моих сайта , на одном все заполнено, второй дублирует картинки к постам с первого - на втором сайте через хромиум грузится все быстро с картинками image-300x300.jpg - но Mozilla прется загружать полноценные из-за srcset - кто захочет удалить атрибут - вод код вставте в functions.php

    add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) );
    Ответить1.5 года назад #
  • petrozavodsky674 cайт: alkoweb.ru

    ошибочка echo printf вроде не бывает, printf и сам по себе напечатает

    1

Здравствуйте, !

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