Hi jgadbois!
What exactly happend after you added the image sizes? Doesn’t RWP do anything at all with the images? Can you show me some HTML?
Is it the custom media query interface you’re talking about? That has 20 auto generated media queries? It doesn’t send any XHR requests. The settings are saved when you hit the save button.
You can also turn on the debug mode and send me the comments.
Here’s the process:
1. I added new images sizes (retina and one more)
2. Regenerated thumbnails to have the new sizes on existing images
3. Went to RWP Settings – unchecked the @2x sizes, turned on retina, and hit Save
I now see 30 entries labeled “New custom media query” under the Media Queries and the default behavior no longer seems to work on the front end.
Here’s some of the debug output:
### RWP Debug ###
Attachment ID: 28886
Image sizes: thumbnail, thumbnail@2x, small@2x, medium@2x
Image width: 1600
Image height: 1093
Image sizes found: thumbnail, thumbnail@2x, small@2x, medium@2x
Images found:
- thumbnail: http://ciccom.staging.wpengine.com/Images/AdobeStock_10740040-1600x1600-150x102.jpg,
- thumbnail@2x: http://ciccom.staging.wpengine.com/Images/AdobeStock_10740040-1600x1600-300x205.jpg,
- small@2x: http://ciccom.staging.wpengine.com/Images/AdobeStock_10740040-1600x1600-586x400.jpg,
- medium@2x: http://ciccom.staging.wpengine.com/Images/AdobeStock_10740040-1600x1600-878x600.jpg
Largest size that should be used: http://ciccom.staging.wpengine.com/Images/AdobeStock_10740040-1600x1600-439x300.jpg
--><img src="http://ciccom.staging.wpengine.com/Images/AdobeStock_10740040-1600x1600-150x102.jpg"sizes="150px" class="aligncenter size-medium wp-image-28886" alt="AdobeStock_10740040-1600x1600" width="439" height="300"></p>
In Admin (debug code doesn’t seem to be detecting some of these sizes)
thumbnail (150 x 150 px) - checked
medium (705 x 300 px) - checked
large (1600 x 1600 px) - checked
Small (330 x 200 px) - checked
thumbnail@2x (300 x 300 px)
small@2x (600 x 400 px)
medium@2x (1410 x 600 px)
full
One more note – on my dev server I was able to restore default functionality by manually deleting the custom media query option that responsify sets.
No, I have no clue I’m afraid 🙁
I’ve followed your steps and everything works as expected. The output is the same as your example (with sizes attribute but no srcset) if I add an empty MQ setting, but I have no idea how they could just shows up by themself.
Do you have any theory why it’s 30 settings that are added?
Which browser are you using? Does it happen in Chrome for example?
I’m using Chrome but it doesn’t seem related to the browser. It almost seems like maybe something else is hooking into the plugin accidentally or something in an unexpected way. I’ll dig in the code to see if I can come up with a hypothesis.
If I console.log the rwp js object in the admin section intially customMediaQueries is false. After save it becomes "" (empty string). I’m guessing Backbone doesn’t know how to handle this correctly.
I’m still trying to figure out why it gets saved to false.
I’m going to keep digging in the backbone models, but does that give you any useful information?
Here’s the culprit on the Backbone side:
var models = [];
for (var customMediaQuery in rwp.customMediaQueries) {
models.push(new rwp.cmq.models.SettingsModel(rwp.customMediaQueries[customMediaQuery]));
}
Since rwp.customMediaQueries is the empty string it’s loopting through all the properties available on String rather than looping through an array.
I’m working for a pull request on this, but then need to figure out how to get the PHP to handle it gracefully as well (probably easier for me than tracking down which plugin/theme setting is actually causing the empty string to get in there some how)
Actually, that one js tweak seemed to solve my problems. Created pull request on github
https://github.com/stefanledin/responsify-wp/pull/19
