Breaking News: Grepper is joining You.com. Read the official announcement!

Wordpress srcset with ACF Image & lazy Load

Tony Harris answered on May 24, 2022 Popularity 1/10 Helpfulness 1/10

answer Wordpress srcset with ACF Image & lazy Load

Wordpress srcset with ACF Image & lazy Load

Comment

// Add this to your functions file.

<?php

// Add title attribute to featured image
add_filter( 'wp_get_attachment_image_attributes', 'tl_add_img_title', 10, 2 );
function tl_add_img_title( $attr, $attachment = null){
  $attr['title'] = get_post( $attachment->ID )->post_title;
  return $attr;
}

// Add support for custom image sizes
function ccd_add_image_sizes() {
  add_image_size( 'header-large', 2048, 1152, true );
  add_image_size( 'header-medium', 1024, 576, true );
  add_image_size( 'header-small', 640, 360, true );
}
add_action( 'after_setup_theme', 'ccd_add_image_sizes' );

// Add srcset and sizing to images
function ccd_responsive_images( $image_id, $image_size, $max_width ) {
	// Check if the image ID is not blank
	if ( $image_id != '' ) {
		// Set the default src image size
		$image_src = wp_get_attachment_image_url( $image_id, $image_size );
		// Set the srcset with various image sizes
		$image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );
		// Generate the markup for the responsive image
		echo 'src="' . $image_src . '" srcset="' . $image_srcset . '" sizes="(max-width: ' . $max_width . ') 100vw, ' . $max_width . '"';
	}
}

// Change the default max width to 2048
function ccd_max_srcset_image_width() {
  return 2048;
}
add_filter( 'max_srcset_image_width', 'ccd_max_srcset_image_width', 10 , 2 );

// Returns an optimised image based on attachment id
function optimised_image($attachment_id, $size) {

  $image_src = wp_get_attachment_image_src( $attachment_id, $size );

  $image_srcset = wp_get_attachment_image_srcset( $attachment_id, $size );

  $attachment_metadata = wp_get_attachment_metadata($attachment_id);

  $width = $attachment_metadata['width'];
  $height = $attachment_metadata['height'];
  $alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', TRUE);
  $title = get_the_title($attachment_id);

  return '<img loading="lazy" src="'.esc_url( $image_src[0] ).'" srcset="'.esc_attr( $image_srcset ).'" sizes="(max-width: 640px) 640px, (max-width: 1024px) 1024px, 2048px" width="'.$width.'" height="'.$height.'" alt="'.$alt.'" title="'.$title.'"  />';
} ?>


// Make sure you ACF feild return type is "Image ID"

// Then call the image like so:

<?php

$my_image = get_field('my_image');

?>

<?php echo optimised_image($my_image, 'large'); ?>

Popularity 1/10 Helpfulness 1/10 Language php

Source: Grepper

Tags: image load php srcset wordpress

Link to this answer
Share Copy Link

Contributed on May 24 2022

Tony Harris

0 Answers Avg Quality 2/10

Wordpress srcset with ACF Image & lazy Load

Contents

More Related Answers

Wordpress srcset with ACF Image & lazy Load

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.