[WordPress][WP Rocket] [deprecated] Wrapper function: Applies WP Rocket’s LazyLoad to wp_get_attachment_image()

wp_rocket__wp_get_attachment_image__lazyload.php

<?php
/**
 * Wrapper function: Applies WP Rocket’s LazyLoad to wp_get_attachment_image()
 *
 * @link https://developer.wordpress.org/reference/functions/wp_get_attachment_image/
 * @link https://github.com/wp-media/wp-rocket/blob/v2.10.9/inc/front/lazyload.php#L24-L47
 * 
 * @param  int           $attachment_id  (Required) Image attachment ID.
 * @param  string|array  $size           (Optional) Image size. Accepts any 
 *                                       valid image size, or an array of width 
 *                                       and height values in pixels (in that order).
 * @param  boolean       $icon           (Optional) Whether the image should be 
 *                                       treated as an icon.
 * @param  string|array  $attr           Attributes for the image markup.
 * @return string                        HTML img element or empty string on failure.
 */
function wp_rocket__wp_get_attachment_image__lazyload( $attachment_id, $size = 'thumbnail', $icon = false, $attr = '' ) {

	$image_html = wp_get_attachment_image( $attachment_id, $size, $icon, $attr );

	if( function_exists( 'rocket_lazyload_images' ) ) {
		return rocket_lazyload_images( $image_html );
	}

	return $image_html;
}

This works great with wp_get_attachment_image, which normally isn't supported by lazyload plugins. The reason for this is, that there is no way the HTML of wp_get_attachment_image can be manipulated, which means there is no way a <noscript> tag can be added. See core ticket: https://core.trac.wordpress.org/ticket/27399

With the wrapper function above, I can take advantage of the WP Rocket Lazyload script for lazyloading Advanced Custom Field images like this:

$attachment_id = get_field( 'acf-image' );
$size = 'medium_large'; // (thumbnail, medium, medium_large, large, full or custom size)

if( $attachment_id ) {
  echo wp_rocket__wp_get_attachment_image__lazyload( $attachment_id, $size );
}

Big thanks to @glueckpress

My pleasure. 🙂

Sweet snippet. How would I go about including Alt tags to work?

Thank you for sharing this, but I am not sure what is my $attachment_id = get_field( 'acf-image' ); I tried 'image' and it didn't work. Where can I find that?

Now I am trying with this code
/** lazyload photos on homepage*/ function wp_rocket__wp_get_attachment_image__lazyload( $attachment_id, $size = 'lets_blog_thumb', $icon = false, $attr = '' ) { $attachment_id = get_field( 'image' ); $size = 'lets_blog_thumb'; // (thumbnail, medium, medium_large, large, full or custom size) } if( $attachment_id ) echo wp_rocket__wp_get_attachment_image__lazyload( $attachment_id, $size );

I would like to force lazyload here at https://wnfdiary.com/ on thumbs on mobile media. Thank you for a tip!

The functions rocket_lazyload_images, rocket_lazyload_replace_callback() and rocket_is_excluded_lazyload() seems to be deprecated since version 3.3. Could you please update the snippet @glueckpress ?

Sorry, @Jeppeskovsgaard, I don’t work for WP Rocket anymore, and I’m afraid I won’t be able to make time to look into this. I’ve updated the description with a hint, though.