When a message has an image attached and displayed, the img html code does not contain width and height

[cactux]

Hello,

I am not sure if I post in the correct forum, I hope so. If not, please forgive me, and meanwhile I wish you all an Happy New Year 2025

The subject says it all: when a message has an image attached and displayed, the img html code does not contain the width and height attributes.
It would be better to add them, as it helps the browser to better render the page.

Without these attributes, if you have a link to a message down in a discussion (with the anchor to reach directly the message), and if previous messages have images, then the following unwanted behavior can happen:
When loading and rendering the page, it looks like it "moves". Reason: the browser first renders the pages without the images, then receive the images, looks their size and has to increase the page size to insert them: for the user it looks like the part of the page he was pointed to moves down. The user then has to scroll down to reach the message.
I had a look at the code generated in this instance of phpbb.com, it is the same than in my forum.

My search to find a solution mostly points to mods or extensions to resize images, or bbcode to have the user manually specify the image dimensions, but these are not real solutions.

Is there a way to have this by default in phpbb?

Thanks a lot

[thecoalman]

Moved this to Styles Support and Discussion because you can at least partially do this with Style/CSS edits.

phpBB doesn't store the image size in pixels so it's not possible to set exact image dimension out of the box.

If you are using thumbnails there is container for thumbnail. If for example you were using 300px as max thumbnail size. You can set the container with a static size of 300px*200px. Center the image in the container and set the height of thumbnail image to 200px. You should also be able to just float container left.

[cactux]

Thanks for moving the discussion, thecoalman.

I am not using thumbnails, so the proposed solution will not work.

What about the Style/CSS edits you mention? Do you have any doc that I could read about that?

Thanks

[thecoalman]

There is no documentation here for this I'm aware of, you can google how to do this but most results are going to come back with using static width/height for a container.

You have an idea of what to set the thumbnail too. Most landscape images are going to have 3:2 ratio or close so you set the static dimensions to 300*200. Since phpBB only has setting for longest side portraits will have 300px height but you are using the browser to resize it to 200px. The other consideration here that really complicates things is it needs to fit within responsive design for phones.

You really should be using thumbs most uploaded images are going to be much larger than what can be displayed. If you want to keep thumbnails in posts large enable thumbs and set the dimension to 600, that should work with phones.

This is untested but open /styles/prosilver/template/attachment.html and find:

Code: Select all

		<!-- IF _file.S_THUMBNAIL -->
		<dl class="thumbnail">
			<dt><a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" class="postimage" alt="{% if _file.COMMENT %}{{ _file.COMMENT|e('html') }}{% else %}{{ _file.DOWNLOAD_NAME }}{% endif %}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a></dt>
			<!-- IF _file.COMMENT --><dd> {_file.COMMENT}</dd><!-- ENDIF -->
		</dl>
		<!-- ENDIF -->

		<!-- IF _file.S_IMAGE -->
		<dl class="file">
			<dt class="attach-image"><img src="{_file.U_INLINE_LINK}" class="postimage" alt="{% if _file.COMMENT %}{{ _file.COMMENT|e('html') }}{% else %}{{ _file.DOWNLOAD_NAME }}{% endif %}" onclick="viewableArea(this);" /></dt>
			<!-- IF _file.COMMENT --><dd><em>{_file.COMMENT}</em></dd><!-- ENDIF -->
			<dd>{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
		</dl>
		<!-- ENDIF -->

Replace with:

Code: Select all

	
		<!-- IF _file.S_THUMBNAIL -->
		<dl class="thumbnail">
			<dt style="width:600px; height:400px;" ><a href="{_file.U_DOWNLOAD_LINK}"><img style="height:400px; max-width:600px;" src="{_file.THUMB_IMAGE}" class="postimage" alt="{% if _file.COMMENT %}{{ _file.COMMENT|e('html') }}{% else %}{{ _file.DOWNLOAD_NAME }}{% endif %}" title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a></dt>
			<!-- IF _file.COMMENT --><dd> {_file.COMMENT}</dd><!-- ENDIF -->
		</dl>
		<!-- ENDIF -->

		<!-- IF _file.S_IMAGE -->
		<dl class="file">
			<dt class="attach-image" style="width:600px; height:400px;"><img style="height:400px; max-width:600px;" src="{_file.U_INLINE_LINK}" class="postimage" alt="{% if _file.COMMENT %}{{ _file.COMMENT|e('html') }}{% else %}{{ _file.DOWNLOAD_NAME }}{% endif %}" onclick="viewableArea(this);" /></dt>
			<!-- IF _file.COMMENT --><dd><em>{_file.COMMENT}</em></dd><!-- ENDIF -->
			<dd>{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
		</dl>
		<!-- ENDIF -->

It's just an example and could use some refinement such as centering the image in the container. The browser has static width/height for the container which is no larger than the unknown image size so it will avoid any shifts of the content.

[cactux]

Thanks!

[sylver35]

Hello,

In css file, you can do this:

Code: Select all

dl.thumbnail > dt {
	max-width: 600px;
	max-height: 400px;
}

[thecoalman]

That CSS change doesn't prevent content shift.

Setting the thumbnail to 600 or max resolutions to 600 both side without any other changes would accomplish the same thing. This won't prevent content shift either but will help mitigate it because the file size is smaller.

[Sniper_E]

From the ops first post, when the topic shows up, the message shows and then the image loads after and pushes the message down in the page.
Then the user has to scroll down to read the message.

One solution (not my choice) is to preload the images before the page loads. But your users will still have to scroll down to see the message.

I would suggest using the Lightbox extension. It would post a smaller image with the message showing. Then you click on the image to see full size.
And Lightbox will work in this manner for all styles. No need to edit your style.

[thecoalman]

the message shows and then the image loads after and pushes the message down in the page.

This only occurs when there is no dimensions for the image. In the example I gave you are allocating the real estate for the image with the container and then you just fit the image to the container. I've extensively modified this on my own forum, the container for each thumb is already rendered by the browser before the image is loaded.