WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Получай пассивный доход от сайта с помощью браузерных PUSH уведомлений

Smart Custom Field — как вывести изображение тегом picture?

Использую плагин Smart Custom Fields

Необходимо вывести изображение в двух форматах - webp и png.

Формат png через тег img выводится просто -

<img src="<?php echo wp_get_attachment_image_src($meta['become_image_png'], 'full')[0]; ?>" alt="approved_0<?php echo $key+1; ?>">

А вот формат webp через тег picture видимо застрял где-то...

<div class="become-block__image">
	   <picture>
		  <source srcset="<?php echo wp_get_attachment_image_src($meta['become_image_webp'], 'full')[0]; ?>" type="image/webp">
		  <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo wp_get_attachment_image_src($meta['become_image_png'], 'full')[0]; ?>" alt="approved_0<?php echo $key+1; ?>">
	  </picture>
</div>

Скажите, где ошибка.. возможно необходимо выводить по другому?

Заметки к вопросу:
Kama 2 мес назад

У тебя похоже плагин lazy load работает. Иначе что это такое:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="...

И видимо он не умеет работать с picture. Сам тег picture ты вроде правильно юзаешь.

sniper 2 мес назад

Да, это отложенная загрузка на чистом js.
Жаль конечно, если не может 🤷
Спасибо за ответ!

Kama 2 мес назад

Почитай доку для этого скрипта, там наверняка есть решение твоей задачи, то как правильно нужно указать атрибут для picture, возможно по такой же схеме:

<picture>
	  <source srcset="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-srcset="<?php echo wp_get_attachment_image_src($meta['become_image_webp'], 'full')[0]; ?>" type="image/webp">
	  <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="<?php echo wp_get_attachment_image_src($meta['become_image_png'], 'full')[0]; ?>" alt="approved_0<?php echo $key+1; ?>">
</picture>
0
sniper
2 месяца назад

Нет ответов на этот вопрос.

    На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация