Kama и campusboy1.5 года назад7 EN

wp_get_attachment_image_srcset() │ WP 4.4.0

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

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

Подробнее про scrset и sizes

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

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

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

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

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

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

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

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

Об атрибуте scrset

srcset — содержит сет УРЛов на картинки (через запятую), чтобы браузер мог выбрать наиболее подходящий вариант в зависимости от параметров экрана устройства, с которого просматривается страница.

В srcset можно указать один или несколько URL.

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

Каждая строка в списке должна содержать УРЛ и дескриптор. Если никакой дескриптор не указан, то берется по умолчанию - 1x.

Дескриптор может быть двух типов:

  • Физическая ширина картинки в пикселях (actual width). Например 600w, 1000w.
  • Плотность пикселей устройства (display density) - DPR (device pixel ratio), например 2x, 3x.
Работает на основе: wp_calculate_image_srcset(), wp_get_attachment_image_src()
1 раз — 0.001658 сек (очень медленно) | 50000 раз — 35.26 сек (очень медленно)

Хуков нет.

Возвращает

Строку|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

Примеры

0

#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
0

#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">
*/
0

#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' ) ?>"
>

Заметки

Список изменений

С версии 4.4.0 Введена.

Код wp_get_attachment_image_srcset() WP 6.7.2

wp-includes/media.php 
function wp_get_attachment_image_srcset( $attachment_id, $size = 'medium', $image_meta = null ) {
	$image = wp_get_attachment_image_src( $attachment_id, $size );

	if ( ! $image ) {
		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 );
}

wp_attachment image (картинки вложения)

Картинки

7 комментариев
    Войти