The discussion revolves around the inability to perform arbitrary nonproportional image resizing in Discourse, unlike in the previous Flarum platform. connrrr notes that HTML-based image size adjustments result in cropping due to lightbox CSS. Canapin explains that small images retain their aspect ratio, but larger ones are cropped. They suggest workarounds, such as using the avatar class to force dimensions (though it adds a border-radius), or creating a custom wrap with CSS to override object-fit. A CSS rule targeting [data-wrap="ratio"] .lightbox-wrapper img can prevent cropping. The issue highlights the lack of a straightforward user-level solution, with admin-level CSS customization being the most reliable method. Canapin also speculates that a simpler user-level method might exist but is currently unknown.
Hello again!
When our forum was previously on Flarum, a fun thing to do was add size tags to modify the height and width of an image to stretch and squash it, like so (might be misremembering how the tag went)
I’ve tried using HTML equivalents on uploaded images with Discourse, but all this does is crop the image.
I don’t see that there’s any way to do this with uploaded images in Discourse. Am I mistaken?
When the image is large and you change the dimensions, it’s automatically cropped because of the lightbox CSS.
Even if you resize it:
Small images can be posted with the wanted aspect ratio.
Maybe there’s a very hacky way to be found, such as using an authorized class for the <img> tag, like avatar:
<img width="376" height="50" src="https://meta.discourse.org/secure-uploads/meta/original/4X/b/e/6/be6f2ea64830fe0aaec6c192f3b39c38ce5f179c.png" class="avatar">
But it forces a border-radius.
The original is square and forces a lightbox:
If you’re an admin, I’d say the easiest way is to use a custom wrap and define a CSS rule. For example:
[wrap=ratio]
!image|500x300](upload://raEVqkaMNqIXQ9YcsiZuYefukFu.png)
[/wrap]
[data-wrap="ratio"] .lightbox-wrapper img {
object-fit: unset;
}
I wouldn’t be surprised if there was a way to force the aspect ratio as a user, though, or even an easier way as an admin. Maybe don’t even use a wrap and force unset on object-fit in a lightbox div, but that might mess up the regular layout. I don’t know.