Selecting Image Size

Resolved Anonymous User 14978628
(@anonymized-14978628)

9 years, 11 months ago
Hi Stefan,

I’m having some confusion regarding the selected image sizes which i’m hoping you can clarify for me please.

My understanding is that by having different image sizes in the srcset, the browser will automatically choose the best size for the display device. So smaller image sizes for smaller screens, and larger sizes for larger screens.

I have tried to apply this logic to my homepage images by adding sizes for phone, tablet and pc screens based on how the image sizes change responsively for each device (including landscape/portrait orientations). I used the chrome extension “window resizer beta” to determine what these image sizes are.

This gives me the following sizes which i added to my functions.php
```
add_image_size( 'Homepage-iPad-Portrait', 676, 480 );
add_image_size( 'Homepage-iPad-Portrait@2x', 1352, 960 );
add_image_size( 'Homepage-iPad-Landscape', 285, 203 );
add_image_size( 'Homepage-iPad-Landscape@2x', 570, 406 );
add_image_size( 'Homepage-iPhone6-Portrait', 322, 229 );
add_image_size( 'Homepage-iPhone6-Portrait@2x', 644, 458 );
add_image_size( 'Homepage-iPhone6-Landscape', 585, 415 );
add_image_size( 'Homepage-iPhone6-Landscape@2x', 1170, 830 );
add_image_size( 'Homepage-iPhone5-Portrait', 273, 194 );
add_image_size( 'Homepage-iPhone5-Portrait@2x', 546, 388 );
add_image_size( 'Homepage-iPhone5-Landscape', 496, 352 );
add_image_size( 'Homepage-iPhone5-Landscape@2x', 992, 704 );
add_image_size( 'et-builder-portfolio-image@2x', 800, 568 );
```
And the code i used for the homepage images was the one you gave before but now including these sizes:
```
<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-iPad-Portrait', 'Homepage-iPad-Portrait@2x', 'Homepage-iPad-Landscape', 'Homepage-iPad-Landscape@2x', 'Homepage-iPhone6-Portrait', 'Homepage-iPhone6-Portrait@2x', 'Homepage-iPhone6-Landscape', 'Homepage-iPhone6-Landscape@2x', 'Homepage-iPhone5-Portrait', 'Homepage-iPhone5-Portrait@2x', 'Homepage-iPhone5-Landscape', 'Homepage-iPhone5-Landscape@2x' ),
            ) );
            ?>
            </a>
```
The problem i’m having is that when i run Google PageSpeed Insights, it tells me my images need to be optimized. Specifically the larger sized images and retina images.

I’m confused as to why this is happening as i thought the whole point of having srcset was to be able to display different sized images to different sized screens. So i thought by doing what i’ve done my images would be optimized, but for some reason Google is saying they are not? I have the retina option enabled in Responsify Wp.

Am i missing something obvious here?

https://ww.wp.xz.cn/plugins/responsify-wp/

Viewing 15 replies - 31 through 45 (of 76 total)

← 1 2 3 4 5 6 →

Plugin Author

stefanledin

(@stefanledin)

9 years, 10 months ago

Missing comma after the attributes array.

But id and alt should be included into that array.

<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" data-fixed-height="<?php echo esc_attr( et_get_option( 'fixed_nav_logo_height', '51' ) ); ?>">
<?php
echo rwp_img( 153, array(
    'sizes' => array('Logo-Large', 'Logo-Large@2x', 'Logo-Smartphone-Landscape', 'Logo-Smartphone-Landscape@2x', 'Logo-Smartphone-Large-Portrait', 'Logo-Smartphone-Large-Portrait@2x', 'Logo-Smartphone-Small-Portrait', 'Logo-Smartphone-Small-Portrait@2x' ),
    'attributes' => array(
        'sizes' => '(min-width: 768px) 566px, (min-width: 480px) 400px, (min-width: 375px) 275px, 225px'
        'id' => 'logo',
        'alt' => esc_attr( get_bloginfo( 'name' ) )
    ),
) );
?>
</a>

Thread Starter

Anonymous User 14978628

(@anonymized-14978628)

9 years, 10 months ago

I did try before to include the id and alt in the attributes array but it didn’t work.

