 |
Resumo | Adiciona um carrossel de imagens (ou múltiplos) a uma postagem |
 |
Repositório | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts |
 |
Guia de Instalação | Como instalar um tema ou componente de tema |
 |
Novo em Temas do Discourse? | Guia para iniciantes no uso de Temas do Discourse |
Instale este componente de tema
Este componente adiciona um carrossel de imagens com tecnologia Splide/Swiper em postagens. Carrosséis Swiper têm mais recursos, como miniaturas e animações diferentes.
Swiper:
Swiper com miniaturas ativadas:
Splide:
Há um botão adicionado à barra de ferramentas do compositor para adicionar carrosséis, com uma imagem de espaço reservado:
A marcação para carrosséis é a seguinte:
[wrap="Carousel" autoplay=true/false interval=<duração em ms>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
Para facilitar um processo mais simples de criação de carrosséis, clicar no botão na barra de ferramentas do compositor abrirá uma modal (obrigado ao Discourse GIFs TC!), onde você pode escolher a configuração do carrossel:
Você pode então adicionar mais imagens no [wrap].
As configurações (por carrossel) são as seguintes:
enable_thumbnails: Exibe as miniaturas das imagens abaixo do carrossel.
enable_loop: Faz o carrossel voltar ao início quando chega ao fim.
enable_thumbnail_loop: Faz a miniatura do carrossel voltar ao início quando chega ao fim.
Se você tiver poucas imagens, ativar esta configuração pode causar um movimento falho e instável no carrossel. É aconselhável ter mais imagens antes de ativar isso.
enable_autoplay: Permite que o carrossel toque sozinho.
autoplay_interval: O número de milissegundos a esperar antes de reproduzir o próximo slide. Usado em conjunto com enable_autoplay. Se você deixar em branco, o padrão será 5000.
Configurações
As configurações (globais) são as seguintes:
carousel_software: Qual software os carrosséis usarão (Swiper/Splide); Swiper é preferido e é o padrão.
image_carousel_placeholder: A imagem padrão para o carrossel quando criado. O padrão é uma imagem regular de espaço reservado incluída:
show_pagination_buttons: Exibe pontos de paginação abaixo do carrossel para fornecer navegação mais fácil entre as imagens.
image_transition_animation: [Apenas para Swiper] Animação das imagens transitando para a próxima; o padrão é ‘slide’, as opções são:
- cube
- fade
- cards
- flip
- slide (padrão)
pagination_button_color: A cor dos pontos de paginação; deixar em branco usa os padrões do Swiper/Splide.
active_pagination_button_color: A cor do ponto de paginação quando atualmente nesse slide; deixar em branco usa os padrões do Swiper/Splide.
Notas
O suporte atual para Splide neste TC não permite miniaturas e animações de transição. Ficarei feliz em aceitar PRs para miniaturas Splide (que são mais complicadas).
Se alguém quiser implementar miniaturas verticais, tenho código no repositório para isso (comentado) que não funciona muito bem. Ficarei feliz em aceitar PRs para adicionar isso (ou para expandir a implementação atual).
Mais uma coisa, estou atualmente explorando uma maneira de adicionar as imagens do carrossel dentro da modal de criação, mas estou enfrentando um problema descrito aqui. Ficarei feliz se alguém puder responder lá!
Agradecimentos
Agradecimentos a @Arkshine pela inspiração aqui. Entendo que ele criou o repositório aqui (no entanto, escolhi não me referir a esse repositório para este TC).
Espero que isso seja útil para alguém!
Eu ainda não postei porque estou trabalhando na visualização do editor rico (prosemirror) e leva tempo para entender todas essas coisas novas.