Support

Account

Register Login

Home › Forums › Front-end Issues › Image field not outputting srcset attribute with image ID

Solved

Image field not outputting srcset attribute with image ID

  • I have the following ACF image field via single.php:

    <?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package sitename
 */

get_header();
?>

<?php 
    $post_id = get_the_ID(); // Required as outside the loop
    $image = get_field('hero_image', $post_id);
    if ($image) {
        echo '<div class="hero">'.wp_get_attachment_image( $image, 'hero').'</div>';
    }
?>

<div class="has-sidebar">

    <div id="primary" class="content-area">

        <main id="main" class="site-main">

        <?php
        while ( have_posts() ) :
            the_post();

            get_template_part( 'template-parts/content', get_post_type() );

            the_post_navigation();

        endwhile; // End of the loop.
        ?>

        </main><!-- #main -->

    </div><!-- #primary -->

    <?php
        get_sidebar();
        get_footer();
    ?>

</div><!-- .has-sidebar -->

    The Return Format via the field is set to Image ID. On the front-end the srcset attribute isn’t loading. Here’s what I see instead:

    <img width="1366" height="400" src="https://sitename.local/wp-content/uploads/2020/01/contact-1366x400.jpg" class="attachment-hero size-hero" alt="Contact">

    I have a number of image sizes defined via functions.php and the image I’ve uploaded is large enough.

    What could be causing this?

  • This is a question about wp_get_attachment_image() which is not directly effected by ACF. I do know that WP will only output images for srcset if there are other image sizes that exactly match the width:height ratio of your “hero” image size.

  • Okay, thanks John.

    It’s strange, my function size for hero is as follows:

    add_image_size( 'hero', 1366, 400, true );

    I’m uploading at 2732px by 800px to account for @2x images. This works across all other image fields (which are smaller).

    I’ll do some further digging.

  • What other image sizes do you have? Are there any that match that ratio (1366×400)? Seems like that would be extremely difficult, the only other image size I can come up with would be 683×200.

    WP will not match ratios to the original upload, it will only do this if you use “full” for the image size, only to the resized image. It also uses the image size you are using as the max size, to it’s not finding any smaller images and so it’s not returning anything.

  • I don’t have any that match 1366×400, but one that does come close. Here are all my sizes:

    add_image_size( 'carousel', 1366, 500, true ); // Upload @ 2732px by 1000px for @2x
add_image_size( 'hero', 1366, 400, true ); // Upload using carousel dimensions or @ 2732px by 800px for @2x if the image is too cropped
add_image_size( 'hero-small', 768, 400, true ); // Upload using carousel dimensions or @ 1536px by 800px for @2x
add_image_size( 'large-square', 424, 368, true ); // Upload @ 848px by 736px for @2x
add_image_size( 'medium-square', 289, 256, true ); // Upload @ 578px by 512px for @2x
add_image_size( 'small-square', 215, 170, true ); // Upload @ 430px by 340px for @2x
add_image_size( 'diagram', 650 ); // Upload @ 1300px by any height for @2x
add_image_size( 'full-width', 920 ); // Upload @ 1840px by any height for @2x
add_image_size( 'full-width-cropped', 920, 337, true ); // Upload using full-width dimensions or @ 1840px by 674px for @2x if the image is too cropped
add_image_size( 'half', 436 ); // Upload @ 872px by any height for @2x
add_image_size( 'third', 275 ); // Upload @ 550px by any height for @2x
add_image_size( 'quarter', 195 ); // Upload @ 390px by any height for @2x

    I appreciate this question is out of scope, so no worries if you can’t help any further.

  • I don’t think that coming close counts. 1366 is an odd width, not really something that will work well because the only thing it is evenly divisible by is 2.

  • I think I need to rethink my images sizes. Back to the drawing board. Thank you for your help.

  • Don’t know if this helps, but generally when I’m planning images sizes none of the ones I create have heights and these are generally based on device screen resolutions, for example

    
add_image_size('size-1', 1280, 0, false);
add_image_size('size-2', 1024, 0, false);
add_image_size('size-3', 640, 0, false);

    But then this means that you can’t constrain the height of the image and some could be taller than others unless you add specific sizes to min and max so that users can only upload images that will fit exactly, for example setting the min/max sizes for the image field to that same values 1280×400 would mean that the user can only upload this exact size image.

    You can do the same thing with the min/max settings on cropped images, for example if you have a place where you always want to use a 4:3 ratio image, just set the min/max acf settings to the largest size 4:3 ratio you want to use.

  • That does help, thank you John. I tend to overthink image sizes and end up in a tailspin. I’m going to work on simplifying the process.

    Keep up the awesome support. I’ve read quite a few of your answers on here and it’s been a great help.

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Image field not outputting srcset attribute with image ID’ is closed to new replies.