The code you posted also gives me error on the same line:

'id' => 'logo',

Parse error: syntax error, unexpected ”id” (T_CONSTANT_ENCAPSED_STRING), expecting ‘)’

Using this code:

<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" data-fixed-height="<?php echo esc_attr( et_get_option( 'fixed_nav_logo_height', '51' ) ); ?>">
<?php
echo rwp_img( 153, array(
    'sizes' => array('Logo-Large', 'Logo-Large@2x', 'Logo-Smartphone-Landscape', 'Logo-Smartphone-Landscape@2x', 'Logo-Smartphone-Large-Portrait', 'Logo-Smartphone-Large-Portrait@2x', 'Logo-Smartphone-Small-Portrait', 'Logo-Smartphone-Small-Portrait@2x' ),
    'attributes' => array(
        'sizes' => '(min-width: 768px) 566px, (min-width: 480px) 400px, (min-width: 375px) 275px, 225px'
        'id' => 'logo',
        'alt' => esc_attr( get_bloginfo( 'name' ) )
    ),
) );
?>
</a>

Thread Starter

Anonymous User 14978628

(@anonymized-14978628)

9 years, 10 months ago

Fixed it! Just needed a , at end of sizes 🙂

'sizes' => '(min-width: 768px) 566px, (min-width: 480px) 400px, (min-width: 375px) 275px, 225px',

Plugin Author

stefanledin

(@stefanledin)

9 years, 10 months ago

Haha, I didn’t see that either 😉

Thread Starter

Anonymous User 14978628

(@anonymized-14978628)

9 years, 10 months ago

I’m (slowly) learning!

Thread Starter

Anonymous User 14978628

(@anonymized-14978628)

9 years, 10 months ago

Hi Stefan, I am trying to get a lazy loading plugin working with my images. The images lazy load except the ones that i used with a custom code for RWP. The author provides the following guidelines for making images lazyload if they don’t already:

For example, if a theme has:

echo wp_get_attachment_image($id);

Changing it to the following would lazy load the image:

echo get_lazyloadxt_html( wp_get_attachment_image($id) );

Would it be possible to somehow add this in with the code i’m using?

<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(my image sizes ),
    'attributes' => array(
        'sizes' => 'my image sizes'
    )
));
?>
</a>

Plugin Author

stefanledin

(@stefanledin)

9 years, 10 months ago

I guess it would work if you replace rwp_img() with <a href="https://github.com/stefanledin/responsify-wp#functions-attributes">rwp_attributes</a>() instead.
Then you could replace the srcset attribute with data-srcset.
Haven’t tried it, but something like this might work:

<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 image sizes ),
    'attributes' => array(
        'sizes' => 'my image sizes'
    )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="'.$attributes['sizes'].'">';
?>
</a>

Thread Starter

Anonymous User 14978628

(@anonymized-14978628)

9 years, 10 months ago

Wow, that worked! Those images now lazyload. Thanks!

I looked at the srcset data in chrome and it’s different from what i was expecting, so i just wanted to confirm the custom sizes i entered are being outputted correctly?

The following code based on your modification is what i’m using:

<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('Desktop-Related-Posts', 'Desktop-Related-Posts@2x', 'Laptop-Related-Posts', 'Laptop-Related-Posts@2x', 'Tablet-Landscape-Related-Posts', 'Tablet-Landscape-Related-Posts@2x', 'Tablet-Portrait-Related-Posts', 'Tablet-Portrait-Related-Posts@2x', 'Smartphone-Large-Landscape-Related-Posts', 'Smartphone-Large-Landscape-Related-Posts@2x', 'Smartphone-Small-Landscape-Related-Posts', 'Smartphone-Small-Landscape-Related-Posts@2x', 'Smartphone-Large-Portrait-Related-Posts', 'Smartphone-Large-Portrait-Related-Posts@2x', 'Smartphone-Small-Portrait-Related-Posts', 'Smartphone-Small-Portrait-Related-Posts@2x' ),
    'attributes' => array(
        'sizes' => '(min-width: 1405px) 212px, (min-width: 1100px) 185px, (min-width: 981px) 202px, (min-width: 768px) 308px, (min-width: 667px) 263px, (min-width: 480px) 218px, (min-width: 375px) 282px, 233px'
    )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="'.$attributes['sizes'].'">';
?>
</a>

This outputs the following srcset when i inspect an image in chrome:

<img data-srcset="http://localhost/wordpress/wp-content/uploads/2016/07/3-185x125.jpg 185w, http://localhost/wordpress/wp-content/uploads/2016/07/3-202x136.jpg 202w, http://localhost/wordpress/wp-content/uploads/2016/07/3-212x143.jpg 212w, http://localhost/wordpress/wp-content/uploads/2016/07/3-218x147.jpg 218w, http://localhost/wordpress/wp-content/uploads/2016/07/3-233x157.jpg 233w, http://localhost/wordpress/wp-content/uploads/2016/07/3-263x177.jpg 263w, http://localhost/wordpress/wp-content/uploads/2016/07/3-282x190.jpg 282w, http://localhost/wordpress/wp-content/uploads/2016/07/3-308x208.jpg 308w, http://localhost/wordpress/wp-content/uploads/2016/07/3-370x250.jpg 370w, http://localhost/wordpress/wp-content/uploads/2016/07/3-404x272.jpg 404w, http://localhost/wordpress/wp-content/uploads/2016/07/3-424x286.jpg 424w, http://localhost/wordpress/wp-content/uploads/2016/07/3-436x294.jpg 436w, http://localhost/wordpress/wp-content/uploads/2016/07/3-466x314.jpg 466w, http://localhost/wordpress/wp-content/uploads/2016/07/3-526x354.jpg 526w, http://localhost/wordpress/wp-content/uploads/2016/07/3-564x380.jpg 564w, http://localhost/wordpress/wp-content/uploads/2016/07/3-616x416.jpg 616w" sizes="(min-width: 564px) 616px, (min-width: 526px) 564px, (min-width: 466px) 526px, (min-width: 436px) 466px, (min-width: 424px) 436px, (min-width: 404px) 424px, (min-width: 370px) 404px, (min-width: 308px) 370px, (min-width: 282px) 308px, (min-width: 263px) 282px, (min-width: 233px) 263px, (min-width: 218px) 233px, (min-width: 212px) 218px, (min-width: 202px) 212px, (min-width: 185px) 202px, 185px" src="http://localhost/wordpress/wp-content/uploads/2016/07/3-466x314.jpg" class="lazy-loaded">

This is the part that i’m unsure of:

sizes="(min-width: 564px) 616px, (min-width: 526px) 564px, (min-width: 466px) 526px, (min-width: 436px) 466px, (min-width: 424px) 436px, (min-width: 404px) 424px, (min-width: 370px) 404px, (min-width: 308px) 370px, (min-width: 282px) 308px, (min-width: 263px) 282px, (min-width: 233px) 263px, (min-width: 218px) 233px, (min-width: 212px) 218px, (min-width: 202px) 212px, (min-width: 185px) 202px, 185px" src="http://localhost/wordpress/wp-content/uploads/2016/07/3-466x314.jpg" class="lazy-loaded">

When i had the previous code in place where lazy load didn’t work, my srcset was:

sizes="(min-width: 1405px) 212px, (min-width: 1100px) 185px, (min-width: 981px) 202px, (min-width: 768px) 308px, (min-width: 667px) 263px, (min-width: 480px) 218px, (min-width: 375px) 282px, 233px">

or in full

