Hi armando_e,
You’ve got the sizes attribute in your example, but you also need to add a srcset attribute in order to take advantage of the responsive images.
A full example using the template tags would look something like this:
<img src="myimg.png" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( $attachment_id, 'medium' ) ); ?>" sizes="<?php echo esc_attr( wp_get_attachment_image_sizes( 'medium' ) ); ?>" >
This assumes you are replacing $attachment_id with the ID of the original image. It also my be simpler to use the following:
<?php wp_get_attachment_image( $attachment_id, 'medium' ); ?>
Which would create the image markup for you, including the srcset and sizes attributes.
Joe
I adjusted my code as follows:
<?php wp_get_attachment_image( $attachment_id, ‘large’ ); ?>
In safari, no matter what size I make my window the large version is always served no matter what. This holds true for iOS. Its a photo portflio page so the diffrence in page load is huge.
Firefox:
<img src=”http://xxx/2015/04/IMG-1434-1400×1050.jpg” class=”attachment-large” alt=”IMG-1434″ srcset=”http://xxx/2015/04/IMG-1434-645×484.jpg 645w, http://xxx/2015/04/IMG-1434-975×731.jpg 975w, http://xxx/2015/04/IMG-1434-1400×1050.jpg 1400w” sizes=”(max-width: 1400px) 100vw, 1400px” height=”1050″ width=”1400″>
This is serving the correct size if I inspect my image and open it in a new window. I get 645px, the size I set for ‘small’.
With Safari:
<img width=”1200″ height=”800″ src=”http://xxx/2015/04/MG-7367.jpg” class=”attachment-large” alt=”MG-7367″>
Inspecting this image in a new tab yilds the ‘large’ version I set.
Thank all of you for the work on this plugin and for the continued support on this forum.
Hi armando_e,
Your markup from the first example looks valid to me. One thing that may be happening here is that browsers will always use a cached version of an image if it’s large enough, instead of downloading a new, smaller image. Could you try disabling browser cache in your dev tools and reloading the page at a small browser width to confirm that the wrong image is being selected?
Thanks,
Joe
Sorry for the delay. I have cleared the cache every time, safari still serves the largest available image.
Thank you!
Do you have a live example that I can look at?
