Selecting Image Size

Thanks for sending the addon. Unfortunately i can’t actually download it right now as my email service is down! Will let you know how i get on as soon as i can try it out.

The same happens with the Lazy Load XT plugin, but not with A3 Lazy Load. That’s strange since A3 is based on exactly the same scripts. I’ve tried to find what A3 does differently without success so far.

Yeah, a3 lazy load works perfectly with the custom RWP code. It’s just post images that are a problem. Lazy Load XT works for all images, but it has the retina images problem as you saw. So each plugin kinda half works, half doesn’t. Would be good to combine them into one fully working plugin!

Yeah, i thought it would be worth a go to email the plugin developer. But this seems to be an inherent problem within Lazy Load XT (i realised this when i duplicated the same problem manually installing Lazy Load XT without the plugin). I doubt the developer will look into this further, as it’s rare to find someone as helpful as yourself.

However, not all is lost! I’ve found that i can use a3 lazy load to give perfect functionality with the custom codes i use with RWP. For the post images, i’ve found my theme has an option to insert images with lazy load automatically, and these images keep the srcset outputted by RWP. It’s not perfect, but the visible and actual image sizes are very close, unlike Lazy Load XT which were massively different.

An alternative i had looked into was the following plugin:

https://ww.wp.xz.cn/plugins/adaptive-images/

This is actually a really good idea where it serves resized images instead of relying on srcset, but it doesn’t offer the level of control that i get with RWP. Still an interesting plugin though.

Hi Stefan, sorry about that. I hadn’t updated my mx records yet! ooops 🙂

Just a quick question.

When trying out different lazyload plugins i notice that with some of them my images don’t appear using the rwp_attributes code. It results in a 1×1 square pixel where the image should be, although when i inspect the placeholder square my srcset is correctly filled with my media queries:

<a href="<?php echo get_permalink( $post->ID );?>">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$attributes = rwp_attributes( $thumbnail_id, array(
    'element' => 'img',
    'sizes' => array('my sizes' )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="my sizes">';
?>
</a>

The images do appear with the rwo_img code but of course don’t lazyload:

<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
echo rwp_img( $thumbnail_id, array(
    'sizes' => array('my sizes' ),
    'attributes' => array(
        'sizes' => 'my sizes'
    )
));
?>

I tried the code for replacing srcset with datasrcset but that also resulted in blank images:

<a href="<?php echo get_permalink( $post->ID );?>">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$img = rwp_img( $thumbnail_id, array(
    'sizes' => array('my sizes' ),
    'attributes' => array(
        'sizes' => 'my sizes'
    )
));
echo str_replace('srcset', 'data-srcset', $img);
?>
</a>

I was testing with plugins

BJ Lazy Load
https://en-gb.ww.wp.xz.cn/plugins/bj-lazy-load/

and

Lazy Load
https://ww.wp.xz.cn/plugins/lazy-load/

Is there another code i could use to make images show with these plugins?

No, we have gone through all the different ways to manipulate the output from RWP. As long as the output is correct, it’s not an RWP issue.

Yeah i thought so, but worth checking just incase.

With the lazy load plugin you sent me i tried it without retina images, but it seems to select the wrong image i think? When i view the srcset it see:

<img data-srcset="http://localhost/wordpress/wp-content/uploads/2016/08/6-402x251.jpg 402w, http://localhost/wordpress/wp-content/uploads/2016/08/6-691x466.jpg 691w" sizes="(min-width: 981px) 402px, (min-width: 480px) 691px, 402px" src="http://localhost/wordpress/wp-content/uploads/2016/08/6-691x466.jpg" class="lazy-loaded">

using the following code:

<a href="<?php echo get_permalink( $post->ID );?>">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$attributes = rwp_attributes( $thumbnail_id, array(
    'element' => 'img',
    'sizes' => array('Homepage', 'Homepage2' )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="(min-width: 981px) 402px, (min-width: 480px) 691px, 402px">';
?>
    </a>

I’m i a bit confused because when i inspect the image (fullscreen as a desktop) and hover over the src=url (src=”http://localhost/wordpress/wp-content/uploads/2016/08/6-691×466.jpg”) i see 402×271 (natural: 691×466). It seems to be selecting the 691px image which, if i have set my media query correct, should only be displayed at a minimum viewport of 480px. As the desktop is over my (min-width: 981px) query, should the natural image not be my 402×251 image? Am i misunderstanding something here?

If i turn off lazy load with rwp_attributes i get a blank image, so i have to use rwp_img which does select image i expect. Also a3 lazy load selects expected image, except when i hover over src it shows the placeholder image.

Just a thought. Would RWP be compatible with Cloudflare Mirage? If you are familiar with that?

https://www.cloudflare.com/mirage/