Una configuración para siempre insertar imágenes como párrafos separados

En nuestra comunidad, los usuarios suelen querer insertar imágenes en una nueva línea la mayoría de las veces.

Sin embargo, no entienden el código de imágenes en Markdown y se confunden constantemente. Tienen un nivel muy bajo de habilidades informáticas.

Como resultado, acaban insertando una imagen y escribiendo en la misma línea, justo al lado. O insertan una imagen justo después de escribir un fragmento de texto.

Esto se ve poco estético y estoy buscando formas de resolver automáticamente la mayoría de los casos, incluso si eso implica hacer las cosas un poco más confusas para los usuarios avanzados.

¿Podríamos tener dos configuraciones, o al menos una de ellas?

  1. Insertar siempre la imagen en un párrafo nuevo y separado.

  2. Insertar siempre un salto de línea (o dos saltos de línea, para formar un párrafo) después del código de imagen que se acaba de insertar.

¿Tiene sentido?
¿O hay alguna idea mejor para abordar este problema?

11 Me gusta

He visto esta confusión en muchos sitios de Discourse @eviltrout.

7 Me gusta

Me pregunto si esto debería ser siquiera una opción. ¿Con qué frecuencia quieres pegar una imagen sin un nuevo párrafo? Quizás el comportamiento debería cambiar para hacer esto siempre.

8 Me gusta

Sí, lo apoyaría. Si @sam está de acuerdo, cambiemos el valor predeterminado para que sea así.

7 Me gusta

A veces me gusta alinear las imágenes a la derecha o a la izquierda, o insertar varias imágenes y redimensionarlas al 50 % para que parezcan una bonita galería de fotos. En estos casos, no querría que estuvieran todas en su propio párrafo.

No sé cuánta gente hace esto o le importa, en comparación con el gran número de personas que se confunden con el funcionamiento actual. El formato Markdown sigue siendo confuso para muchas personas.

1 me gusta

Casos de uso poco frecuentes; no deberíamos optimizar para esto, sino para el caso de uso común.

10 Me gusta

Para añadir, cuando subes varias imágenes a la vez (al menos en iOS), las inserta separadas solo por un espacio, así que siempre tengo que volver atrás para añadir saltos de línea.

3 Me gusta

¡Y durante un tiempo ni siquiera añadimos el espacio! :scream:

7 Me gusta

A menudo encuentro que mis usuarios suben varias imágenes a la vez, solo para arruinar la publicación cuando intentan añadir una leyenda debajo de una imagen o cuando eliminan por error el ! inicial. Sería muy útil añadir dos saltos de línea después de cada subida. ¿Hay algún avance en esto?

4 Me gusta

Sí, deberíamos retomarlo. Podría ser algo sencillo que podamos incluir en la versión… @andrei?

6 Me gusta

Se implementa como comportamiento predeterminado, no como una configuración. Al subir imágenes desde un dispositivo:

  • agregamos un salto de línea antes de una imagen si el cursor está en una línea no vacía
  • siempre agregamos un salto de línea después de las imágenes
  • agregamos un salto de línea entre imágenes al subir varias imágenes

El detalle importante es que siempre agregamos uno, no dos saltos de línea.

Ya se ha fusionado:

9 Me gusta

¡Esta es una mejora muy interesante!

Una idea rápida (sin probar): ¿esto podría causar problemas en los componentes del tema que intentan mostrar imágenes en una cuadrícula? Por ejemplo, Tiles Image Gallery o Masonry Image Gallery?

6 Me gusta

En cuanto a la Galería de Imágenes Masonry, esto no es un problema. Está programada para manejar saltos de línea y párrafos.

¡Buen merge!

4 Me gusta

Me llama la atención esto. Desde una perspectiva de UX, me parece más sensato dejar un espacio entre las imágenes cargadas.

Sin espacio añadido:



Con espacio añadido:

4 Me gusta

Creo que está bien tal como está. Podemos volver a revisarlo más adelante, ya que es algo extremadamente menor.

3 Me gusta

Desafortunadamente, esto causa problemas para Tiles Image Gallery. Lo he revisado y solo puede manejar imágenes separadas por espacios, no por saltos de línea.

Es posible que lo revise la próxima semana.

3 Me gusta

Sí, nunca he subido varias imágenes sin dejar una línea en blanco entre ellas. Siempre añado esa línea extra yo mismo.

1 me gusta

Funciona bien con una sola línea nueva. :+1: Es fácil de ajustar con CSS.

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

Y no te olvides, si quieres ajustar la vista previa, necesitas hacer algo como esto. :slight_smile:

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

Aquí está la solución para Tiles Image Gallery

4 Me gusta