• Anonymous User 14978628

    (@anonymized-14978628)


    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?

    https://www.ads-software.com/plugins/lazy-load-xt/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author dbhynds

    (@dbhynds)

    Hmm… What’s the HTML for that same image when you view source? (So the actual PHP output, before the javascript works it’s magic on it.)

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    This is copied directly from the source for that particular image. The image srcset code is the same as what i posted previously because i manually pasted the code into my template file. It includes regular and retina images in the array.

    <div class="paginated_content">
    	<div class="paginated_page paginated_page_1 active"  data-columns  data-columns>
    	<article id="post-15" class="post et-format- post-15 type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized et-has-post-format-content et_post_format-et-post-format-standard">
    		<div class="header">
            <!-- Homepage-Images -->
    
    <a href="https://localhost/wordpress/test-post-6/">
    <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"/></a>
                </a>
    
    		</div>
    				<div class="post-content">
    						<h2 class="post-title entry-title"><a class="et-accent-color" style="color:#7ac8cc;" href="https://localhost/wordpress/test-post-6/">Test Post 6</a></h2>

    When i compare the srcset with LazyLoad XT to the other lazy load plugin which outputs the natural image correctly, the only difference i see is in the following line:

    lazyload xt (this seems to be outputting the wrong natural image size and not the size specified in the media queries)

    src="https://localhost/wordpress/wp-content/uploads/2016/07/6-800x568.jpg" class="lazy-loaded

    Other lazyload plugin (natural image size is the same as the one specified in the media queries)

    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="lazy-hidden

    Or srcset in full

    lazyload xt

    <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">

    Other lazyload plugin

    <img data-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" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="lazy-hidden" 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">
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Bug/Error In "Natural Image" Output’ is closed to new replies.