One of the problems I came up against recently was how to mimic the way in which WordPress now creates srcset responsive images dynamically for all post content images and featured images using an ACF field. To achieve this here’s an example below, we’re simply grabbing the original src image attached to that custom field, then the srcset versions of that image, while doing all this we’re also grabbing the WordPress Media Library Alt text just to make the images SEO friendly.
When setting up your ACF Custom Fields make sure you set the image field to return as ID rather than array otherwise the below snippet won’t work.
Code Example
<?php
//ACF Variables
$img = get_field('Your_field_name');
$img_src = wp_get_attachment_image_src( $img, 'your_image_size' );
$img_srcset = wp_get_attachment_image_srcset( $img, 'your_image_size' );
$img_alt_text = get_post_meta( $img, '_wp_attachment_image_alt', true);
?>
<?php if( $img_src ){ ?>
<!-- ACF Image Start -->
<img class="your-class"
src="<?php echo esc_url( $img_src[0] ); ?>"
title="<?php the_title(); ?> - <?php echo $job ?>"
srcset="<?php echo esc_attr( $img_srcset ); ?>"
sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1100px) 62vw, 840px"
alt="<?php echo $img_alt_text ?>"
/>
<!-- ACF Image End -->
<?php } ?>