Support

Account

Home Forums Front-end Issues Cannot get srcset to output anything

Solved

Cannot get srcset to output anything

  • Hi, I have been struggling with this one all day, and can’t for the life of me figure out why srcset is returning empty. I tried several solutions. They all return an empty srcset=”” with the sizes tag intact.

    I have custom sizes registered, which all output fine.
    I tried both:

    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 . '"';
    	}
    }
    /*
     * Optional: change the WordPress default maximum width of 1600px.
     */
    function ccd_max_srcset_image_width() {
      return 1300;
    }
    add_filter( 'max_srcset_image_width', 'ccd_max_srcset_image_width', 10 , 2 );

    and

    function awesome_acf_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="'.$image_src.'" srcset="'.$image_srcset.'" sizes="(max-width: '.$max_width.') 100vw, '.$max_width.'"';
    
    	}
    }

    in functions.php

    and

    <img class="img-class" <?php ccd_responsive_images( get_field( 'v_home_section_3_image' ), 'project-full', '1300px' ); ?> />

    <img class="my_class" <?php awesome_acf_responsive_image(get_field( 'v_home_section_1_image' ),'project-full','1300px'); ?> alt="text" />

    for either of those functions in my template.

    What could be the problem here?

  • the only thing I can think of is that the image ratios to not match. WP will only create an srcset for images that are all the same ratio.

  • I went through all the sizes and made sure they were exactly 3:2 to the pixel.
    I was adding new images after changing these, but still had to run regenerate thumbnails to get this to work. The srcset now appears, but the code output is:

    <img width="1320" height="880" src="https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048.jpg" class="attachment-project-full size-project-full" alt="test alt" srcset="https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048.jpg 1320w, https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048-732x488.jpg 732w, https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048-768x512.jpg 768w, https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048-540x360.jpg 540w, https://project.test/wp-content/uploads/2019/03/istockphoto-452178671-2048x2048-1500x1000.jpg 1500w" sizes="(max-width: 1320px) 100vw, 1320px" />

    Should the sizes attr not output all of the available sizes, or should this be specified like an array?

    Currently the same full size image is being served everywhere.

  • I’m not sure, this is the way I’ve been doing responsive images lately as an example:

    
    $image_tag = '<img src="'.$image[0].'" width="'.$image[1].
                 '" height="'.$image[2].'" alt="'.$image_alt.
                 '" class="size-'.$image_size.' wp-image-'.$image_id.'" />';
    $image_tag = wp_make_content_images_responsive($image_tag);
    

    The image tag is formatted the same way as images added into content and I just let WP work out all the details.

  • Could you provide an example using get_field?
    I couldn’t figure out how this is meant to work..

  • So, when I use the above I get just the ID of the image field in question.

    
    $image_size = 'the image size you want to use';
    $image_id = get_field('your image field name', false, false);
    $image = wp_get_attachment_image_src($image_id, $image_size);
    if ($image) {
      $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
      if (!$image_alt) {
        $image_alt = get_the_title($post_id);
      }
      $image_tag = '<img src="'.$image[0].'" width="'.$image[1].
                   '" height="'.$image[2].'" alt="'.$image_alt.
                   '" class="size-'.$image_size.' wp-image-'.$image_id.'" />';
      $image_tag = wp_make_content_images_responsive($image_tag);
      echo $image_tag;
    }
    
  • Hm, I’ve tried this. Re-uploaded my images but still only 1 size is being output in the sizes attribute

    Isn’t $image_size = ‘project-full’; effectively saying to use only that image size?

    Seems to be the same thing happening with this function:

    function awesome_acf_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="'.$image_src.'" srcset="'.$image_srcset.'" sizes="(max-width: '.$max_width.') 100vw, '.$max_width.'"';
    
    	}
    }
  • I was following the MDN example, which explicitly set the sizes, but it seems 100vw is sufficient.

    According to this SO post:
    https://stackoverflow.com/questions/28650327/responsive-images-srcset-not-working

    it seems like browser cache hides the results. Testing FF Developer in Incognito showed the correct images loading in Network tab.

    Thanks for your help, and hope this info is useful for others. It may be worth adding to the docs!

  • Yes, the code does the same thing, but I am just letting WP work it out, because it’s already done and reduces how much code I need to write. Instead of using 2 functions I’m using one and not needing to do deal with the separate parts. If I was doing this so that the client could have different image proportions based on screen size then I would do this, but since I just want them all to be specific 3:2, I don’t need to.

    The image tag that you are getting looks like what I’m getting and it is working. To test, load the page at a specific size, in firefox I right click and “view image”. At each size screen I see a different sized image. Also, not that the image will not be reloaded if you change the size of the screen. You need to change the size of the screen and then reload the page. Browsers will only request the image that matches the current screen size.

    It seems to be working for me.

  • 😛 You got there while I was typing

  • One last note is that I found it very useful to disable the http cache in FF Developer.
    Now I can quickly test different viewports without worrying about whether the image is cached or not 🙂

    Thanks for the explanation. That makes sense!

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

You must be logged in to reply to this topic.