<img srcset="http://localhost/wordpress/wp-content/uploads/2016/07/4-185x125.jpg 185w, http://localhost/wordpress/wp-content/uploads/2016/07/4-202x136.jpg 202w, http://localhost/wordpress/wp-content/uploads/2016/07/4-212x143.jpg 212w, http://localhost/wordpress/wp-content/uploads/2016/07/4-218x147.jpg 218w, http://localhost/wordpress/wp-content/uploads/2016/07/4-233x157.jpg 233w, http://localhost/wordpress/wp-content/uploads/2016/07/4-263x177.jpg 263w, http://localhost/wordpress/wp-content/uploads/2016/07/4-282x190.jpg 282w, http://localhost/wordpress/wp-content/uploads/2016/07/4-308x208.jpg 308w, http://localhost/wordpress/wp-content/uploads/2016/07/4-370x250.jpg 370w, http://localhost/wordpress/wp-content/uploads/2016/07/4-404x272.jpg 404w, http://localhost/wordpress/wp-content/uploads/2016/07/4-424x286.jpg 424w, http://localhost/wordpress/wp-content/uploads/2016/07/4-436x294.jpg 436w, http://localhost/wordpress/wp-content/uploads/2016/07/4-466x314.jpg 466w, http://localhost/wordpress/wp-content/uploads/2016/07/4-526x354.jpg 526w, http://localhost/wordpress/wp-content/uploads/2016/07/4-564x380.jpg 564w, http://localhost/wordpress/wp-content/uploads/2016/07/4-616x416.jpg 616w" sizes="(min-width: 1405px) 212px, (min-width: 1100px) 185px, (min-width: 981px) 202px, (min-width: 768px) 308px, (min-width: 667px) 263px, (min-width: 480px) 218px, (min-width: 375px) 282px, 233px">

With the newly modified code the min-width sizes look different from what i was expecting them to be based on the old code output. Does the new srcset look correct to you based on its previous output with the old code?

Plugin Author

stefanledin

(@stefanledin)

9 years, 10 months ago

Omg I’m so stupid…! Remove the attributes array from the rwp_attributes function and just insert your media queries into the sizes attribute on the <img> element.

Thread Starter

Anonymous User 14978628

(@anonymized-14978628)

9 years, 10 months ago

Do you mean like this:

<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('Desktop-Related-Posts', 'Desktop-Related-Posts@2x', etc...' ),
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="'.$attributes['sizes'].'">';
?>
</a>

this gives me the following srcset:

sizes="(min-width: 564px) 616px, (min-width: 526px) 564px, (min-width: 466px) 526px, (min-width: 436px) 466px, (min-width: 424px) 436px, (min-width: 404px) 424px, (min-width: 370px) 404px, (min-width: 308px) 370px, (min-width: 282px) 308px, (min-width: 263px) 282px, (min-width: 233px) 263px, (min-width: 218px) 233px, (min-width: 212px) 218px, (min-width: 202px) 212px, (min-width: 185px) 202px, 185px" src="http://localhost/wordpress/wp-content/uploads/2016/07/5-616x416.jpg" class="lazy-loaded">

That still leaves me with same issue as before. The sizes i set with old code were:

(min-width: 1405px) 212px, (min-width: 1100px) 185px, (min-width: 981px) 202px, (min-width: 768px) 308px, (min-width: 667px) 263px, (min-width: 480px) 218px, (min-width: 375px) 282px, 233px

Trying this also produces same result

<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('Desktop-Related-Posts', 'Desktop-Related-Posts@2x', 'Laptop-Related-Posts', 'Laptop-Related-Posts@2x', 'Tablet-Landscape-Related-Posts', 'Tablet-Landscape-Related-Posts@2x', 'Tablet-Portrait-Related-Posts', 'Tablet-Portrait-Related-Posts@2x', 'Smartphone-Large-Landscape-Related-Posts', 'Smartphone-Large-Landscape-Related-Posts@2x', 'Smartphone-Small-Landscape-Related-Posts', 'Smartphone-Small-Landscape-Related-Posts@2x', 'Smartphone-Large-Portrait-Related-Posts', 'Smartphone-Large-Portrait-Related-Posts@2x', 'Smartphone-Small-Portrait-Related-Posts', 'Smartphone-Small-Portrait-Related-Posts@2x' ,

        'sizes' => '(min-width: 1405px) 212px, (min-width: 1100px) 185px, (min-width: 981px) 202px, (min-width: 768px) 308px, (min-width: 667px) 263px, (min-width: 480px) 218px, (min-width: 375px) 282px, 233px'
    )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="'.$attributes['sizes'].'">';
?>
</a>

Plugin Author

stefanledin

(@stefanledin)

9 years, 10 months ago

I mean:

<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('Desktop-Related-Posts', 'Desktop-Related-Posts@2x', 'Laptop-Related-Posts', 'Laptop-Related-Posts@2x', 'Tablet-Landscape-Related-Posts', 'Tablet-Landscape-Related-Posts@2x', 'Tablet-Portrait-Related-Posts', 'Tablet-Portrait-Related-Posts@2x', 'Smartphone-Large-Landscape-Related-Posts', 'Smartphone-Large-Landscape-Related-Posts@2x', 'Smartphone-Small-Landscape-Related-Posts', 'Smartphone-Small-Landscape-Related-Posts@2x', 'Smartphone-Large-Portrait-Related-Posts', 'Smartphone-Large-Portrait-Related-Posts@2x', 'Smartphone-Small-Portrait-Related-Posts', 'Smartphone-Small-Portrait-Related-Posts@2x' )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="(min-width: 1405px) 212px, (min-width: 1100px) 185px, (min-width: 981px) 202px, (min-width: 768px) 308px, (min-width: 667px) 263px, (min-width: 480px) 218px, (min-width: 375px) 282px, 233px">';
?>
</a>

Thread Starter

Anonymous User 14978628

(@anonymized-14978628)

9 years, 10 months ago

Ah, i was fiddling around with the wrong bit! Thanks Stefan you truly do have amazing talent, much appreciated!

Thread Starter

Anonymous User 14978628

(@anonymized-14978628)

9 years, 10 months ago

I just used your modified code on the homepage and noticed some strange behavior.

When i use the following code with retina images my homepage images are displayed at different heights, which was a problem i was having before that suggested my selected image sizes were not being used.

This code gives me lazyload but images with different heights for desktop (1405px), laptop (min-width: 1100px) and tablet landscape (min-width: 981px)

<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-Large-Landscape@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>

The strange part, is that when i keep the exact same code but this time remove references to the retina images, my homepage images display normally with all at the same height:

<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', 'Homepage-Laptop', 'Homepage-Tablet-Landscape', 'Homepage-Tablet-Portrait', 'Homepage-Smartphone-Large-Landscape', 'Homepage-Smartphone-Small-Portrait' )
));
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>

