Вопрос или проблема
В настоящее время я пытаюсь вывести URL миниатюры поста с его различными размерами изображений для использования в srcset.
Мой текущий код:
<img class="productimage lazyload" data-src="<?php the_post_thumbnail_url('medium'); ?>" />
Но это всегда выводит изображение полного размера вместо ‘medium’. Я также пытался использовать первую строку ‘null’ или ID поста; но это по-прежнему не работает.
Есть ли способ вывести URL миниатюры поста с конкретными размерами изображений, которые мне нужны, для srcset?
Что ж, это настраиваемая тема, поэтому я не знаю, пропустил ли я что-то. Пожалуйста, дайте мне знать, если есть способ сделать это.
Просто используйте функцию the_post_thumbnail(). Она создает тег изображения, добавляет srcset для вас и поддерживает родное ленивое загрузку:
the_post_thumbnail( 'medium', [ 'class' => 'productimage' ] );
Ответ или решение
Проблема, с которой вы столкнулись, связана с использованием функции the_post_thumbnail_url('medium'), которая должным образом не возвращает URL-адрес изображения в размере «medium». Вместо этого она может возвращать URL изображения большого размера или полного размера по умолчанию, если не настроено изображение в заданном размере.
Для начала, следует удостовериться, что в вашей теме WordPress действительно зарегистрированы и существуют различные размеры изображений, включая размер «medium». Это можно сделать, добавив следующий код в файл functions.php вашей темы:
add_theme_support('post-thumbnails');
set_post_thumbnail_size(150, 150, true); // Размер миниатюры по умолчанию
add_image_size('medium', 300, 300, true); // Размер для 'medium'Теперь, когда размеры изображений зарегистрированы, вы можете использовать функцию the_post_thumbnail() для вывода изображения нужного размера. Эта функция автоматически генерирует тег <img> с правильным URL изображения, а также добавляет атрибут srcset, что позволяет использовать адаптивные изображения. Пример кода будет выглядеть следующим образом:
<?php the_post_thumbnail('medium', ['class' => 'productimage lazyload']); ?>Использование атрибута lazyload в классе изображения также поддерживается для нативной отложенной загрузки изображений, начиная с версии WordPress 5.5. Вам не нужно вручную добавлять атрибут src для заданного размера изображения, так как the_post_thumbnail() сделает это за вас.
Если вам необходимо использовать только URL изображения, вы можете использовать следующий код, но проверьте существование изображения в нужном размере:
$medium_image_url = get_the_post_thumbnail_url(get_the_ID(), 'medium');
if ($medium_image_url) {
echo '<img class="productimage lazyload" data-src="' . esc_url($medium_image_url) . '" />';
} else {
// Обработка случая, когда изображение в размере 'medium' отсутствует
echo '<img class="productimage lazyload" data-src="' . esc_url(get_the_post_thumbnail_url(get_the_ID())) . '" />';
}Важно помнить, что при работе с изображениями и использованием srcset вы должны убедиться, что размеры изображений правильно генерируются и загружаются, чтобы избежать проблем с производительностью и пользовательским опытом.
Подводя итог, рекомендуется использовать the_post_thumbnail() для наилучшего результата в контексте вашего запроса. Это обеспечит гибкость, лучшую производительность и правильный вывод изображения с поддержкой различных устройств и разрешений экранов.