# Apresentando grades de imagens em posts
**URL:** https://meta.discourse.org/t/introducing-image-grids-in-posts/268664
**Category:** Announcements
**Tags:** new-feature
**Created:** [19 Junho , 2023 18:46 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664 "2023-06-19T18:46:03Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [23 Junho , 2023 14:05 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/31 "2023-06-23T14:05:49Z")
Talvez uma ferramenta de composição que você possa selecionar as imagens e ela inseriria a tag antes e depois?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [23 Junho , 2023 19:04 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/32 "2023-06-23T19:04:09Z")
> [@Samantha\_O](#):
>
> Uma última funcionalidade futura possível seria a capacidade de escolher uma imagem específica para “destacar” ou apresentar na grade, de modo que ela apareça maior que as outras ou se destaque de alguma forma.
Você poderia fazer algo como:
```plaintext
.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);
}
}
```
---
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [12 Julho , 2023 05:22 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/33 "2023-07-12T05:22:41Z")
> [@pmusaraj](#):
>
> (Ou seja, colar um URL de uma imagem e envolvê-la em tags `[grid]` também não funciona no compositor.)
```plaintext
[grid]
[/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):
```plaintext
[grid]
[/grid]
```
Aqui está um método ainda mais complexo para tornar as imagens externas clicáveis para ver a versão em tamanho real:
```plaintext
[grid]
[](https://github.com/KDE/plasma-workspace-wallpapers/blob/master/IceCold/contents/images/5120x2880.png?raw=true)
[](https://getwallpapers.com/wallpaper/full/b/5/f/563687.jpg)
[](https://www.pixelstalk.net/wp-content/uploads/2016/06/Download-hd-nature-wallpaper.jpg)
[/grid]
```
[](https://github.com/KDE/plasma-workspace-wallpapers/blob/master/IceCold/contents/images/5120x2880.png?raw=true)
[](https://getwallpapers.com/wallpaper/full/b/5/f/563687.jpg)
[](https://www.pixelstalk.net/wp-content/uploads/2016/06/Download-hd-nature-wallpaper.jpg)
_ **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._
---
### Author:  [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [13 Julho , 2023 13:44 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/34 "2023-07-13T13:44:17Z")
Ótimo novo recurso 👏… 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.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [13 Julho , 2023 17:34 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/35 "2023-07-13T17:34:06Z")
Acabei de criar um componente de tema que adiciona botões de alinhamento de imagem e grade à barra de ferramentas do compositor
> [@Alinhamento e Grade de Imagem](https://meta.discourse.org/t/image-alignment-and-grid/271560/1):
>
> information_sourceResumo Adiciona botões de grade e alinhamento de imagem à barra de ferramentas do compositorhammer_and_wrenchRepositório [https://github.com/Lillinator/image-alignment](https://github.com/Lillinator/image-alignment)questionGuia de Instalação [Como instalar um tema ou componente de tema](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNovo nos Temas do Discourse? [Guia para iniciantes sobre como usar temas do Discourse](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Instalar este componente de tema Este componente de tema insere botões na barra de ferramentas do compositor de …
---
### Author:  [@hello-smile6](https://meta.discourse.org/u/hello-smile6)
#### Post date: [18 Julho , 2023 06:55 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/36 "2023-07-18T06:55:35Z")
> [@rahim123](#):
>
> O Discourse substitui texto mesmo dentro de blocos de código pelo link do hotlink baixado, o que parece um bug. Ele _ **nunca** _ deveria mexer com o conteúdo de um bloco de código monoespaçado.
Isso definitivamente soa como um bug!
---
### Author:  [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [18 Julho , 2023 07:47 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/37 "2023-07-18T07:47:16Z")
😋 Lindo. Infelizmente não disponível por e-mail nem em páginas publicadas. 😢
---
### Author:  [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [18 Julho , 2023 13:21 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/38 "2023-07-18T13:21:23Z")
> [@hello-smile6](#):
>
> > [@rahim123](#):
> >
> > O Discourse substitui texto mesmo dentro de blocos de código pelo link da imagem baixada, o que parece um bug. Ele _ **nunca** _ deveria mexer com o conteúdo de um bloco de código monoespaçado.
>
> Isso definitivamente soa como um bug!
Sim, registrei um relatório de bug separado:
> [@Code block image link gets modified when hotlinked image is downloaded](https://meta.discourse.org/t/code-block-image-link-gets-modified-when-hotlinked-image-is-downloaded/271571):
>
> It happens when using the  Markdown convention in a code block and then using the same code outside of the code block to actually display the image. It happens after about 5 minutes once Discourse downloads the hotlinked image.  Original: [image]
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [18 Julho , 2023 15:14 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/39 "2023-07-18T15:14:00Z")
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.
---
### Author:  [@cogdog](https://meta.discourse.org/u/cogdog)
#### Post date: [19 Julho , 2023 18:25 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/40 "2023-07-19T18:25:23Z")
Isso funciona elegantemente! Acabei de fazer uma demonstração
> **[Grids of Images](https://connect.oeglobal.org/t/grids-of-images/5660)**
>
> If you have not observed I rather love using images (open licensed only!) in my posts… Note: I most strongly recommend use of Openverse these days for finding Creative Commons licensed images where there is no question of reuse plus cut and paste...
Se isso contar de alguma forma, eu votaria para ter os recursos do [componente temático de botões de alinhamento de imagem/.grid](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/35?u=cogdog).
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.
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [21 Julho , 2023 17:29 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/41 "2023-07-21T17:29:32Z")
> [@pmusaraj](#):
>
> Sim, mas não sem as tags `[grid]`. Converter imagens automaticamente em uma grade sem tags violaria a especificação CommonMark, preferimos muito evitar isso. (No meu primeiro rascunho interno deste recurso, comecei com uma grade automática.)
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
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [21 Julho , 2023 17:34 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/42 "2023-07-21T17:34:49Z")
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.
> [@pmusaraj](#):
>
> …poderíamos adicionar automaticamente os wrappers `[grid]` aos uploads de várias imagens, provavelmente 3+ uploads.
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.)
---
### Author:  [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [1 Novembro , 2023 17:29 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/43 "2023-11-01T17:29:42Z")
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”\>(.\*?)\/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!
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [1 Novembro , 2023 17:37 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/44 "2023-11-01T17:37:26Z")
Olá Sora, você precisa primeiro entrar no console do Rails: `rails c`
---
### Author:  [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [1 Novembro , 2023 19:17 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/45 "2023-11-01T19:17:13Z")
Podemos configurar o upload de todas as imagens para que elas sejam automaticamente organizadas em uma grade agradável?
---
### Author:  [@packman](https://meta.discourse.org/u/packman)
#### Post date: [16 Dezembro , 2023 10:48 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/46 "2023-12-16T10:48:50Z")
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.
---
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [5 Fevereiro , 2025 10:40 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/47 "2025-02-05T10:40:06Z")
> [@thoka](#):
>
> 😋 Lindo. Infelizmente nenhum dos dois está disponível por e-mail
Existem planos para que imagens em grades sejam replicadas em e-mails?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [5 Fevereiro , 2025 15:32 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/48 "2025-02-05T15:32:20Z")
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.
---
### Author:  [@Richie](https://meta.discourse.org/u/Richie)
#### Post date: [5 Fevereiro , 2025 15:50 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/49 "2025-02-05T15:50:22Z")
Entendido, obrigado pela confirmação 🙂
---
### Author:  [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [5 Fevereiro , 2025 21:48 UTC](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664/50 "2025-02-05T21:48:47Z")
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.
[Página anterior](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664.md?page=1)
[Próxima página](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664.md?page=3)