Understanding srcset with ACF

• mrtoad

• August 14, 2021 at 7:37 pm

I have been trying to understand and apply code to output responsive images with ACF

Initially I was using the image array option so I could easily get the image, title and alt attributes.

I am now trying to add a custom image size and implement srcset. According to the documentation, I have to switch to an image ID which I have done.

I have registered a custom image size in my function.php file in WordPress like so:

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' ); // The important part
    }

if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'home-page-portrait size', 750, 1000, false );
}
/* Display Custom Image Sizes */
add_filter('image_size_names_choose','wpshout_custom_sizes');
function wpshout_custom_sizes($sizes){
    return array_merge($sizes, array(
        'home-page-portrait' => __('Home Portrait standard'),
));
}

I can see when I add a new image to the image library that WP is generating this extra image size, however when I try and output this size in Advanced Custom Fields, it always returns the intrinsic size.

<?php 
    $top_image = get_field('top_animated_image_1'); 
?>  
                                                                            
            <div class="upper-image">
                <?php $top_animated_image_1 = get_field( 'top_animated_image_1' ); ?>
                <?php $size = 'home-page-portrait'; ?>
                <?php if ( $top_animated_image_1 ) : ?>
                <?php echo wp_get_attachment_image( $top_animated_image_1, $size ); ?>
                <?php endif; ?>
            </div>  

Just for arguments sake, I tried using this custom image size in the original code (below) I had for an image array which returns a broken link. If I switch it back to a default size like ‘large’ it works so there is obviously something wrong with my custom size, but I can’t work out what.

<?php 
        $lower_image = get_field('lower_animated_image_2'); 
?>  
                                    
        <div class="lower-image">
                <img src="<?php echo $lower_image['sizes']['large']; ?>" title="<?php echo esc_attr($lower_image['title']); ?>" alt="<?php echo esc_attr($lower_image['alt']); ?>" />   
        </div>  

What I am then trying to understand is how to utilise srcset with the ACF image ID. Looking at other documentation, I think I could have a go at it if the code was using <img src =”……. but when switching to ID, it changes to echo wp_get_attachment_image and I can’t find any documentation on the correct syntax.

For this exact same reason, I now don’t know how to fetch the title and alt tags either.

I ideally I would use srcset with an image array but I can’t find any documentation on how.

My question really is:

1 – why is my custom image size not working
2 – What is the best way to implement srcset AND title and alt tags with images in ACF

I’m just trying to find a way to tell ACF that on certain screen sizes use ‘this’ custom image size and on smaller use ‘this’ custom image size etc without sacrificing my ability to get the title and alt attributes

There is no example code in ACF, just a statement that says the Image ID generates srcset.

• mrtoad

• August 15, 2021 at 10:07 am

After understand Srcset a bit more I see I don’t really need to do anything – the srcset attributes are generated automatically.

However I still can’t understand why my custom image size is not working

• mrtoad

• August 15, 2021 at 4:52 pm

I got this working in the end by changing my functions php to:

// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );

// Add featured image sizes
add_image_size( 'home_portrait', 1000, 1000, false ); // width, height, crop

// Register the three useful image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
function wpshout_custom_sizes( $sizes ) {
	return array_merge( $sizes, array(
		'home_portrait' => __( 'Home Portrait' ),

	) );

Though I am still unsure why the initial code did not work

• trebor

• September 1, 2021 at 3:22 am

I think it may have been the space in the image size name.

`add_image_size( ‘home-page-portrait size’, 750, 1000, false );’

I don’t think image size names can have spaces as they are slugs. This would work:

‘add_image_size( ‘home-page-portrait’, 750, 1000, false );’