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>
Скажите, где ошибка.. возможно необходимо выводить по другому?
Заметки к вопросу:
Да, это отложенная загрузка на чистом js.
Жаль конечно, если не может 🤷
Спасибо за ответ!
Почитай доку для этого скрипта, там наверняка есть решение твоей задачи, то как правильно нужно указать атрибут для 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>
У тебя похоже плагин lazy load работает. Иначе что это такое:
И видимо он не умеет работать с picture. Сам тег picture ты вроде правильно юзаешь.