Thumbnails created, but only accessible via wp_get_attachment_image_srcset

[patrick-wc]

Hi,

I am using WP 4.8.1 and image-processing-queue v0.2 via plugins.

When I request an image with ipq_get_theme_image like the blog post suggests:

$post_id_test = 166;

echo ipq_get_theme_image( $post_id_test, array(
		array( 600, 600, false ),
		array( 1280, 1280, false ),
		array( 1600, 1600, false ),
	),
	array(
		'class' => 'header-banner'
	)
);

The 600, 1280 and 1600 images are created locally after you first visit the page, but then if I refresh the srcset only includes the standard WP sizes, not the new thumbs. I can only access them by executing echo wp_get_attachment_image_srcset( $post_id_test ); but clearly that's not the best solution.

It looks like it "almost" works, ipq_get_theme_image returns this HTML:

<img width="600" height="600" src="http://myurl.com/content/uploads/2017/08/20151113_082424-2106x2106.jpg" class="header-banner" alt="" srcset="http://myurl.com/content/uploads/2017/08/20151113_082424-2106x2106.jpg 2106w, http://myurl.com/content/uploads/2017/08/20151113_082424-150x150.jpg 150w" sizes="(max-width: 600px) 100vw, 600px">

So it knows it should use the 600px image, as its specified in the width, height and sizes attributes, however calling echo wp_get_attachment_image_srcset( $post_id_test ); returns this:

http://myurl.com/content/uploads/2017/08/20151113_082424-300x169.jpg 300w, http://myurl.com/content/uploads/2017/08/20151113_082424-768x432.jpg 768w, http://myurl.com/content/uploads/2017/08/20151113_082424-1024x576.jpg 1024w, http://myurl.com/content/uploads/2017/08/20151113_082424-600x338.jpg 600w, http://myurl.com/content/uploads/2017/08/20151113_082424-1280x720.jpg 1280w, http://myurl.com/content/uploads/2017/08/20151113_082424-1600x900.jpg 1600w

Could it be because I have already added some images via add_image_size? I have added a 2106 x 2106 square image, which is being picked up in ipq_get_theme_image but not with wp_get_attachment_image_srcset :-\

I haven't reproduced this on a completely clean WP install yet, but I've tried it both locally on Windows 10 and then on our host just to be sure - same issue.

($post_id_test is a brand new image I uploaded to the media library to for testing and I am running the function on page.php)

[A5hleyRich]

I'm having a hard time replicating this. Are you using any plugin or custom code that could be filtering what's included in srcset?

[patrick-wc]

@A5hleyRich I think it could be to do with ACF and the ACF image crop addon. I will have some time soon to test them out on a clean install, if I can work out what's happening I'll report back here.

[nickmak]

I have re-opened my issue. I am seeing this same thing. I am using ACF, but returning only the image url. I have removed all the other image sizes on WordPress as I only want WordPress to generate the image sizes I declare, as they're being used, when they're being used. This was my thought process to help clear up drive space.

With that, I have set all thumbnail, medium, medium_large, large image sizes to 0, so that the image uploaded is left alone. Then I call to the function in my file:

$image = get_sub_field('image');
$image_id = $image['ID'];
echo  ipq_get_theme_image(
    $image_id,
    array (
	array ( 400, 0, false ),
	array ( 600, 0, false ),
	array ( 1200, 0, false ),
    ),
    array (
	'class' =>  'img-fluid',
	'alt'   =>  $image['alt']
    )
);

My Image array looks like this:

array(18) {
  ["ID"]=>
  int(46)
  ["id"]=>
  int(46)
  ["title"]=>
  string(22) "2p1hocpi14u-hide-obara"
  ["filename"]=>
  string(26) "2p1hocpi14u-hide-obara.jpg"
  ["url"]=>
  string(70) "https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara.jpg"
  ["alt"]=>
  string(0) ""
  ["author"]=>
  string(1) "1"
  ["description"]=>
  string(0) ""
  ["caption"]=>
  string(0) ""
  ["name"]=>
  string(22) "2p1hocpi14u-hide-obara"
  ["date"]=>
  string(19) "2017-10-17 17:26:49"
  ["modified"]=>
  string(19) "2017-10-17 17:26:49"
  ["mime_type"]=>
  string(10) "image/jpeg"
  ["type"]=>
  string(5) "image"
  ["icon"]=>
  string(53) "https://base.dev/wp-includes/images/media/default.png"
  ["width"]=>
  int(5325)
  ["height"]=>
  int(3550)
  ["sizes"]=>
  array(12) {
    ["thumbnail"]=>
    string(70) "https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara.jpg"
    ["thumbnail-width"]=>
    int(128)
    ["thumbnail-height"]=>
    int(85)
    ["medium"]=>
    string(70) "https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara.jpg"
    ["medium-width"]=>
    int(5325)
    ["medium-height"]=>
    int(3550)
    ["medium_large"]=>
    string(70) "https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara.jpg"
    ["medium_large-width"]=>
    int(5325)
    ["medium_large-height"]=>
    int(3550)
    ["large"]=>
    string(70) "https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara.jpg"
    ["large-width"]=>
    int(5325)
    ["large-height"]=>
    int(3550)
  }
}

