Galeria de Imagens em Alvenaria

[Heddson]

Este recurso agora está integrado ao núcleo do Discourse, veja o anúncio sobre grades de imagens no Discourse.

Este componente de tema adiciona uma galeria de imagens responsiva no estilo masonry com ordenação personalizável.

Visualização para desktop:

Visualização para mobile:

Ao clicar em uma imagem, ela será aberta com o visualizador lightbox padrão.

Você adiciona a galeria clicando no ícone de grade e, em seguida, adicionando suas imagens. Também funciona selecionando primeiro as imagens carregadas e, em seguida, clicando no ícone.

→ Então, o que você quer dizer com ordenação personalizável?

As imagens podem ser ordenadas horizontalmente (da esquerda para a direita) ou verticalmente. A ordem horizontal é ideal para imagens de revistas, gibis ou similares. Além disso, quando você pressiona “próximo” na visualização lightbox, a imagem correta será exibida.

As imagens abaixo ilustram a diferença. A da direita tem ordenação horizontal.

A ordem padrão é horizontal, mas pode ser alterada nas configurações. Também é possível alterar a ordem de uma galeria específica adicionando vertical/horizontal (v/h também funciona) ao atributo no compositor, como neste exemplo: <div data-masonry-gallery="vertical">.

→ Este componente parece muito com o Tiles image gallery do Joe. É uma clonagem ou o quê?

Tenho usado o Tiles há um tempo e gosto muito dele. Então, sim, você poderia dizer que ele é fortemente influenciado por aquele . Mas muitas coisas diferem, então decidi compartilhá-lo. Abaixo está uma lista de algumas das diferenças.

• Sem dependências.
• Sem jQuery.
• Ordenação horizontal.
• Imagens pequenas não quebram o layout.
• Pré-visualização correta ao editar.
• Possibilidade de selecionar várias linhas com quebras de linha ao adicionar uma galeria.
• Uso da função da API decorateCookedElement em vez de decorateCooked.

Sugestões e melhorias são bem-vindas!

Imagens pequenas aparecerão na galeria, mas uma visualização lightbox não será criada. Esse é o comportamento padrão do Discourse. No entanto, é possível alterar o que é considerado uma imagem pequena modificando as configurações largura máxima da imagem e altura máxima da imagem. Os valores padrão são 690 px e 500 px, respectivamente.

Este componente usa a versão da API 0.8.42. Se você não atualizou desde maio de 2020, precisa fazer a atualização para usá-lo.

	Pré-visualização		theme-creator.discourse.org
	Repositório		discourse-masonry-image-gallery
	Guia de Instalação		Como instalar um tema ou componente de tema

[jrgong]

Componente incrível. Estou procurando uma substituição para a galeria de imagens em mosaico há um tempo!

O que você acha de adicionar uma opção de galeria automática para aplicá-la a todas as imagens? Basicamente, sempre que houver 3 ou mais imagens sem outros elementos entre elas, a visualização da galeria em mosaico será ativada automaticamente. (A Tiles Image Gallery tentou algo assim em sua ramificação auto-tiles)

[Heddson]

Obrigado!

Sim, vi essa branch. É um recurso realmente interessante. Não sei se a forma como foi implementada no Tiles funciona neste componente ou se será necessário algum outro código. Mas com certeza vou analisar!

[Heddson]

Se você tem Tiles instalado em seu site e deseja mudar para Masonry, precisa alterar o atributo dos divs da galeria para data-masonry-gallery em todas as suas postagens antigas de galeria. Isso é necessário se você quiser que suas postagens antigas de galeria continuem sendo renderizadas corretamente, mas não deseja ter ambos os componentes instalados.

Achei que seria útil compartilhar como fazer isso, já que fiz a mudança no meu próprio site. Talvez possa ajudar alguém.

A maneira mais óbvia seria editar as postagens manualmente. Isso funciona enquanto você não tiver muitas postagens para alterar, embora ainda possa ser trabalhoso encontrar todas elas. Mas não se preocupe, o data explorer está aqui para ajudar! Execute o seguinte SQL e você obterá exatamente o que precisa.

SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~ '%data-theme-tiles%'

Se houver muitas para editar manualmente, você pode usar o rake para substituir cada ocorrência da string. Para isso, você precisa fazer SSH no seu servidor e executar:

cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]

