chapoi announced the release of a new Carousel Mode for Discourse galleries, designed to keep images centered and prevent awkward cropping common in the classic masonry grid. Users can toggle between modes via the Rich Text Editor or by editing markdown directly. The feature is built from scratch as a Glimmer component (sam), replacing the need for many third-party plugins like the Discourse Post Image Carousel (nathank).
Key details and community feedback include:
Functionality: Mobile swiping is supported, though keyboard navigation requires future improvements (chapoi).
Capacity: The carousel handles 20-30 images effectively, though user engagement may drop with larger sets (sam).
Limitations: The carousel has a fixed height to ensure smooth sliding, meaning dimensions cannot be changed directly in the post without custom CSS (chapoi). Additionally, links on images and text captions between images do not function correctly in carousel or grid modes (gassim, shortmort37).
User shortmort37 highlighted a migration issue where attachment comments (captions) were lost when applying grid modes. They eventually found a workaround by scripting the grid to exclude images with captions, a solution chapoi acknowledged as a reasonable compromise given the layout’s design constraints.
Do your pictures get lost within the gridded photo patchwork? Are they awkwardly cutting off crucial bits? Would you like them to be center stage? Despair no more – the feature you didn’t know you wanted has landed!
As the more observational amongst you may have already noticed, we have added a new gallery mode. You can now choose between the classic (masonry) grid and the new, focussed carousel mode. Switching is as simple as selecting the option in the top-right corner of the gallery in the RTE[1] :
We’re aware the keyboard navigation can be finicky; we’ll improve it in a future update
On mobile, swiping gestures are supported – so technically Discourse could become the next dating app[2], truly cementing our “anything goes” flexibility.
Nice to see images getting some more love in Discourse!
I literally had the thought to do this for the MVP of a dating project a few years back (I didn’t end up doing it ). And, let’s be honest, could it really be worse than what’s already out there?
I am so happy to learn that Discourse has a carousel mode, which lead me to learn that it has a grid (gallery) mode!
I’m a Discourse newbie, still working out the kinks in my migration from phpBB. One of the issues for me has been the provision in phpBB for attachment comments, for which there is no similar provision in Discourse. However, running a ruby script in the import container, I’m able to extract phpBB attachment comments from the mysql database, and assign them - when present - to uploads in Discourse, italicized as shown below:
I love that a post can be gridded! But the upload comments bear no apparent relation to the upload after applying. What’s curious, is that while text from the post (intended as captions) appear here in grid mode, they don’t appear at all in carousel mode.
I suppose this is a feature request, and should be moved there; because in general, I think the absence of a way to bind a comment to an upload is a serious omission. And it’s particularly manifest, when you grid an existing post.
OK, I’ve added what I think is a reasonable compromise. I ran a ruby script that grids sets of uploads without captions (two uploads or more), and ends the gridding when the first caption is encountered:
I’m happy with this outcome. Gridding certainly reduces the amount of scrolling, and I get to keep my captions. I’m a happy camper! I learned today about a most excellent feature of Discourse. Thanks!
Thanks for this new feature! It will come in handy in some of our posts.
I have a question please.. No matter the size of the images, the grid carousel will remain the same. Is it possible to control the dimensions of the carousel directly from the post (or does it to be done through theme/component CSS changes)?
I also assume that links on images no longer work?
Hello – yes, the carousel has a fixed height to avoid changes when sliding through different sized images. Any change will have to be done via custom CSS.