Uma configuração para sempre inserir imagens como parágrafos separados

Em nossa comunidade, os usuários geralmente pretendem inserir imagens em uma nova linha.

No entanto, eles não conseguem entender os códigos de imagem em Markdown e ficam confusos com isso o tempo todo. Eles têm um nível muito baixo de habilidades com computadores.

Como resultado, acabam inserindo uma imagem e digitando na mesma linha, logo ao lado dela. Ou inserem uma imagem logo após digitar um trecho de texto.

Isso fica feio, e estou procurando maneiras de resolver automaticamente a maioria dos casos, fazendo um compromisso e tornando as coisas um pouco mais confusas para os usuários avançados.

Podemos ter duas configurações, ou pelo menos uma delas?

  1. Sempre inserir uma imagem em um novo parágrafo separado.

  2. Sempre inserir uma quebra de linha (ou duas quebras de linha, para formar um parágrafo) após o código de imagem que acabou de ser inserido.

Faz sentido?
Ou há uma ideia melhor sobre como abordar esse problema?

11 curtidas

Tenho visto essa confusão em muitos sites Discourse, @eviltrout.

7 curtidas

Eu me pergunto se isso deveria ser uma configuração. Com que frequência você quer colar uma imagem sem um novo parágrafo? Talvez o comportamento devesse mudar para fazer isso sempre.

8 curtidas

Sim, eu apoiaria isso. Se o @sam concordar, vamos alterar o padrão para fazer isso.

7 curtidas

Às vezes, gosto de alinhar imagens à direita ou à esquerda, ou inserir várias imagens e redimensioná-las para 50%, para que pareçam uma galeria de fotos bonita. Nesses casos, não gostaria que todas estivessem em seus próprios parágrafos.

Não sei quantas pessoas fazem isso ou se importam com isso, em comparação ao grande número de pessoas que ficam confusas com o funcionamento atual. Markdown ainda é confuso para muitas pessoas.

1 curtida

Casos de uso raros; não devemos otimizar para isso, mas sim para o caso de uso comum.

10 curtidas

Para complementar, quando você faz o upload de várias imagens de uma vez (pelo menos no iOS), elas são inseridas com apenas um espaço entre elas, então sempre tenho que voltar para adicionar quebras de linha.

3 curtidas

E por um tempo nem adicionamos o espaço!! :scream:

7 curtidas

Percebo que meus usuários frequentemente fazem upload de várias imagens de uma só vez, mas acabam estragando a postagem quando tentam adicionar uma legenda abaixo de uma imagem ou quando removem acidentalmente o ! inicial. Adicionar duas quebras de linha após cada upload seria muito útil. Há algum progresso sobre isso?

4 curtidas

Sim, devemos retomar isso. Pode ser algo simples que conseguimos incluir na versão.. @andrei ?

6 curtidas

Isso é implementado como comportamento padrão, não como uma configuração. Ao fazer upload de imagens de um dispositivo:

  • adicionamos uma quebra de linha antes de uma imagem se o cursor estiver em uma linha não vazia
  • sempre adicionamos uma quebra de linha após as imagens
  • adicionamos uma quebra de linha entre imagens ao fazer upload de várias imagens

O detalhe importante é que sempre adicionamos uma, não duas quebras de linha.

Já foi mesclado:

9 curtidas

Essa é uma ótima melhoria!

Uma ideia rápida (não testada): isso causa problemas para componentes de tema que tentam exibir imagens em grade? Por exemplo, Tiles Image Gallery ou Masonry Image Gallery?

6 curtidas

No que diz respeito à Galeria de Imagens Masonry, isso não é um problema. Ela foi programada para lidar com quebras de linha e parágrafos.

Ótima fusão!

4 curtidas

Tenho curiosidade sobre isso. Do ponto de vista da UX, um espaço entre imagens carregadas faz mais sentido para mim.

Sem espaço ao carregar:



Com espaço adicionado:

4 curtidas

Acho que está bom como está. Podemos rever mais tarde, já que isso é extremamente pequeno.

3 curtidas

Infelizmente, isso causa problemas para Tiles Image Gallery. Verifiquei e ele só consegue lidar com imagens separadas por espaços, não por quebras de linha.

Posso dar uma olhada nisso na próxima semana.

3 curtidas

É, eu nunca enviei várias imagens sem a linha em branco entre elas. Sempre adiciono a linha extra eu mesmo.

1 curtida

Fica bom com uma única quebra de linha. :+1: Fácil de ajustar com CSS.

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

E não se esqueça: se quiser ajustar a prévia, você precisa fazer algo assim. :slight_smile:

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

Aqui está a correção para o Tiles Image Gallery

4 curtidas