Caption filter doesn't select the correct image size when an image's size is manually adjusted.

Thanks for reporting this bug! Because this is a regression from the last version, I'm going to mark it as Critical.

I think fixing should be a matter of copying the height/width from the image to the caption div as well. Hopefully, we can work on it at the sprint!

Sorry I'm on vacation and have pretty limited access to.... everything.

I think fixing should be a matter of copying the height/width from the image to the caption div as well.

You shouldn't need the height. Just the width.

Should be pretty simple. Basically right now it's using the imagesLoaded library (see #2287805: Caption filter does not work with Quarter Size image format - or with floated captions. issue summary for a recap of the need for this).

Based on this issue report, though, what it *should* be doing is grabbing the CSS width of the image via JQuery, comparing it to the size obtained with imagesLoaded and using whichever is smallest.

I think that should get all cases
- image is resized manually to display smaller than actual size
- image has no CSS width or a % width
- image has a CSS width set, but the actual image is smaller than that.

Then that should plug in to the logic that adds up padding/margins/borders on the img parent elements to get the right size box.

Sorry I can't just fix this, since it's my bad for not thinking of the manual resize problem, but just don't have the time right at the moment.

Based on this issue report, though, what it *should* be doing is grabbing the CSS width of the image via JQuery, comparing it to the size obtained with imagesLoaded and using whichever is smallest.

Ah, ok. That actually sounds even simpler than what I was thinking!

I was thinking about this as I fell asleep and I think I was wrong about always choosing the smaller one. I think if there's a CSS size in pixels, it should always take that, because the user could also be upsizing.

I'm going to try to play with the current distro now and see how it behaves.

[EDIT - IGNORE THIS PATCH. Patch is fine, but has extra whitespace. Next post has properly (I hope) formatted patch.

I managed to sneak 30 mins today to turn out a patch. Seems to work.

I incorrectly assumed that TinyMCE handled this by adding an inline style. It actually does it by setting the width attribute which actually makes this even easier because you don't have to worry about where the value is coming from (i.e. you know for sure it's coming from the element).

This patch was tested on exactly one image. I did test it without manual resizing, with manually reducing the size and manually increasing the size. It worked for me in all cases, so asking for testing and review.

New patch - only change is fixing whitespace at end of line

Typical! Sorry about that and thanks so much for the test.

Try this

Thank you for the test and sorry for the screwup on the first patch.

I can confirm that the patch in #8 works, as expected. Thanks for submitting it. I did manual testing with both a vanilla Panopoly install, and with a site we have in development where we noticed the problem. I did not do a code review.

Code changes seem OK to me.

Reviewed, was concerned around the use of attr(), but seems appropriate in our cases (in regards to deprecation in newer jQuery for those using jquery_update)

From: #2416689: jQuery .attr() deprecated/removed for use with "checked" and "disabled" properties

jQuery deprecated (version 1.6) and removed (version 1.9) the use of .attr() for use to set "checked" and "disabled" properties. It also points out that attempting to retrieve values by using .attr() will result in confusion/problems, as in this example: $elem.attr("checked"); will return true if $elem has a "checked" property at all, not if it is true.

Thanks, @toddwoof for finding and reporting the issue! And thanks @ergophobe for making a patch to fix so quickly! Aaaand, thanks everyone else for reviewing and testing the fix.

Committed!