Discourse Post Image Carousel

Theme component
1
:information_source: Summary Adds an image carousel (or multiple) to a post
:hammer_and_wrench: Repository GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This component adds a Splide/Swiper-powered image carousel in posts. Swiper carousels have more features like thumbnails and different animations.

Swiper:

image
image1064×807 103 KB

Swiper with thumbnails enabled:

image
image798×852 105 KB

Splide:

image
image1090×808 106 KB

There is a button added to the composer toolbar to add carousels, with a placeholder image:

image
image943×421 16.9 KB

The markup for carousels is as such:

[wrap="Carousel" autoplay=true/false interval=<duration in ms>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]

To facilitate a simpler process of creating carousels, clicking on the button in the composer toolbar will open a modal (thank you Discourse GIFs TC!), where you can choose the configuration of the carousel:

image
image624×772 20.6 KB

You can then add more images in the [wrap].

The (per-carousel) settings are as follows:

enable_thumbnails: Show the thumbnails of the images below the carousel.

enable_loop: Make the carousel loop to the start when it reaches the end.

enable_thumbnail_loop: Make the carousel’s thumbnail loop when it reaches the end.

:warning: If you have too few images, enabling this setting can causes a glitchy, jerky movement with the carousel. It is advised to have more images before enabling this.

enable_autoplay: Let the carousel play by itself.

autoplay_interval: The number of milliseconds to wait before playing the next slide. Used in conjunction with enable_autoplay. If you leave this blank, it will default to 5000.

Settings

The (global) settings are as follows:

carousel_software: Which software the carousels will use (Swiper/Splide); Swiper is preferred and is the default.

image_carousel_placeholder: The default image for the carousel when made. It defaults to an included regular placeholder image:

Light-placeholder-image-landscape_png_
Light-placeholder-image-landscape_png_1200×800 3.18 KB

show_pagination_buttons: Show pagination dots below the carousel to provide easier navigation between images

image_transition_animation: [Only for Swiper] Animation of the images transitioning to the next; defaults to ‘slide’, options are:

  • cube
  • fade
  • cards
  • flip
  • slide (default)

pagination_button_color: The color of the pagination dots; leaving this blank uses Swiper/Splide defaults.

active_pagination_button_color: The color of the pagination dot when currently at that slide; leaving this blank uses Swiper/Splide defaults.

Notes

The current support for Splide on this TC does not allow thumbnails and transition animations. I will be happy to accept PRs for Splide thumbnails (which are more complicated).

If anyone would like to implement vertical thumbs, I have code in the repo for that (commented out) which doesn’t work very well. I’m happy to accept PRs to add this (or build on the current implementation).

One more thing, I’m currently exploring a way to add the carousel’s images within the creation modal, but am facing an issue described here. I’ll be glad if someone could respond over there!

Thanks

Thanks to @Arkshine for the inspiration here. I understand that he has created the repo here (however, I chose not to refer to that repo for this TC).

I hope this will be useful to someone!

8 Likes
2

Actually, it’s a work in progress… :rofl: I did not post yet because I’m working on the rich editor (prosemirror) view and It takes time to understand all of this new stuff. I was planning to give some news soon.. :sweat_smile:

Here is what i’m working on:

2 Likes