Un'impostazione per inserire sempre le immagini come paragrafi separati

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 Mi Piace

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

7 Mi Piace

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 Mi Piace

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

7 Mi Piace

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 Mi Piace

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

10 Mi Piace

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 Mi Piace

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

7 Mi Piace

Spesso i miei utenti caricano più immagini contemporaneamente, per poi rovinare il post quando cercano di aggiungere una didascalia sotto un’immagine o quando rimuovono per errore il ! iniziale. Aggiungere due righe vuote dopo ogni caricamento sarebbe molto utile. Ci sono aggiornamenti in merito?

4 Mi Piace

Sì, dovremmo riprenderlo. Potrebbe essere qualcosa di semplice da inserire nella release.. @andrei?

6 Mi Piace

È implementato come comportamento predefinito, non come impostazione. Quando si caricano immagini da un dispositivo:

  • aggiungiamo una nuova riga prima di un’immagine se il cursore si trova su una riga non vuota
  • aggiungiamo sempre una nuova riga dopo le immagini
  • aggiungiamo una nuova riga tra le immagini quando ne carichiamo diverse

Il dettaglio importante è che aggiungiamo sempre una, non due, nuove righe.

È stato unito ora:

9 Mi Piace

È un bel miglioramento!

Un pensiero veloce (non testato): questo crea problemi ai componenti del tema che cercano di visualizzare immagini in una griglia? Ad esempio Galleria immagini a piastrelle o Galleria immagini a muratura?

6 Mi Piace

Per quanto riguarda la Galleria Immagini Masonry, questo non è un problema. È programmata per gestire a capo e paragrafi.

Bellissima unione!

4 Mi Piace

Sono curioso al riguardo. Da un punto di vista UX, per me ha più senso uno spazio tra le immagini caricate.

Senza spazio aggiunto:



Con spazio aggiunto:

4 Mi Piace

Penso vada bene così. Possiamo rivederlo in seguito, dato che è una questione estremamente minore.

3 Mi Piace

Sfortunatamente, questo causa problemi a Tiles Image Gallery. L’ho controllato: gestisce solo immagini separate da spazi, non da nuove righe.

Potrei dare un’occhiata a questo la prossima settimana.

3 Mi Piace

Sì, non ho mai caricato più immagini senza una riga vuota tra di esse. Aggiungo sempre la riga extra io stesso.

1 Mi Piace

Funziona bene con una singola riga vuota. :+1: Facile da modificare con CSS.

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

E non dimenticare, se vuoi regolare l’anteprima, devi fare qualcosa di simile. :slight_smile:

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

Ecco la correzione per Tiles Image Gallery

4 Mi Piace