The only change i have made here is to remove the @2x images from ‘sizes’ => array(… ). When those @2x images are present, the homepage images display at different heights for some reason? Have i done something wrong with how i inserted the @2x images?

Just for reference, the previous code i was using (which lazyload didn’t work with) had retina images and they all displayed correctly at the same height:

<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', '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-Large-Landscape@2x', 'Homepage-Smartphone-Small-Portrait', 'Homepage-Smartphone-Small-Portrait@2x' ),
    'attributes' => array(
        '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>

Plugin Author

stefanledin

(@stefanledin)

9 years, 10 months ago

Is the srcset attribute exactly the same with rwp_img() and rwp_attributes()?

Thread Starter

Anonymous User 14978628

(@anonymized-14978628)

9 years, 10 months ago

Yes, they do appear to be the same.

RWP IMAGE SRCSET

<img src="http://localhost/wordpress/wp-content/uploads/2016/07/6-273x194.jpg" 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-354x252.jpg 354w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-400x284.jpg 400w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-546x388.jpg 546w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-570x406.jpg 570w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-585x415.jpg 585w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-676x480.jpg 676w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-708x504.jpg 708w,
http://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">

RWP ATTRIBUTES SRCSET

<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-354x252.jpg 354w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-400x284.jpg 400w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-546x388.jpg 546w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-570x406.jpg 570w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-585x415.jpg 585w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-676x480.jpg 676w,
http://localhost/wordpress/wp-content/uploads/2016/07/6-708x504.jpg 708w,
http://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="http://localhost/wordpress/wp-content/uploads/2016/07/6-800x568.jpg" class="lazy-loaded">

RWP Image Code (no lazyload, images same height)

<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', '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-Large-Landscape@2x', 'Homepage-Smartphone-Small-Portrait', 'Homepage-Smartphone-Small-Portrait@2x' ),
    'attributes' => array(
        '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>

RWP Attributes Code (lazyload working, images different height)

<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-Large-Landscape@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>

Viewing 15 replies - 31 through 45 (of 76 total)

← 1 2 3 4 5 6 →

The topic ‘Selecting Image Size’ is closed to new replies.