Level of customization?

Hi TheHungryGeek!
Can you turn on the debug mode and show me the debug information about one of these images?

<!–
### RWP Debug ###
Attachment ID: 460
Image sizes: thumbnail, large, tc-grid, tc-thumb, slider, fpc-size, full
Image width: 1536
Image height: 2048
Image sizes found: thumbnail, large, tc-grid, tc-thumb, slider, fpc-size, full
Images found:
– thumbnail: https://***-216×160.jpg,
– large: https://***-768×1024.jpg,
– tc-grid: https://***-570×350.jpg,
– tc-thumb: https://***-270×250.jpg,
– slider: https://***-1170×500.jpg,
– fpc-size: https://***-270×250.jpg,
– full: https://***.jpg
Largest size that should be used: https://***-225×300.jpg
Media queries:
– Use tc-thumb when min-width: 216px,
– Use fpc-size when min-width: 270px,
– Use tc-grid when min-width: 270px,
– Use large when min-width: 570px,
– Use slider when min-width: 768px,
– Use full when min-width: 1170px
–>

This picture was selected from the ‘medium’ size setting when I was inserting the image. Interestingly the debug info has the ‘largest size that should be used’ at the correct size, but unfortunately it still includes all the larger images in the srcset.

Is this the intended effect?

As a supplementary question, I have been trying to use RWP on my slider images as well. The slider is from the popular theme Customizr. While it works the first time, any time when I save a post draft (draft, not even a published post), the srcset settings disappear. Is there a way to fix this?

No, that’s not the intended effect. Which markup pattern are you using? img or picture? What happens if you switch markup pattern?

I’ll take a look at the Customizr theme later and get back to you!

I’m using the default img markup. I’ve only tested the picture markup once, but it did not work on say for example my slider images.

Thanks for the help Stefan!

I’ve downloaded and played around a bit with the Customizr theme now. I’m afraid that the slider issue can’t be resolved without hacking the source code of the theme. I can see that they’re doing something with the srcset attribute, but that might have something to do with the native implementation of responsive images in WP.

I can’t reproduce the first issue with the image sizes. It works fine for me. Can you try switching to the Twentyfifteen theme for example and see if the issue remains?
If it does, I suspect it might have something to do with the uploads/ folder. Is is located at the default location?

The uploads folder is located at the default location.

To clarify, when you tested the Customizr Theme and enabled all the image sizes for the srcset – inserting a ‘medium’ image – the srcset does not include the larger image sizes such as 1170×500?

Yeah that’s correct. I made a clean installation of WordPress, installed Customizr, installed RWP, added one (medium) image to a post. Nothing else. It worked as expected.

Try doing it on a page instead of a post? I don’t have that issue on posts either.

It is happening on a page.

Added a new page and inserted a medium image -> worked as expected.
Haha, this was a hard one…
How does your uploads directory look like? Are all images placed directly in the folder or is it ordered in the regular uploads/2016/01/image.jpg style?

Yes it is on WordPress defaults. Oh man lol.

Interestingly using the default WordPress 4.4.1 srcset it is including the standard large sized image in the srcset as well (but not the other larger custom image sizes of course). I wonder if its just an issue with pages or posts created before the upgrade.

Edit: nope, tested with a brand new page and there’s that same bug even with the WordPress default srcset. This strange behaviour is only observed on pages, it is completely fine on posts.

To update, my theme’s support found a solution – to use the rwp_add_filters to add the slider filter for my theme – now it works perfectly with your plugin.

For some reason the bug with the pages resolved itself as well – strange I know.

As a side question, for your code here:

function add_filters( $filters ) {
    $filters[] = 'my_custom_filter';
    return $filters; // Equals array( 'the_content', 'post_thumbnail_html', 'my_custom_filter' )
}
add_filter( 'rwp_add_filters', 'add_filters' );

How should I edit it if I want the plugin to modify multiple filter targets?

Thanks!

Oh, that’s great! It’s much easier for them to tell you how to do it ??

To add multiple filters, you can do this:

function add_filters( $filters ) {
    $filters[] = 'my_custom_filter_1';
    $filters[] = 'my_custom_filter_2';
    $filters[] = 'my_custom_filter_3';
    return $filters;
}
add_filter( 'rwp_add_filters', 'add_filters' );

Thanks for that! Well this is frustrating, bumped into another bug.

So while the issue with the srcset displaying larger images on pages fixed itself, the issue appeared on images that I included via the rwp_add_filters. And this affected only images from one filter but not the second filter.

Turning on debug shows that the plugin correctly identified the largest image to display, but srcset displays all the image sizes.

This is so strange lol.

<!--
### RWP Debug ###
Attachment ID: 583
Image sizes: thumbnail, medium, large, tc-grid, slider-full, slider, full
Image width: 1200
Image height: 1200
Image sizes found: thumbnail, medium, large, tc-grid, slider-full, slider, full
Images found:
... [deleted]
Largest size that should be used: https://...-270x250.jpg
Media queries:
- Use medium when min-width: 216px,
- Use tc-grid when min-width: 300px,
- Use large when min-width: 570px,
- Use slider when min-width: 1024px,
- Use slider-full when min-width: 1170px,
- Use full when min-width: 1200px
-->

Okay I think I’ve solved this bug Stefan, it happens when the source image size in question is of an image size that is NOT selected in the Responsify WP settings.

So the previous time I did not select the ‘medium’ image size to include in the srcset. As such when it detected a medium image, it included all the larger image sizes.

Just an FYI, not sure if this counts as a bug? I’m glad that this is finally solved though. If you intend to fix this I hope you could let me know though, right now I’m just disabling one of the filters as a workaround.

For clarity steps to reproduce bug:

1. Deselect ‘medium’ image size in Responsify WP settings page under the ‘image sizes’ to be used with the plugin

2. Insert a medium image on a page

3. Plugin will include larger image sizes into the srcset despite the debug mode detecting accurately that medium is the largest image size to be used

Hi Stefan did you manage to confirm the bug?