Se você tiver muitas imagens em uma postagem do Discourse, agora elas podem ser organizadas automaticamente em uma grade agradável. Tudo o que você precisa fazer é envolvê-las em tags [grid] ... [/grid], e as imagens serão organizadas de forma organizada. Este é um recurso principal a partir de este commit, habilitado em todas as instâncias do Discourse.
Este recurso é semelhante a alguns componentes de tema (Masonry Image Gallery, Tiles Image Gallery). A principal diferença é que o arranjo das imagens na grade se alinhará tanto na parte superior quanto na inferior do elemento. Algumas notas técnicas adicionais:
no celular, a grade tem 2 colunas por padrão, no desktop 3
se houver exatamente 4 itens na grade, as imagens serão organizadas em 2 colunas
elementos não relacionados a imagens também podem ser usados (como vídeos), mas os resultados não se alinharão perfeitamente
os itens na grade são organizados para garantir que as alturas das colunas sejam o mais próximas possível umas das outras, portanto, a ordem das imagens nem sempre é mantida
Ativar ou desativar a grade também pode ser feito clicando em um pequeno ícone de alternância ao lado da primeira imagem em um grupo de imagens na visualização do compositor:
Boa pergunta. Este novo recurso principal não é incompatível com o componente de tema Masonry Image Gallery, ou seja, ambos não podem funcionar ao mesmo tempo.
Se você quiser migrar postagens da abordagem da galeria Masonry para a nova abordagem principal, você precisará executar um script que atualize o conteúdo raw das postagens de
Correto, não deve impactar. Acredito que a primeira imagem encontrada na postagem é escolhida como a miniatura (excluindo avatares, emojis e similares). Além disso, não consigo ver um cenário em que a primeira imagem carregada não seja a primeira imagem na grade (a reordenação só pode acontecer para imagens posteriores na lista).
Hmm, sim, no compositor isso atualmente funciona apenas com uploads também. (Ou seja, colar uma URL para uma imagem e envolvê-la em tags [grid] também não funciona no compositor.)
Infelizmente, não, isso não funciona com páginas publicadas. Recursos semelhantes de postagem acionados por Javascript também não funcionam com páginas publicadas (lightboxes, enquetes, sumário).
Isso deve funcionar. Obviamente, faça um backup e procure cuidadosamente por quaisquer resultados indesejados nas postagens anteriores de alvenaria…
posts = Post.where('raw LIKE ?', '%<div>data-masonry-gallery</div>%')
posts.each do |p|
p.update!(raw: p.raw.gsub(/<div>data-masonry-gallery</div>(.*?)</div >/m, '[grid]\1[/grid]'))
p.rebake!
end
Com a configuração de auto habilitada… Isso não contém o <div> data-masonry-gallery</div> no raw, então o script não funcionará, eu acho. Mas neste caso, não há conflito entre eles.
Há algum plano para tornar as grades automáticas? Se isso acontecer, posso simplesmente rebater as postagens e manter o layout da grade. Até lá, acho que posso ocultar o botão de grade e usar o componente de tema com segurança.
Alguém na CDCK tem influência com os desenvolvedores do Chrome? Suporte CSS Masonry para Grid?
Masonry já deveria ser uma coisa do CSS. É um dos poucos layouts que permite respeitar diferentes proporções de coleções de imagens (ou qualquer conteúdo de item) de uma forma agradável.
É tão desperdício e inútil ter isso rodando como javascript em todos os lugares…
Estou animado com o suporte do Safari ao masonry, eles têm um histórico melhor de mover recursos de rascunho –> experimental –> totalmente suportado. O suporte do Firefox ao masonry está atrás de uma flag há mais de 2 anos. O suporte do Safari provavelmente será o principal impulsionador para o Chrome acompanhar.
Sim, mas não sem as tags [grid]. Converter imagens automaticamente em uma grade sem tags violaria as especificações do CommonMark, preferimos muito evitar isso. (No meu primeiro rascunho interno deste recurso, comecei com uma grade automática.)
Em vez disso, o que tenho pensado como próximo passo aqui é que poderíamos adicionar automaticamente os wrappers [grid] a uploads de várias imagens, provavelmente 3 ou mais uploads. Isso seria especialmente útil para uploads móveis, adicionar tags manualmente no celular é complicado e as chances são de que, se você estiver enviando 3 ou mais imagens de uma vez do seu telefone, elas são fotos e candidatos razoáveis para um layout de grade.
Ainda não temos planos para quando adicionaremos isso, mas é certamente algo que gostaríamos de fazer.
No entanto, deve ser possível gerar o HTML estático a partir do JavaScript e publicar o DOM “cozido” para habilitar uma série de recursos úteis, como esta grade e o TOC.
O HTML renderizado sozinho não é suficiente. A grade, o TOC e recursos semelhantes também precisam do JS que interage com o HTML para criar esse recurso. E esse JS reside no aplicativo Ember, ele não pode ser facilmente extraído para as páginas publicadas que não são do Ember.
Acabei de mexer nisso ontem e me recomendaram passar meu feedback e pensamentos aqui neste tópico…
Gostei que é “automático” no sentido de que ele define uma grade por si só.
Seria um bom recurso adicional poder ordenar as imagens sem precisar copiar/colar imagens na lista - talvez apenas adicionando números no início de cada imagem?
Gostei que você pode facilmente desativar a grade na pré-visualização, mas para que ela seja reativada, você precisa readicionar o código, parece uma área para uma experiência aprimorada ter o ícone da grade aparecendo quando você adicionou mais de uma imagem para poder ativar/desativar conforme necessário.
Uma última possível funcionalidade futura seria a capacidade de escolher uma imagem específica para “destacar” ou apresentar na grade para que ela apareça maior que as outras ou se destaque de alguma forma.
No geral, porém, uma ótima nova opção para adicionar várias imagens sem que elas dominem uma postagem
este problema:
Suporte CSS Masonry agora para Chrome e Edge!