Вопрос или проблема
Я пытаюсь использовать функцию адаптивных изображений в ядре WordPress, но srcset не добавляется к изображению. Вот мой код.
У меня есть div с шириной 370px и высотой 280px, теперь я добавил размеры изображения.
if(function_exists('add_image_size')){
add_image_size( 'imagebox', 370, 280, true );
add_image_size( 'imagebox-2x', 840, 560, true );
add_image_size( 'imagebox-3x', 1110, 840, true );}
И я вызываю его внутри цикла вот так:
the_post_thumbnail('imagebox-2x');
Он добавляет только изображение в 2x версии без srcset.
<img width="840" height="560" src="http://localhost/starter/wp-content/uploads/2018/10/04004_theblackandwhiterocky_2560x1600-840x560.jpg" class="attachment-imagebox-2x size-imagebox-2x wp-post-image" alt="">
Если я убираю размер изображения из the_post_thumbnail и использую только the_post_thumbnail();, он работает с адаптивными изображениями, но без моих размеров.
<img width="180" height="180" src="http://localhost/starter/wp-content/uploads/2018/10/04004_theblackandwhiterocky_2560x1600-180x180.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" >
Как я могу это исправить?
Если вы редактировали изображение (обрезали или поворачивали) после его вставки в запись, а затем изменили размеры изображения, но не обновили запись, в которой изображение используется, вы можете оказаться в такой ситуации. Это преднамеренное поведение. Оно не позволяет WordPress отображать изображение в размерах, которые не были изначально предусмотрены, и вместо этого отображается то, что было фактически вставлено в запись.
Это из ядра WordPress (wp-includes/media.php):
// Рано выходим, если изображение было вставлено и позже отредактировано.
if ( preg_match( '/-e[0-9]{13}/', $image_meta['file'], $img_edit_hash ) &&
strpos( wp_basename( $image_src ), $img_edit_hash[0] ) === false ) {
return $image;
}
Решение заключается в том, чтобы сначала зайти в папку медиа и затем восстановить миниатюры с помощью плагина Regenerate Thumbnails, если они еще не существуют. Затем зайдите в запись, где используется изображение, и либо удалите изображение и вставьте его снова, либо выберите его и выберите новый зарегистрированный размер. Я не знаю никаких обходных путей или настроек, которые могли бы изменить это поведение (но, возможно, они и должны существовать…)
Пожалуйста, дайте мне знать, если это сработает для вас.
Ответ или решение
Когда вы сталкиваетесь с проблемой отсутствия атрибута srcset в изображениях, используемых в WordPress, несмотря на то, что вы создали собственные размеры изображений, стоит учесть несколько ключевых моментов.
Во-первых, давайте вспомним, как работает система изображений в WordPress. При добавлении пользовательских размеров изображения с помощью функции add_image_size, WordPress ожидает, что для каждого изображения будут генерироваться соответствующие размеры при загрузке.
Вы уже добавили размеры изображения в вашу тему:
if(function_exists('add_image_size')){
add_image_size( 'imagebox', 370, 280, true );
add_image_size( 'imagebox-2x', 840, 560, true );
add_image_size( 'imagebox-3x', 1110, 840, true );
}И вызываете изображение через the_post_thumbnail('imagebox-2x');. Однако, как вы заметили, атрибут srcset не добавляется, что приводит к отображению только одного размера изображения.
Возможные причины и решения
-
Проблема с обновлением изображений: Если вы изменили изображение (например, обрезали или повернули его) после его вставки в запись и затем изменили размеры, WordPress может не обновить атрибуты
srcset. Это намеренное поведение, чтобы защитить вас от отображения изображений в неверных размерах.Решение: Убедитесь, что размеры изображения были переопределены. Вам необходимо использовать плагин для регенерации миниатюр. Я рекомендую Regenerate Thumbnails — этот плагин сгенерирует новые размеры для всех загруженных изображений. После этого зайдите в запись, где используется изображение, и либо удалите его и добавьте заново, либо выберите его и задайте новый зарегистрированный размер.
-
Проблемы с кэшированием: Если у вас установлены плагины кеширования (например, W3 Total Cache или WP Super Cache), они могут хранить старые версии страниц без
srcset. Убедитесь, что вы очистили кэш после внесения изменений. -
Изменения в темах или плагинах: Некоторые темы и плагины могут конфликтовать с функцией обработки изображений. Временно переключитесь на стандартную тему (например, Twenty Twenty-One) и проверьте, будет ли добавлен
srcset. Если проблема решится, то вероятнее всего, дело в вашей текущей теме или плагинах. -
Проверка кода: В вашем коде, когда вы вызываете
the_post_thumbnail, убедитесь, что вы правильно указали зарегистрированный размер изображения. Убедитесь, что не occurring any typos или другие ошибки.
Вот код, который можно использовать для вывода изображения с srcset:
echo wp_get_attachment_image( get_post_thumbnail_id(), 'imagebox-2x' );Заключение
Следуя вышеуказанным шагам, вы должны решить проблему отсутствия атрибута srcset. Пожалуйста, попробуйте эти решения и дайте знать, если возникнут дополнительные вопросы или проблемы.