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 个赞

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

7 个赞

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 个赞

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

7 个赞

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 个赞

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

10 个赞

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 个赞

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

7 个赞

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 个赞

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

6 个赞

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 个赞

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 个赞

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

Nice merge!

4 个赞

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 个赞

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

3 个赞

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 个赞

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

1 个赞

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

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

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 个赞

Here is the fix for Tiles Image Gallery

4 个赞