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:



With space added:

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

https://github.com/discourse/Discourse-Tiles-image-gallery/pull/4

4개의 좋아요