Padding inconsistencies with images

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:


Text following, no empty line before.

Now an uploaded image, no empty line after this text:


Text following, no empty line before.

1 Like

Text before hotlinked image, no empty line after text:


Text after, no empty line before it.

Text before uploaded image, no empty line after text:


Text after, no empty line before it.

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:
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)

Uploaded image:
![563687|690x388](upload://oOqqJbiN2BL6Ju752OD87dlJqbI.jpeg)

2 Likes

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.

2 Likes

I think it’s because it rebuilds the post and adds all the HTML with the image viewer, which creates different margins or paddings.

1 Like

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.

1 Like

Yeah, there are several inconsistencies.
A similar one for example:

1 Like

I believe some of this quirkiness will be resolved when we merge @Johani’s change.

2 Likes