This feature is a natural-pairing to #620108: Download all remote images locally (a hotlinking solution). If we're going to be doing things like modifying images that aren't resized at all, we should leverage the fact that we already collect the height and width for all images within a post. This patch makes it so that all images, resized or not, get height and width attributes automatically inserted if they are missing.

Adding in height and width helps the page render more quickly, since the image doesn't need to be loaded for the browser to figure out what size it should leave for other HTML to wrap around it. This issue has been brought up in the Insert module queue a couple of times when dealing with ImageCache sizes (which are unpredictable):

#549966: Remove Width and Height attributes when using Image Cache preset
#505420: Calculate width and height attributes when inserting ImageCache images

CommentFileSizeAuthor
#9 image_resize_filter_add_width_height2.patch1.56 KBquicksketch
image_resize_filter_add_height_width.patch5.43 KBquicksketch

Comments

quicksketch’s picture

quicksketch
he/him
commented
Status: Needs review » Fixed

Committed.

geerlingguy’s picture

geerlingguy commented

This is in dev, I take it? If so, do you have a timeline for a new release? If it will be a while, I'll switch to a CVS checkout.

quicksketch’s picture

quicksketch
he/him
commented

I just made the 1.7 release. ;-)

jdanthinne’s picture

jdanthinne commented
Status: Fixed » Needs work

Since the 1.7 update, width and height attributes are duplicated (two times in the same img tag).
This breaks W3C validation.

geerlingguy’s picture

geerlingguy commented

@ jdanthinne - could you provide a sample of the before and after, so quicksketch can see if there might be something missing in his regex to add the tags?

quicksketch’s picture

quicksketch
he/him
commented

Shoot, no need to post HTML input/output. I was doing my testing by checking the source in Firebug, which unfortunately "cleans up" the duplicate tags so I wasn't seeing them.

Some examples:

<p>	<img src="http://drupal6/files/lullabot.png" width="65" height="80" /></p>
<p>	<img src="http://drupal6/files/lullabot.png" /></p>
<p>	<img height="80" src="http://drupal6/files/lullabot.png" /></p>

Outputs:

<p>	<img src="http://drupal6/files/lullabot.png" width="65" height="80" width="65" height="80" /></p>
<p>	<img src="http://drupal6/files/lullabot.png" width="65" height="80" /></p>
<p>	<img height="80" src="http://drupal6/files/lullabot.png" width="65" height="80" /></p>
bryancasler’s picture

bryancasler commented

I'm very excited this has been added, upgrading now. Can anyone confirm #4?

bryancasler’s picture

bryancasler commented

Maybe I'll wait until this evening until this gets hashed out.

quicksketch’s picture

quicksketch
he/him
commented
Status: Needs work » Needs review
StatusFileSize
new image_resize_filter_add_width_height2.patch1.56 KB

Okay, sorry for the trouble folks. The current release "works" fine but it's definitely outputting extra height/width attributes on all img tags. I've tested this pretty thoroughly, but if I can get confirmation that this patch corrects the double-attributes problem I'll commit it and make another release.

geerlingguy’s picture

geerlingguy commented
Status: Needs review » Reviewed & tested by the community

I've tested the patch on http://archstl.org/ and http://www.lifeisaprayer.com/, and it worked successfully in both cases. I'd say it's safe to commit!

geerlingguy’s picture

geerlingguy commented
Version: 6.x-1.6 »

Updating version.

quicksketch’s picture

quicksketch
he/him
commented
Version: » 6.x-1.7
Status: Reviewed & tested by the community » Fixed

Excellent, thanks geerlingguy. I've committed and made the 1.8 version.

bryancasler’s picture

bryancasler commented

I can also confirm this works. I just had to move Image Resize Filter to fire before HTML Purifier.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.