Retina srcset not created

[benediktdertinger]

Hello everyone,

I got the following setup:

• Wordpress 4.9.1
• Advanced Custom Fields PRO 5.6.7
• Responsify WP 1.9.8
• WP retina 2x 5.2.0

I turned on the retina, picture markup and debug options in the plugins settings. I followed the all the instructions in the readme and related pages. The pictures have been created for my custom images sizes and the related retina sizes. Find debug details here:

<figure><!--
### RWP Debug ###
Attachment ID: 95
Image sizes: thumbnail, medium, medium_large, large, thumbnail@2x, medium@2x, medium_large@2x, large@2x, full@2x, full
Image width: 3280
Image height: 2022
Image sizes found: thumbnail, medium, medium_large, large, thumbnail@2x, medium@2x, medium_large@2x, large@2x, full
Images found: 
- thumbnail: http://foo.bar/wp-content/uploads/2018/01/test-150x150.png, 
- medium: http://foo.bar/wp-content/uploads/2018/01/test-560x345.png, 
- medium_large: http://foo.bar/wp-content/uploads/2018/01/test-800x493.png, 
- large: http://foo.bar/wp-content/uploads/2018/01/test-1200x740.png, 
- thumbnail@2x: http://foo.bar/wp-content/uploads/2018/01/test-300x185.png, 
- medium@2x: http://foo.bar/wp-content/uploads/2018/01/test-1120x690.png, 
- medium_large@2x: http://foo.bar/wp-content/uploads/2018/01/test-1600x986.png, 
- large@2x: http://foo.bar/wp-content/uploads/2018/01/test-2400x1480.png, 
- full: http://foo.bar/wp-content/uploads/2018/01/test.png
Media queries: 
- Use medium when min-width: 150px, 
- Use medium_large when min-width: 560px, 
- Use medium@2x when min-width: 800px, 
- Use large when min-width: 1120px, 
- Use medium_large@2x when min-width: 1200px, 
- Use large@2x when min-width: 1600px, 
- Use full when min-width: 2400px
-->
  <picture><!--[if IE 9]>
    <video style="display: none;"><![endif]-->
    <source srcset="http://foo.bar/wp-content/uploads/2018/01/test.png" media="(min-width: 2400px)">
    <source srcset="http://foo.bar/wp-content/uploads/2018/01/test-2400x1480.png" media="(min-width: 1600px)">
    <source srcset="http://foo.bar/wp-content/uploads/2018/01/test-1600x986.png" media="(min-width: 1200px)">
    <source srcset="http://foo.bar/wp-content/uploads/2018/01/test-1200x740.png" media="(min-width: 1120px)">
    <source srcset="http://foo.bar/wp-content/uploads/2018/01/test-1120x690.png" media="(min-width: 800px)">
    <source srcset="http://foo.bar/wp-content/uploads/2018/01/test-800x493.png" media="(min-width: 560px)">
    <source srcset="http://foo.bar/wp-content/uploads/2018/01/test-560x345.png" media="(min-width: 150px)">
    <!--[if IE 9]></video><![endif]--><img
      srcset="http://foo.bar/wp-content/uploads/2018/01/test-150x150.png"></picture>
</figure>

My function.php adaptions look like this:

update_option('thumbnail_size_w', 150);
update_option('thumbnail_size_h', 150);
update_option('medium_size_w', 560);
update_option('medium_size_h', 0);
update_option('medium_large_size_w', 800);
update_option('medium_large_size_h', 0);
update_option('large_size_w', 1200);
update_option('large_size_h', 0);

add_image_size('thumbnail@2x', 300);
add_image_size('medium@2x', 1120);
add_image_size('medium_large@2x', 1600);
add_image_size('large@2x', 2400);
add_image_size('full@2x');

Everything seems to work fine except for adding the retina srcsets. I tried all kinds of options and combinations but nothing worked. The picture was added like this (content comes from acf plugin): echo rwp_picture($image['id']);

Could you please help me? – Thank you in advance!

[stefanledin]

Hi benediktdertinger! I was able to reproduce this issue to (for once! 😂) But if I added a settings array containing the retina => true option, I got it to work. Can you verify that this is the case for you to please?

echo rwp_picture( $image['id'], array(
    'retina' => true
) );

[stefanledin]

Oh, I just realized that this behavior is expected. When you call the rwp_img() or rwp_picture() functions directly, they don't care about your settings. They are only applied when RWP makes images responsive inside the loop. The rwp_ functions are meant to be used when you wanna do something a bit more custom, if you understand what I mean.

[benediktdertinger]

@stefanledin thank you so much for your help and fast reply. Finally it's working! Your plugin works really great but to be honest it wasn't clear at all that I would have to set this setting explicitly. I think there could be 2 options to make this easier to understand:

1. By setting the global option to use retina pictures in wp backend all occurrences of rwp_*() inherit this option. Of course this could be then overwritten locally to not use the retina option.
2. You add a info line to the section in the retina option when turned on. Something like:

Please note that for custom usage of rwp_image() and rwp_picture() you have to set the retina option separately e.g. in your code rwp_picture($image['id'], array('retina' => true));

I would go for the first option as I expected this and it seems (at least to me) to most convenient solution. Also because I use the acf plugin and therefore have to define it in all occurrences by hand.

Hope this helps and keep on doing great stuff – Thank you! <3

[stefanledin]

Thanks for the feedback, I think I'll keep it as it is for now and going for alternative two :) I'm currently thinking about the future of the plugin and considering if I should go for RWP 2.0 or just maintaining the current state...🤔

[pjv]

Is it also the case that when you add an extra filter using rwp_add_filters that images processed through that filter ignore the RWP retina setting?

Unfortunately, in my experience, it seems to be.

[stefanledin]

Humm, no, the same settings should be applied on images that goes through the extra filters as the ones that goes through the_content . Is everything else working as expected, besides retina?

[pjv]

Sorry, I think I was wrong. I was looking for a display density descriptor in the img markup, but I guess that's not needed if you are specifying sizes (?). When I switched the plugin's settings to the picture element, I can see that it is in fact doing the right thing.