Users are discussing padding inconsistencies in Discourse when displaying images, particularly between hotlinked and uploaded images. rahim123 highlights that hotlinked images have a padding-bottom: 1.4em; while uploaded images have padding-bottom: 0;, leading to visual differences in previews. Canapin explains that downloaded remote images lack dimensions, preventing the creation of an image-wrapper, which affects padding. rahim123 notes that after remote images are downloaded, the post padding increases due to a rebuild process, causing unexpected visual changes in post revisions. Canapin attributes this to different HTML structures and margins. rahim123 expresses that these inconsistencies can irritate users, especially those accustomed to WYSIWYG editors. Canapin references a similar issue and sam suggests future improvements may come with the migration away from Magnific Popup.
Small annoyance here, there are small variations between what the post preview shows and to what the baked post shows, and it varies based on whether it’s an uploaded or hotlinked image.
Hotlinked image, no empty line after this text:
Now an uploaded image, no empty line after this text:
Text before hotlinked image, no empty line after text:
Text before uploaded image, no empty line after text:
The hotlinked image has this CSS:
.d-editor-preview img {
padding-bottom: 1.4em;
}
Whereas the uploaded image has this one:
.d-editor-preview .image-wrapper img {
padding-bottom: 0;
}
It also happens when the remote image has been downloaded to Discourse, because no dimensions are set in this case, which means no image-wrapper is created in the preview:
Remote image downloaded:
Uploaded image:
Interesting, thanks.
I also noticed that in the case of hotlinked images that get downloaded the initial published post has no padding between the image and the text above it, but after a few minutes when the process in the queue triggers to download the remote image it increases the padding. This can be seen as a revision in the post’s history with a visual change in the padding gap.
I think it’s because it rebuilds the post and adds all the HTML with the image viewer, which creates different margins or paddings.
I see, thanks. So it would be nice if some of those inconsistencies could be cleaned up, surprisingly users do notice and get irritated by them, especially when they’re used to WYSIWYG editors in other forum engines. The self-changing post rendering after the remote image gets downloaded is even weirder, although I totally understand that there are technical reasons behind it.
Yeah, there are several inconsistencies.
A similar one for example: