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:Replace with:
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.
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:
<!-- 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 %}" /></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 -->Code:
<!-- 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 %}" /></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 -->Statistics: Posted by thecoalman — Sat Jan 04, 2025 9:50 am