2

I'm using ACF to output some images. One image field fits the full width of my website (1024px), the second image field is a third of the full width (328px).

ACF doesn't currently support img srcset, so I'm using the following helper via my functions.php file:

function responsive_image($image_id,$image_size,$max_width){

    // check 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="'.esc_url($image_src).'" srcset="'.esc_attr($image_srcset).'" sizes="(max-width: '.$max_width.') 100vw, '.$max_width.'"';

    }
}

I then output the image within my theme like so:

<!-- Full width image -->
<img <?php responsive_image(get_field( 'full_img' ), 'full', '1024px'); ?> >

<!-- Third width image -->
<img <?php responsive_image(get_field( 'third_img' ), 'square', '540px'); ?> >

The third width image is set to 540px as that's the full width of my mobile view.

The full width image on the front-end outputs the following:

<img 
    src="full-1024x450.jpg"
    srcset="full-1024x450.jpg 1024w,
            full-768x338.jpg 768w" 
    sizes="(max-width: 1024px) 100vw, 1024px"
>

The third width image on the front-end outputs the following:

<img 
    src="third-540x540.jpg"
    srcset="third-540x540.jpg 540w,
            third-150x150.jpg 150w,
            third-300x300.jpg 300w,
            third-768x768.jpg 768w,
            third-1024x1024.jpg 1024w, 
            third.jpg 1080w" 
    sizes="(max-width: 540px) 100vw, 540px"
>

Here are my theme's image sizes via functions.php:

add_image_size( 'full', 1024, 450, true ); // Upload @ 2048px by 900px for HD
add_image_size( 'square', 540, 540, true ); // Upload @ 1080px by 1080px for HD
add_image_size( 'tall', 328, 677, true ); // Upload @ 656px by 1354px for HD

What I'm really strugging to understand is why my full width image is only outputting 3 image sizes. The images have been sized correctly and are present in the uploads directory. This is a problem for screens with a DPR of 2 or above.

I've tried increasing the max image via Settings > Media, but this doesn't help.

Any ideas?

5

After some further digging, I discovered that the max srcset size in WordPress 4.4 is set to 1600px wide by default. You can fix this by adding the following filter:

add_filter( 'max_srcset_image_width', 'max_srcset_image_width', 10 , 2 );
function max_srcset_image_width() {
    return 2048;
}

The helper function and this information is thanks to: http://aaronrutley.com/responsive-images-in-wordpress-with-acf

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.