// 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'); ?>