 |
Resumen | Añade un carrusel de imágenes (o varios) a una publicación |
 |
Repositorio | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts |
 |
Guía de Instalación | Cómo instalar un tema o componente de tema |
 |
¿Nuevo en Temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse |
Instalar este componente de tema
Este componente añade un carrusel de imágenes con tecnología Splide/Swiper en las publicaciones. Los carruseles Swiper tienen más funciones como miniaturas y diferentes animaciones.
Swiper:
Swiper con miniaturas habilitadas:
Splide:
Se añade un botón a la barra de herramientas del compositor para añadir carruseles, con una imagen de marcador de posición:
El marcado para los carruseles es el siguiente:
[wrap="Carousel" autoplay=true/false interval=<duración en ms>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
Para facilitar un proceso más sencillo de creación de carruseles, al hacer clic en el botón de la barra de herramientas del compositor se abrirá una ventana modal (¡gracias a Discourse GIFs TC!), donde podrá elegir la configuración del carrusel:
A continuación, puede añadir más imágenes en el [wrap].
Los ajustes (por carrusel) son los siguientes:
enable_thumbnails: Muestra las miniaturas de las imágenes debajo del carrusel.
enable_loop: Hace que el carrusel se repita al principio cuando llega al final.
enable_thumbnail_loop: Hace que la miniatura del carrusel se repita cuando llega al final.
Si tiene muy pocas imágenes, habilitar esta opción puede provocar un movimiento entrecortado y errático en el carrusel. Se recomienda tener más imágenes antes de habilitarla.
enable_autoplay: Permite que el carrusel se reproduzca por sí solo.
autoplay_interval: El número de milisegundos a esperar antes de reproducir la siguiente diapositiva. Se utiliza junto con enable_autoplay. Si lo deja en blanco, se establecerá por defecto en 5000.
Ajustes
Los ajustes (globales) son los siguientes:
carousel_software: Qué software utilizarán los carruseles (Swiper/Splide); Swiper es preferido y es el predeterminado.
image_carousel_placeholder: La imagen predeterminada para el carrusel cuando se crea. Por defecto, es una imagen de marcador de posición normal incluida:
show_pagination_buttons: Muestra puntos de paginación debajo del carrusel para facilitar la navegación entre imágenes.
image_transition_animation: [Solo para Swiper] Animación de las imágenes al pasar a la siguiente; el valor predeterminado es ‘slide’, las opciones son:
- cube
- fade
- cards
- flip
- slide (predeterminado)
pagination_button_color: El color de los puntos de paginación; si se deja en blanco, se utilizan los valores predeterminados de Swiper/Splide.
active_pagination_button_color: El color del punto de paginación cuando se encuentra en esa diapositiva; si se deja en blanco, se utilizan los valores predeterminados de Swiper/Splide.
Notas
El soporte actual para Splide en este TC no permite miniaturas ni animaciones de transición. Estaré encantado de aceptar PR para miniaturas de Splide (que son más complicadas).
Si alguien quiere implementar miniaturas verticales, tengo código en el repositorio para ello (comentado) que no funciona muy bien. Estaré encantado de aceptar PR para añadir esto (o basarme en la implementación actual).
Una cosa más, actualmente estoy explorando una forma de añadir las imágenes del carrusel dentro de la ventana modal de creación, pero me enfrento a un problema descrito aquí. ¡Me alegraría si alguien pudiera responder allí!
Gracias
Gracias a @Arkshine por la inspiración aquí. Entiendo que ha creado el repositorio aquí (sin embargo, elegí no referirme a ese repositorio para este TC).
¡Espero que esto sea útil para alguien!
Aún no he publicado porque estoy trabajando en la vista del editor enriquecido (prosemirror) y lleva tiempo entender todas estas cosas nuevas.