This returns correctly, but the initial image size is considered the max image size. So it does not load the right image for the right display. At all times does it load 400x267. I've looked at this on 1920x1080 desktop, on iPhone 6Plus, and iPad Air2, and each time it loads the same 400x267 sized image with no variations.

<img width="400" height="267" src="https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara-400x267.jpg" class="img-fluid" alt="" srcset="https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara-400x267.jpg 400w, https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara-600x400.jpg 600w, https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara-1200x800.jpg 1200w" sizes="(max-width: 400px) 100vw, 400px">

[tyrann0us]

I'm not sure whether my problem is related to the issue(s) @zerodburn and @nickmak are describing.

When I add a new size array to ipq_get_theme_image() and initially open the page in the browser it will output the srcset attribute correctly (it exists at least). But after reloading the page, an image tag will be output without the srcset attribute, while the src attribute loads the image of the first array:

echo ipq_get_theme_image( get_post_thumbnail_id(), array(
	array( 2000, 385, true ),
	array( 320, 250, true ),
) );

outputs <img width="2000" height="385" src="http://example.com/path/to/uploads/image_name-2000x385.jpg" class="attachment-2000x385 size-2000x385" alt=""> while

echo ipq_get_theme_image( get_post_thumbnail_id(), array(
	array( 320, 250, true ),
	array( 2000, 385, true ),
) );

outputs <img width="320" height="250" src="http://example.com/path/to/uploads/image_name-320x250.jpg" class="attachment-320x250 size-320x250" alt="">.

Am I missing something? I'm happy to provide more details and/or open a new issue if my problem is unrelated to this issue.

[tyrann0us]

@A5hleyRich, is there anything we can provide to help fix the issue(s)? Thanks!

[A5hleyRich]

Still unable to replicate this issue with the steps outlined. Have you tried this on a clean install with no other plugins installed?

[bleepsandblops]

@tyrann0us just jumping in, but isn't it because your images don't have the same ratio? So it's only returning the first one, and then skips the second one?

[tyrann0us]

@bleepsandblops, as I tried to explain it works on the first page load (at least I'm getting a srcset attribute, haven't checked if it's correct). But after a second reload, I'm only getting a src, no srcset attribute. Since my project's deadline is getting close, I had to stop using ipq_get_theme_image(). But I'm happy to help debugging when my project is done.

[nickmak]

@A5hleyRich Yes, each time I've attempted to reuse it was on a fresh install with post_thumbnail enabled, all media sizes default to WP set to 0 so that I can let ipq manage any image resizing. As I stated initially, the images are generated but my HTML output is wrong. This is what I see on a desktop computer with a 1920px resolution.

<img width="400" height="267" 
    src="https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara-400x267.jpg"
    srcset="https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara-400x267.jpg 400w,
            https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara-600x400.jpg 600w,
            https://base.dev/wp-content/uploads/2017/10/2p1hocpi14u-hide-obara-1200x800.jpg 1200w" 
     sizes="(max-width: 400px) 100vw, 400px" class="img-fluid" alt="" >

The markup:

echo  ipq_get_theme_image(
    $id,
    array (
	array ( 400, 0, false ),
	array ( 600, 0, false ),
	array ( 1200, 0, false ),
    ),
    array (
	'class' =>  'img-fluid',
	'alt'   =>  $image['alt']
    )
);

[A5hleyRich]

@nickmak sorry, but what is wrong with that HTML output?

[nickmak]

@A5hleyRich When I'm in a window size that's 1920, why should I be an image at 400px instead of the requested 1200px? Shouldn't the array be displaying from smallest to largest like CSS? That was my understanding and how the wp_get_attachment_image_srcset works.

[A5hleyRich]

@nickmak the library just outputs an image at the specified size (the first size is used). All other sizes are added to srcset, which allows the browser to decide on the most appropriate size image to download. We use wp_get_attachment_image to output the image:

https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

This might also help explain things:

https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/