В верстку изначально были добавлены изображения формата webp для браузеров, его поддерживающих. Ниже кусок кода интересующего нас блока каталога, разметка в нем может быть только такой, тег picture не катит для плагина fotorama.
<a data-href-webp="big.webp" data-href-png="big.png>">
<img src="small.png" alt="alt">
</a>
Проверка осуществлялась через библиотеку Modernizr
Modernizr.on('webp', function (result) {
let a = document.querySelectorAll('.catalog a');
for (let i = 0; i < a.length; i++){
if (result) {
a[i].href = a[i].getAttribute('data-href-png');
}
else {
a[i].href = a[i].getAttribute('data-href-png');
}
}
});
При посадке на Вордпресс был создан новый тип поста через register_post_type, картинки для каталога выводятся с помощью ACF - Изображение.
В functions.php прописана функция, которая конвертирует в webp все загруженные изображения, не меняя имя, но добавляя расширение в конец. (взята отсюда -
https://gist.github.com/egmalt/6da5602efd953d3596e...
Пытаюсь сделать вывод изображений в верстку таким образом:
<?php
$image = array();
// всего нужно 5 изображений
for($i=1;$i<=5;$i++){
//поля называются pic_1_1 - pic_5_1
$image[$i] = get_field('pic_'.$i.'_1');
if( !empty($image[$i]) ):
// vars
$url[$i] = $image[$i]['url'];
$alt[$i] = $image[$i]['alt'];
$urlWebp[$i] = str_replace('.png', '.png.webp', $url[$i]);
//если выводить в консоль $urlWebp[$i], то получаем нужный нам url, по которому и размещается webp
$imageWebp[$i]=$image[$i];
$imageWebp[$i]['url']=$urlWebp[$i];
// thumbnails
$sizeBig = 'catalog-big';
$sizeSmall = 'catalog-small';
$thumbBig[$i] = $image[$i]['sizes'][ $sizeBig ];
$thumbSmall[$i] = $image[$i]['sizes'][ $sizeSmall ];
$thumbBigWebp[$i] = $imageWebp[$i]['sizes'][ $sizeBig ];
$thumbSmallWebp[$i] = $imageWebp[$i]['sizes'][ $sizeSmall ];
?>
<?php endif; ?>
//вывод в верстку:
<a data-href-webp="<?php $thumbBigWebp[$i]; ?>" data-href-png="<?php echo $thumbBig[$i]; ?>">
<img src="<?php echo $thumbSmall[$i]; ?>" alt="<?php echo $alt[$i]; ?>">
</a>
<?php }; ?>
Все это внутри цикла вывода постов.
Этот код работает, но выводит из админки только png. Подозреваю, что если был загружен png, то и вывести через get_field() можно только его. Как можно это обойти? Или проще каким-то другим способом добавить webp?
