Selecting Image Size

I tried doing retina only with rwg_img and noticed the same image height problem. Retina images are not displaying the same height as non retina images are.

<a href="<?php echo get_permalink( $post->ID );?>">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
echo rwp_img( $thumbnail_id, array(
    'sizes' => array('et-builder-portfolio-image@2x', 'Homepage-Laptop@2x', 'Homepage-Tablet-Landscape@2x', 'Homepage-Tablet-Portrait@2x', 'Homepage-Smartphone-Large-Landscape@2x', 'Homepage-Smartphone-Small-Landscape@2x', 'Homepage-Smartphone-Large-Portrait@2x', 'Homepage-Smartphone-Small-Portrait@2x' ),
    'attributes' => array(
        'sizes' => '(min-width: 1405px) 800px, (min-width: 1100px) 708px, (min-width: 981px) 570px, (min-width: 768px) 1352px, (min-width: 667px) 1170px, (min-width: 480px) 992x, (min-width: 375px) 644px, 546px'
    )
));
?>
</a>

I don’t understand why though as i set the retina images to be cropped, so they should display the same as the regular images?

Update:

Ok, so after some more testing i’m beginning to suspect that the rwp_attributes code isn’t outputting my sizes correctly which may explain the previous issues and confusion i was trying to resolve. I am currently testing with non retina sizes only.

With rwp_img, when i inspect an image in chrome for desktop size i get 402×285 (natural 400×284). The natural size corresponds to the size i set for 1405px breakpoint which is et-builder-portfolio-image (400 x 284) which is determined by this part of my code:

'sizes' => '(min-width: 1405px) 400px,

Ok, so that works as expected.

But with the rwp_attributes code, when i inspect an image for desktop size i get 402×285 (natural 676 x 480). Now this is unexpected because the natural size corresponds to the size i set for the 768px breakpoint which is Homepage-Tablet-Portrait (676 x 480) which is determined by this part of my code:

(min-width: 768px) 676px

The srcset for this however looks correct:

<img data-srcset="http://localhost/wordpress/wp-content/uploads/2016/07/6-273x194.jpg 273w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-285x203.jpg 285w, http://localhost/wordpress/wp-content/uploads/2016/07/6-322x229.jpg 322w, http://localhost/wordpress/wp-content/uploads/2016/07/6-354x252.jpg 354w, http://localhost/wordpress/wp-content/uploads/2016/07/6-400x284.jpg 400w, http://localhost/wordpress/wp-content/uploads/2016/07/6-496x352.jpg 496w, http://localhost/wordpress/wp-content/uploads/2016/07/6-585x415.jpg 585w, http://localhost/wordpress/wp-content/uploads/2016/07/6-676x480.jpg 676w" 

sizes="(min-width: 1405px) 400px, (min-width: 1100px) 354px, (min-width: 981px) 285px, (min-width: 768px) 676px, (min-width: 667px) 585px, (min-width: 480px) 496px, (min-width: 375px) 322px, 273px" src="http://localhost/wordpress/wp-content/uploads/2016/07/6-676x480.jpg" class="lazy-loaded">

When i hover over this line that’s when i see 402×285 (natural 676×480)

src="http://localhost/wordpress/wp-content/uploads/2016/07/6-676x480.jpg" class="lazy-loaded"

Basically, what i am finding is that with rwp_img, when i do desktop, laptop, and tablet landscape views, the displayed image size matches the natural size. In other words, the size i see on the screen is the actual size of that image. It’s the image size i created for that viewpoint.

But with rwp_attributes, the displayed image size doesn’t match the natural size. It seems to be using a larger image for that viewpoint than it should be.

I have tried to demonstrate this below. The first image dimensions are what is outputted with rwp_img vs. the image dimensions outputted with rwp_attributes.

Desktop - 402x285 (natural 399x284) vs. 402x285 (natural 676x480)
Laptop - 354x252 (natural 354x251) vs. 354x252 (natural 676x480)
Tablet Landscape - 285x203 (natural 285x202) vs. 285x203 (natural 676x480)

I have updated my live test site with rwp_attributes http://www.celebrityhealthcritic.com/

Thanks Stefan, will be working on this issue today and will try as you suggested.

Please enjoy your trip and get some rest and relaxation!

Hi Stefan,

I’m having a slight issue with my images that appears to be some kind of compatibility problem with your plugin.

