Apresentando grades de imagens em posts

Talvez uma ferramenta de composição que você possa selecionar as imagens e ela inseriria a tag antes e depois?

4 Curtiram

Você poderia fazer algo como:

.d-image-grid:hover {
  img {
    -webkit-filter: brightness(60%);
    transition: 0.5s; 
  }
}

.d-image-grid:not([data-disabled]) .d-image-grid-column img, .d-image-grid:not([data-disabled]) .d-image-grid-column> .lightbox-wrapper, .d-image-grid:not([data-disabled]) .d-image-grid-column> .lightbox-wrapper> .lightbox {
  &:hover {
    img {
     -webkit-filter: brightness(100%);
     transition: 0.5s; 
    }
    transition: 0.5s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}
3 Curtiram
[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

Hmm, seria bom se isso funcionasse. Eu encorajo os usuários a vincularem suas imagens externas hospedadas em outro lugar, e desabilitei o download de imagens hotlinked para economizar espaço.

A seguinte alternativa pode funcionar, mas a maioria dos usuários não saberá como formatá-la em Markdown dessa maneira (eles estão acostumados a apenas colar o URL da imagem em uma linha separada):

[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

Aqui está um método ainda mais complexo para tornar as imagens externas clicáveis para ver a versão em tamanho real:

[grid]
[![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg "")](https://github.com/KDE/plasma-workspace-wallpapers/blob/master/IceCold/contents/images/5120x2880.png?raw=true)
[![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg "")](https://getwallpapers.com/wallpaper/full/b/5/f/563687.jpg)
[![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg "")](https://www.pixelstalk.net/wp-content/uploads/2016/06/Download-hd-nature-wallpaper.jpg)
[/grid]



Editar: Eu originalmente usei URLs para imagens externas, mas o Discourse substitui o texto mesmo dentro de blocos de código pelo link para o hotlink baixado, o que parece um bug. Ele nunca deveria mexer com o conteúdo de um bloco de código monoespaçado.

3 Curtiram

Ótimo novo recurso :clap:… uma coisa que um de nossos usuários perguntou é se existe algum tipo de folha de dicas de marcação para ajudar as pessoas a se lembrarem desses procedimentos manuais, um pouco como a caixa de diálogo de atalhos de teclado associada ao ícone do teclado.

7 Curtiram

Acabei de criar um componente de tema que adiciona botões de alinhamento de imagem e grade à barra de ferramentas do compositor

10 Curtiram

Isso definitivamente soa como um bug!

1 Curtiu

:yum: Lindo. Infelizmente não disponível por e-mail nem em páginas publicadas. :cry:

2 Curtiram

Sim, registrei um relatório de bug separado:

2 Curtiram

Sim, páginas publicadas têm acesso muito restrito aos recursos do Discourse. Nem mesmo as caixas de luz normais funcionam nelas. Clicar em uma imagem abrirá diretamente o URL em vez de mostrar o visualizador de imagens.

4 Curtiram

Isso funciona elegantemente! Acabei de fazer uma demonstração

Se isso contar de alguma forma, eu votaria para ter os recursos do componente temático de botões de alinhamento de imagem/.grid.

Se houvesse um recurso para imagens que eu gostaria de ter, seria uma maneira de adicionar uma legenda. Em nossa comunidade, defendo a atribuição de imagens, o que não é o melhor uso da descrição da imagem.

8 Curtiram

Que tal adicioná-lo pelo menos como uma opção de adesão nas configurações principais, incluindo um aviso explícito? Dessa forma, os administradores do fórum podem tomar essa decisão se quiserem e saber que estão violando a especificação CommonMark.

Saudações
Jr

1 Curtiu

Entendo seu desejo aqui (tenho o mesmo desejo, adoraria que várias fotos carregadas estivessem automaticamente em uma grade sem que o usuário fizesse nada), mas de uma perspectiva de manutenção, essa opção de adesão é insustentável. Executamos milhares de instâncias do Discourse, e ter a mesma marcação se comportando de maneira diferente em algumas instâncias, mas não em outras, pode causar todo tipo de dor de cabeça. Infelizmente, não é sustentável.

Esta é a nossa melhor aposta como próximo passo. (Não tenho certeza de quando acontecerá, mas contribuições aqui são certamente bem-vindas se alguém quiser abordar isso.)

8 Curtiram

Eu executo este código

posts = Post.where(‘raw LIKE ?’, ‘%

data-theme-slick=“1”%>’)
posts.each do |p|
p.update!(raw: p.raw.gsub(/
data-theme-slick=“1”>(.*?)</div>/m, ‘[grid]\1[/grid]’))
p.rebake!
end

mas tenho um erro

Eu deletei o símbolo (’ e digitei novamente, mas não tive sucesso
Você consegue encontrar o erro?
Obrigado!

3 Curtiram

Olá Sora, você precisa primeiro entrar no console do Rails: rails c

3 Curtiram

Podemos configurar o upload de todas as imagens para que elas sejam automaticamente organizadas em uma grade agradável?

5 Curtiram

Não sei se este é o comportamento pretendido, mas se você adicionar imagens a uma grade que estão abaixo das configurações de largura/altura máxima de imagem do lightbox, elas são exibidas em tamanho reduzido, mas sem nenhuma forma (*) de expandi-las para o tamanho original.

Por exemplo, criei uma grade com 11 imagens carregadas. Oito tinham 640x480, portanto abaixo da largura/altura de imagem padrão para lightboxing de 690x500, e as outras três eram 1200x372, 750x521 e 750x509. As últimas três foram lightboxed (class=lightbox-wrapper). As primeiras oito eram class=image-wrapper, então foram exibidas apenas com aproximadamente 300x250 e não puderam ser expandidas para vê-las em seu tamanho original maior.

(*) Esse comportamento pode ser alterado reduzindo as configurações de largura/altura máxima de imagem, mas isso afeta todas as outras imagens no fórum.

Acho que seria melhor se todas as imagens em uma grade fossem automaticamente lightboxed ou, alternativamente, tivessem configurações diferentes das configurações de lightboxing de imagem principal.

3 Curtiram

Existem planos para que imagens em grades sejam replicadas em e-mails?

3 Curtiram

Não neste momento, não. Para ser sincero, CSS em e-mails ainda é uma grande dor de cabeça. Clientes de e-mail variam muito entre si, e é super difícil obter qualquer coisa consistente renderizada.

5 Curtiram

Entendido, obrigado pela confirmação :slight_smile:

3 Curtiram

Feio, mas pode funcionar: envie apenas uma imagem composta para uma grade.

Para melhorar a experiência do usuário, ela poderia estar vinculada à grade apropriada no site ao vivo.

1 Curtiu