Bug/Error In "Natural Image" Output
-
Hi,
This plugin works great for me except that there appears to be an error/bug with the way the plugin outputs the srcset to the browser.
For example, I am using the following code to manually specify custom media queries for my images:
<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('et-builder-portfolio-image', 'et-builder-portfolio-image@2x', 'Homepage-Laptop', 'Homepage-Laptop@2x', 'Homepage-Tablet-Landscape', 'Homepage-Tablet-Landscape@2x', 'Homepage-Tablet-Portrait', 'Homepage-Tablet-Portrait@2x', 'Homepage-Smartphone-Large-Landscape', 'Homepage-Smartphone-Small-Landscape', 'Homepage-Smartphone-Large-Portrait', 'Homepage-Smartphone-Large-Portrait@2x', 'Homepage-Smartphone-Small-Portrait', 'Homepage-Smartphone-Small-Portrait@2x' ) )); echo '<img data-srcset="'.$attributes['srcset'].'" 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">'; ?> </a>
When i inspect the image in chrome i get the following srcset:
<img data-srcset="https://localhost/wordpress/wp-content/uploads/2016/07/6-273x194.jpg 273w, https://localhost/wordpress/wp-content/uploads/2016/07/6-285x203.jpg 285w, https://localhost/wordpress/wp-content/uploads/2016/07/6-322x229.jpg 322w, https://localhost/wordpress/wp-content/uploads/2016/07/6-354x252.jpg 354w, https://localhost/wordpress/wp-content/uploads/2016/07/6-400x284.jpg 400w, https://localhost/wordpress/wp-content/uploads/2016/07/6-496x352.jpg 496w, https://localhost/wordpress/wp-content/uploads/2016/07/6-546x388.jpg 546w, https://localhost/wordpress/wp-content/uploads/2016/07/6-570x406.jpg 570w, https://localhost/wordpress/wp-content/uploads/2016/07/6-585x415.jpg 585w, https://localhost/wordpress/wp-content/uploads/2016/07/6-644x458.jpg 644w, https://localhost/wordpress/wp-content/uploads/2016/07/6-676x480.jpg 676w, https://localhost/wordpress/wp-content/uploads/2016/07/6-708x504.jpg 708w, https://localhost/wordpress/wp-content/uploads/2016/07/6-800x568.jpg 800w" 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="https://localhost/wordpress/wp-content/uploads/2016/07/6-800x568.jpg" class="lazy-loaded">
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="https://localhost/wordpress/wp-content/uploads/2016/07/6-800x568.jpg" class="lazy-loaded">
As you can see by my media queries, i have specified an image with a width of 400px (400×284) to be displayed at a viewport of 1405+. But when i inspect the image in chrome it shows me 402×285 (the actual resolution i see on screen) and (natural 800×568).
The error is that the natural image is not the correct image i specified in my media query. It should be (natural 400×284) since that is the image size i specified for viewport 1405px+.
For some reason the plugin is selecting the wrong image size. I have tried using another lazy load plugin, and that plugin correctly reports the image as 402×285 (natural 400×284) when i inspect it in chrome. But i prefer your plugin so ideally would would like to use it instead but without this error.
Is there anything that can be done to output the srcset correctly so the correct image sizes are used for the “natural” image?
- The topic ‘Bug/Error In "Natural Image" Output’ is closed to new replies.