Galeria de Imagens em Alvenaria

Concordo com o que você está dizendo. Não sou um desenvolvedor do Discourse, então não sei o que é possível ou não.

2 curtidas

O bug do GitLab foi corrigido. Obrigado por reportá-lo @Jagster! :star:

2 curtidas

Só por curiosidade, como funciona esta parte:

    &::before,
    &::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }

Consigo ver que muda as coisas de lugar, mas não entendo completamente :thinking: 2 pseudo-elementos, sem nenhuma largura, ambos posicionados na segunda posição…?

Olá @chapoi!

Esses dois pseudo-elementos existem para evitar que as colunas se mesclem. Eles não têm largura, pois não são para serem vistos, mas na imagem abaixo eles são representados com linhas azuis.

Sem eles, as colunas poderiam começar a se mesclar se as alturas das colunas diferissem muito.

Os elementos 3, 6 e 9 na imagem acima estão definidos para a coluna 3 (com a propriedade order definida como 3). Mas se removêssemos os pseudo-elementos, a coluna 3 começaria diretamente abaixo da coluna 2 (mesmo com order 3). Veja a imagem abaixo. A “Coluna 3” está destacada em verde.

Isso ocorre porque o flexbox verifica se há algum espaço sobrando na coluna imediatamente anterior (em comparação com a coluna mais alta). Se houver espaço suficiente para acomodar o primeiro elemento, ele o inserirá lá.

No entanto, os pseudo-elementos agem como colunas, então o flexbox verificará o pseudo-elemento (em vez da coluna real) em busca de espaço vazio. E como os pseudo-elementos têm 100% de altura, o flexbox não encontrará espaço vazio e, portanto, a coluna 3 começará onde queremos que ela comece.

Espero que tenha sido claro e compreensível. :sweat_smile:

2 curtidas

Solução muito inteligente!

Infelizmente não fui eu que inventei isso. :grin:

Um dos usuários no fórum que eu hospedo levantou que, ao girar a tela de um dispositivo móvel (tablet, telefone), as imagens não são ajustadas corretamente à nova resolução. Isso acontece quando as imagens têm uma proporção diferente (muito alta) da tela. Portanto, algo está faltando na parte superior e inferior da imagem. É possível otimizar isso? Não tenho ideia se isso é possível ou facilmente possível.

Obrigado pelo feedback! Sim, ele não atualiza ao virar o dispositivo. Não encontrei uma solução para isso na época, mas vou investigar novamente.

1 curtida

Infelizmente, ainda não encontrei uma maneira boa o suficiente de lidar com um dispositivo invertido.

Outra coisa, caso vocês não tenham visto o anúncio, as grades de imagem foram adicionadas ao core. Não funciona exatamente como este componente de tema, mas parece ótimo e é incrível tê-lo no core. Verifiquem este tópico:

6 curtidas

Criei uma postagem com seis fotos, usando as tags de galeria de imagens masonry. Até aí, tudo bem. Em seguida, adicionei um link para cada uma, para que, quando um usuário clicar na imagem, ele seja levado para outra postagem. Quando fiz isso, ainda parecia bom no Onebox, mas a postagem real perdeu seu formato masonry e apenas exibiu as imagens sequencialmente.

Isso é um bug ou apenas algo que não funcionará por causa dos links?

1 curtida

Olá @Octoberon! Não foi projetado para funcionar com links/onebox, então esse provavelmente é o problema. Foi projetado para abrir uma caixa de luz quando você clica na imagem. Embora eu tenha tido um pedido semelhante há um tempo atrás… :thinking:

A propósito, como você adicionou o link à imagem?

2 curtidas

Sim, eu me perguntei se seria esse o caso. Para criar os links, eu apenas destaquei o texto da imagem e usei o botão de hiperlink usual no editor para colar um link para um post diferente no mesmo fórum.

1 curtida

No tópico da grade de imagens, alguém mencionou ocultar o botão do compositor. Talvez isso já tenha sido resolvido com CSS ou algo assim, mas pensei que poderia ser de interesse para outras pessoas também. Talvez você não precise de um botão se tiver a criação automática habilitada.. :slight_smile: . De qualquer forma, a opção de ocultar o botão foi adicionada.

1 curtida

Mais alguém está tendo problemas com o recurso automático? Testamos com as versões estável 3.1 e 3.2 e em ambos os casos não está funcionando e nenhuma galeria de alvenaria é gerada, apesar das categorias estarem configuradas corretamente.

1 curtida

Olá @jrgong! Estranho, parece que funciona para mim. Você tem um link para uma postagem que não está funcionando?

1 curtida

Não consegui ver essa postagem porque é preciso fazer login. Desculpe.

Acho que em algum momento eu tinha um login para esse site de staging (certo?), mas de qualquer forma não o encontro agora.

1 curtida

olá\n\ndesculpe, este link funciona: 350ml Challenge Just4Fun 🚀 Auf geht's 🚀 [Finale] - #91 von Hoppsi - Contests - Forum | Cannabisanbauen.net

2 curtidas

Suponho que você tenha habilitado automaticamente essa categoria específica e definido o número mínimo de imagens necessárias como 3 (já que você tem três imagens na postagem).

Notei que havia uma linha vazia entre as imagens. Você habilitou a configuração linha vazia automática?

1 curtida

Sim, ambas as configurações foram ativadas o tempo todo

1 curtida

Não foi possível reproduzir este problema. A única coisa que consigo pensar é se talvez haja outro componente de tema (ou plugin) instalado que não funcione bem com a Galeria de Imagens Masonry.

1 curtida