A setting to always insert images as separate paragraphs

In our community, users intend to insert images on a new line most of the time.

However, they cannot understand Markdown image codes, and they get confused about it all the time. They’re on a very low level of computer user skills.

As a result, they end up inserting an image and typing on the same line, just next to it. Or insert an image right after they typed a piece of text.

This looks ugly, and I’m looking for ways to automatically solve the majority of cases by compromising and making it a more confusing for advanced users.

Can we have two settings, or at least one of it?

  1. Always insert an image in a new, separate paragraph.

  2. Always insert a newline (or two newlines, to make up a paragraph) after the image code that was just inserted.

Does it make sense?
Or is there a better idea on how to tackle this problem?

11 Likes

I have seen this confusion on a lot of Discourse sites @eviltrout.

7 Likes

I wonder if this should even be a setting? How often do you want to paste an image without a new paragraph? Perhaps the behaviour should change to always do this.

8 Likes

Yeah I would support that. If @sam agrees let’s change the default to make it so.

7 Likes

Sometimes I like to align images right or left, or insert a bunch of images and resize them to 50% so they look like a pretty photo gallery. In these cases I would not want to have them all in their own paragraph.

Not sure how many people do this or care about this, compare to the known large number of people who get confused by how it works now. Markdown is still confusing to many folks.

1 Like

Rare use cases, we should not be optimizing for this, but the common use case.

10 Likes

To add, when you upload multiple images at once (on iOS at least) it inserts them with only a space between them, so I always have to go back to add new lines.

3 Likes

And for a while we did not even add the space!! :scream:

7 Likes

I find my users often upload multiple images at once only to screw up the post when they try to add a caption below an image, or when they remove the starting ! by mistake. Adding two new lines after each upload would be very useful. Any progress on this?

4 Likes

Yes we should pick this up again. Might be an easy one we can slip into the release… @andrei ?

6 Likes

It’s implemented as default behavior, not as a setting. When uploading images from a device:

  • we add a newline before an image if a cursor is on a nonblank line
  • we always add a newline after images
  • we add a newline between images when uploading several images

The important detail is that we always add one, not two newlines.

It’s merged now:
https://github.com/discourse/discourse/pull/12895

9 Likes

This is a nice improvement!

Quick (untested) thought: does this cause problems for theme components that try to display images in a grid? For example Tiles Image Gallery or Masonry Image Gallery?

6 Likes

As far as Masonry Image Gallery, this isn’t a problem. It’s coded to handle newlines and paragraphs.

Nice merge!

4 Likes

I’m curious about this. From a ux perspective, a space between uploaded images makes more sense to me.

No space as uploaded:
fff
fff-1
fff-2

With space added:
fff

fff-1

fff-2

4 Likes

I think it’s fine as is. We can revisit later as this is exceedingly minor.

3 Likes

Unfortunately, this causes problems for Tiles Image Gallery. I’ve checked it, it can handle only images separated with spaces, not newlines.

I may take a look at this next week.

3 Likes

Yeah, I have never uploaded multiple images without the blank line in between the images. I always add the extra line myself.

1 Like

It’s good with a single new line. :+1: Easy to adjust with CSS.

.cooked img {
    margin-bottom: 3px;
}
5 Likes

And don’t forget, if you want to adjust the preview you need to do something like this. :slight_smile:

.d-editor-preview img {
    margin-bottom: 3px;
}
3 Likes

Here is the fix for Tiles Image Gallery

4 Likes