Связаться со мной

Добавляем lazy load для прикрепленных изображений WordPress

Разрабатывая сайт столкнулся с такой проблемой, что плагин a3 lazy load применяет свои настройки ленивой загрузки только для Featured Images (the_post_thumbnail()). Я же использую Advanced Custom Fields (ACF) для добавления картинок на свой пост/страницу и в официальном руководстве ACF предлагают выводить как-то так :

<?php 
$image = get_field('image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>

Но a3 lazy load не видит изображение добавленные таким способом. На той же странице руководства еще рекомендуют использовать функцию wp_get_attachment_image() которая генерирует src set и добавляет альты и прочите атрибуты. Вот этот способ мне более предпочтительный, но плагин a3 lazy load все равно не применит lazy load для такой картинки. На странице с плагином рекомендуют использовать фильтр apply_filters(‘a3_lazy_load_images’, $content, null ) для картинок добавленных нестандартным способом WordPress.

Потому решил написать универсальную функцию которая будет принимать имя поля с картинкой, её размеры и если надо, то и атрибуты. Выглядит эта функция так:

function attached_image($id, $size = 'full', $icon = false, $attr = '') {
$content = wp_get_attachment_image($id, $size, $icon, $attr);

if( has_filter( 'a3_lazy_load_images' ) ) {
return apply_filters('a3_lazy_load_images', $content, null );
}

return $content;
}

И теперь данную функцию можно использовать на страницах как-то так:

<php $image = get_field( 'image' ); ?>
<?php if ( $image ) { echo attached_image( $image, 'full' ); } ?>

Также не забудьте в настройках поля ACF с картинкой выставить отдачу ID картинки, а не массив или URL. После всех этих манипуляций картинка будет выводится корректно, с всеми доступными размерами и при этом лениво загружено, что отразиться на положительных показателях Page Speed Insights.