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 curtidas

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 curtidas
[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 curtidas

Ó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 curtidas

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

10 curtidas

Isso definitivamente soa como um bug!

1 curtida

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

2 curtidas

Sim, registrei um relatório de bug separado:

2 curtidas

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 curtidas

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 curtidas

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 curtida

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 curtidas

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 curtidas

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

3 curtidas

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

5 curtidas

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 curtidas

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

3 curtidas

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 curtidas

Entendido, obrigado pela confirmação :slight_smile:

3 curtidas

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 curtida