Controlador deslizante de comparação de imagens

Personalização Componente de tema
22

Existe alguma maneira de isso funcionar com fotos que não foram carregadas? Com fotos inseridas via links?

23

Olá, gostaria de relatar um bug recente com este componente de tema.

Uma mensagem de erro exibida em um site indica que as postagens podem não ser exibidas corretamente devido a um problema com um 'Image Comparison Slider' e sugere atualizá-lo, reconfigurá-lo ou desativá-lo. (Legenda gerada por IA)
Uma mensagem de erro exibida em um site indica que as postagens podem não ser exibidas corretamente devido a um problema com um 'Image Comparison Slider' e sugere atualizá-lo, reconfigurá-lo ou desativá-lo. (Legenda gerada por IA)1200×207 24.9 KB

Visível aqui:

Última versão do Image comparison slder

Versão do Discourse: 3.5.0.beta1-dev

(402ec6bf5c)

Obrigado pelo seu trabalho
Stéphane.

2 curtidas
24

Atualizei este componente para atender aos novos padrões da API:

2 curtidas
25

Bom trabalho!

Não quero sobrecarregá-lo… mas… você já deu uma olhada nisso usando o novo editor de texto rico?

1 curtida
26

Eu não, há algum problema com ele?

2 curtidas
27

Sim, infelizmente não funciona. Vejo isto depois de clicar no botão de imagem de comparação quando o editor de rich text está ativado:

CleanShot 2025-09-24 at 10.30.26@2x
CleanShot 2025-09-24 at 10.30.26@2x1586×1374 88.3 KB

1 curtida
28

Não tenho certeza de como fazer isso funcionar, parece que o editor de rich text lida com HTML incorretamente. Imagino que você veria o mesmo problema em qualquer componente semelhante, como uma galeria de imagens.

2 curtidas
29

Ei Joseph, você se importaria se eu tentasse consertar o componente?

2 curtidas
30

Você não teria tempo para dar uma olhada nisso ou aceitar a oferta do @Arkshine? :smiley:

1 curtida
31

Desculpe, esqueci de responder. Eu adoraria que alguém com mais conhecimento tentasse isso, a instância do Discourse à qual tenho acesso não tem o rich test ativado e eu não tenho a capacidade de ativá-lo, então não consigo realmente testar isso :thinking: obrigado por oferecer!

3 curtidas
32

OK, obrigado por me avisar, vou tentar. :+1:

3 curtidas
33

Pessoal, finalmente tive tempo para trabalhar nisso.
Espero que ainda haja algum interesse nesta TC!

O PR reformula a TC com as seguintes funcionalidades:

  • Zoom e panorâmica (roda do mouse, beliscar e controles na imagem)
  • Visualização em tela cheia
  • Abrir as imagens originais em tamanho completo no lightbox
  • Rótulos opcionais de antes/depois com posicionamento configurável
  • Legenda opcional
  • Vários estilos de alça (linha, fina, círculo, puxador) e cor personalizada para a alça
  • Editar os sliders diretamente no editor de texto rico ou com markdown
  • Acessível por teclado (setas movem o divisor, +/-/0 fazem zoom)
  • Restringir quem pode inserir sliders por grupo

O formato do markdown foi alterado usando a tag [wrap]. A compatibilidade retroativa é garantida.
É necessária a versão 2026.6.0-latest.

É compatível com dispositivos móveis e com RTL. No entanto, não sou especialista em UX e não pude testar muito em dispositivos móveis ou iOS.

Se quiser testar separadamente, você pode usar:

  • URL: https://github.com/arkshine/discourse-image-comparison-slider
  • branch: modernize-with-rte
    (Recomendo não editar os sliders da versão anterior para não alterar o formato do markdown)
5 curtidas