Você pode ler mais sobre essa solução neste post. Observe o aviso daquele post sobre o comando rake posts:remap:

@techAPJ

AVISO

Recomendamos fortemente que você faça um backup completo antes de prosseguir e tenha certeza de que sua substituição de string seja específica o suficiente para afetar apenas os locais desejados. Se essa substituição de string der errado, todas as postagens do seu site ficarão com aparência quebrada!

Provavelmente existem outras maneiras de fazer isso. Por exemplo, se preferir, você pode modificar o código dos componentes para que ele procure por ambos os atributos.

[Zup]

Excelente trabalho. Obrigado.

[bartv (Bart)]

@jrgong

Sempre que houver 3 ou mais elementos sem nenhum outro elemento entre eles, a visualização em galeria tipo masonry é ativada automaticamente.

Isso seria brilhante e muito mais amigável para o usuário! Existem planos para isso?

[Heddson]

Essa funcionalidade está quase pronta. Já modifiquei o código do Tiles, só preciso fazer mais alguns testes (com diferentes cenários/modificações do site). Vou tentar encontrar tempo para fazer isso em breve, mas deve ser adicionado dentro de uma semana. Se eu tivesse mais tempo .

[bartv (Bart)]

Fantástico, obrigado! Estamos ansiosos por isso

[lhkjacky (Jacky)]

Muito obrigado por criar um ótimo TC.

Agora posso substituir completamente o problemático “Tiles Image Gallery”.

@Heddson
Apenas por curiosidade, você tem planos de criar um TC semelhante para substituir o " Slick Image Gallery" também?

Slick Image Gallery

Responsive Carousel Galleries 12KB (Gzip) 2 http requests on initial load IE 11+ & modern browsers Github repository link https://github.com/hnb-ku/Discourse-Slick-image-gallery Desktop [Capturea1][Capturea] Video Mobile [Capturea2][Capturea4][Capturea3] Built using Ken Wheeler’s Slick library - MIT license “Free as in Bacon” How do I install this? You install this component just like any other theme. Follow the instructions in the official guide: Once you’re done…

O “Slick Image Gallery” apresenta todos os problemas semelhantes ao “Tiles Image Gallery”, como imagens pequenas quebrando o layout e a prévia não conseguindo carregar a galeria corretamente, etc.

[Heddson]

@lhkjacky

@Heddson
Só por curiosidade, você tem planos de criar um TC similar para substituir o " Galeria de Imagens Slick " também?

No momento, não tenho planos para fazer isso. Talvez mais tarde, se eu tiver tempo… Se for uma correção pequena, talvez eu possa fazer um pull request.

[bartv (Bart)]

Ei, eu estava me perguntando se você teria tempo para trabalhar no ‘modo automático’?

[Heddson]

Acabei de atualizar o componente com o recurso de galeria automática. Após a atualização, você pode ativá-lo nas configurações.

É possível especificar categorias e também definir o número mínimo de imagens necessárias (sem nenhum outro elemento ou linha em branco entre elas) para que uma galeria seja criada automaticamente.

[bartv (Bart)]

Incrível, vou experimentar isso!

[Heddson]

Avise-me se encontrar algo estranho!

[daemon (Alex)]

Funciona como uma mágica!

[UndecidedAdmin]

Só queria dizer que isso funciona perfeitamente logo de cara. Tenho tido problemas com os outros dois componentes mencionados, então isso é fantástico.

[Heddson]

Que ótimo saber disso!

Também adicionei o atributo grid (ou g) para um estilo de grade (apesar do nome do componente ) que define todas as linhas com altura fixa (baseada na imagem mais alta da linha). Pode ser útil se você tiver imagens com alturas quase iguais.

[jrgong]

@Heddson

Estamos testando a versão estável 2.8. O recurso auto enabled categories (categorias habilitadas automaticamente) não é acionado quando uma categoria específica é definida. Tentamos adicionar o slug da categoria e o ID da categoria. Quando auto enabled categories é deixado vazio, funciona.

[Heddson]

Hmm, isso é estranho. Funciona na minha versão 2.9.0.beta1, que é praticamente a mesma que a 2.8 estável. É o nome da categoria que deveria ser adicionado. Mas verei se consigo encontrar alguma coisa.

Obrigado pela informação!

[jrgong]

Deixe pra lá, esqueci de marcar a caixa