<img> width and height attribute oddities

Bug
1

It seems the application of <img> width and height attributes is no longer being applied correctly; looks like a regression of this issue.

To save me posting a gazillion example posts, I’ll link to the WTDWTF thread instead:

Update: It only happens if they’re the same image; if the images are different, the attributes work properly…

5 Likes
2

One example here to see if it happens here too:

<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">
<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">



I don’t have many images available to hand

Edit: Yep, here too.

3

The view-source mark-up shows they aren’t 3 images, but the same image 3 times.

<p>
  <img src="//cdn.discourse.org/meta//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" height="137" width="150">
  <br>
  <img src="//cdn.discourse.org/meta//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" height="137" width="150">
  <br>
  <img src="//cdn.discourse.org/meta//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" height="137" width="150">
</p>
4

Only the third matches the raw though

5

Arbitrary widths are not supported. The idea is that the image contains the correct width, either max thumbnail size, or the exact size if the image is smaller than the max thumbnail size.

6

It’s not really an arbitrary width though. It’s a quick way to scale the image. If only one dimension is provided, proper browser handling scales the image, as opposed to squishing/stretching the specified dimension.

To further elaborate on @RaceProUK’s issue, let’s take the same image and widths, but reverse the order that @RaceProUK used:

<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">



Now, if that were really doing what you claimed, those should all be about 150px wide (actually 171px since that is the width of the source image), but they are all showing up as 50px wide. So you are claiming that “arbitrary widths” aren’t supported, when they are. It’s just the last width for a given image in a post is the only one used. Widths on all other instances of that image are overwritten.

7 Likes
7

As pointed out by @Mittineague, the images are going from a raw of:

<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">

To a cooked HTML of:

<p>
  <img src="//meta-discourse.globl.ssl.fastly.net//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50" height="46">
  <br>
  <img src="//meta-discourse.globl.ssl.fastly.net//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50" height="46">
  <br>
  <img src="//meta-discourse.globl.ssl.fastly.net//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50" height="46">
</p>

Obviously, something is happening when the post is being cooked.

2 Likes
8

If I had to guess, it’s because the cooking code server-side is ‘deduping’ the size attributes based on the filename; the client-side cooker doesn’t do that, as they look fine in preview.

Capture.PNG1489×381 23.2 KB

4 Likes
9

Has any progress been made on this? It still seems to be an issue.

<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">



1 Like
10

This should be fixed by:
https://github.com/discourse/discourse/pull/3706

5 Likes