I’m using the a3 lazy load plugin and this works great with the rwp_attributes code i manually inserted into my theme. The images lazyload, and they have the correct media queries i entered. This is all fine.

The problem is with the images that are inserted in a post. Those inserted with the wordpress visual editor.

When RWP is activated it outputs the srcset data for that image as it’s suppose to. But when i activate the lazy load plugin, that srcset data disappears and i’m just left with the following:

<img class="size-medium wp-image-42 aligncenter lazy-loaded" src="http://localhost/wordpress/wp-content/uploads/2016/07/6-828x558.jpg" data-lazy-type="image" data-src="http://localhost/wordpress/wp-content/uploads/2016/07/6-828x558.jpg" alt="6" width="828" height="558">

The images lazy load, but they no longer have the srcset data from RWP! However, that data does still seem to be there as i see the following below the image in a noscript tag:

<noscript>
<img src="http://localhost/wordpress/wp-content/uploads/2016/07/2-150x150.jpg" srcset="http://localhost/wordpress/wp-content/uploads/2016/07/2-150x150.jpg 150w, http://localhost/wordpress/wp-content/uploads/2016/07/2-400x284.jpg 400w, http://localhost/wordpress/wp-content/uploads/2016/07/2-440x264.jpg 440w, http://localhost/wordpress/wp-content/uploads/2016/07/2-627x376.jpg 627w, http://localhost/wordpress/wp-content/uploads/2016/07/2-768x480.jpg 768w, http://localhost/wordpress/wp-content/uploads/2016/07/2-828x518.jpg 828w" sizes="(min-width: 768px) 828px, (min-width: 627px) 768px, (min-width: 440px) 627px, (min-width: 400px) 440px, (min-width: 150px) 400px, 150px" class="size-medium wp-image-38 aligncenter" alt="2" width="828" height="518">
</noscript>

I’m not sure quite what to do about this as these images are inserted by wordpress, so i’m not manually using a custom code to display those images.

Strangely enough, RWP and a3 lazy load work perfectly together with the custom code you provided, but not without that code. So i’m wondering if there’s any sort of tweak you can make to RWP to make this work natively with a3 lazy load? As it’s like RWP is not being recognised properly with whatever default code it’s outputting. But it does get recognised properly with the rwp_attributes custom code.

Update:

Ok, so after a lot of trial and error i managed to get lazy load working without a plugin as you describe on your website with Lazy Load XT jquery.

This however, resulted in replicating the exact same issue i had when i installed this plugin (https://ww.wp.xz.cn/plugins/lazy-load-xt/). Whereby the natural image size is larger than the image size specified in my media queries.

So it seems like that plugin is essentially the same as setting up Lazy Load XT jquery manually. They both produce the same result, just the plugin sets everything up automatically for you.

Interestingly, when i use the a3 lazy load plugin, i get the correct natural image size for images i inserted using the rwp_attributes code. So this works perfectly.

The trouble is, for images inserted in a post, a3 lazy load makes images lazy load, but leaves out the srcset which RWP would normally add.

So what i’m wondering, is it possible to disable RWP for images inserted in a post? Because when i disable RWP plugin, a3 lazy load uses the native wordpress srcset. Which would be ok as i always had srcset added to post images automatically, it was just my other images i needed RWP for.

I have tried unchecking “use on thumbnails and content” in RWP, and also choosing to ignore all image formats in RWP, but this still results in post images not having srcset added to them when a3 lazy load is active. It’s only when i actually disable RWP plugin, that a3 lazy load uses the native wordpress srcset. So just choosing to ignore the images in RWP doesn’t seem to work for some reason?

Hi Stefan, hope you had a nice vacation.

Yeah, if you don’t mind putting together a plugin you could send it to me using the address on the following page (http://www.celebrityhealthcritic.com/test-post-7/), thanks.

It would be interesting to see if i get different results to what i had setup manually. The images were outputting srcset with my manual installation, although they may not have been doing so correctly due to the addon you mentioned. Worth a shot i guess.

Could you just clarify something for me also please? I noticed on your demo website (http://responsifywp.com/demo/) the first image shows its dimensions as 888×592 when i inspect with chrome. But the natural size shown in chrome is 1944×1296. Your media query specifies this as (min-width: 1280px) 1944px.

I was just wondering why such a large image size (1944×1296) is being used for a smaller space (888×592). I think before you said you haven’t included retina images, so i’m just curious if there was a specific reason for this i’m overlooking, or you just left it as is because this is a demo page?