A theme component to that creates responsive grid galleries in topics if the markup matches a certain pattern.
click for full size
This theme component does not have any color / background styles in it. It will inherit the current theme’s styles.
Here’s the theme component running on a different theme:
This theme component also maintains the default Discourse lighbox behavior, this means that clicking any of the images will open them in the native lightbox viewer.
This theme will not have ANY effect on lightboxs that don’t match the pattern above.
The quickest way to create a grid is
1- upload multiple images at once using the default Discourse uploader
2- highlight the code for the images in the composer
3- click on the gallery button:
The rest is automatic.
Extra details about the markup
This being a theme component (as opposed to being a plugin) my options were a bit limited.
If the html structure follows this pattern (For now)
<div dir="rtl"> <!-- line break--> ![nice house|529x500]![another house|830x500] <!-- uploaded images... --> </div>
Or, if your app uses a right to left language:
<div dir="ltr"> <!-- line break--> ![nice house|529x500]![another house|830x500] <!-- uploaded images... --> </div>
A responsive grid will be created automatically with all the images in the
If your app uses a right-to-left language, you can use the opposite version. or
<div dir="ltr"> and the rest is the same
How does it work?
Masonry creates the grid layout and ImagesLoaded makes sure Masonry is not initialized untill all the images have fully loaded.
I ended up binding the script to the ajaxComplete thanks to @Mittineague’s help here:
Help appreciated if any of this is possible under site customization:
1- whitelist a class for the gallery instead of the
dir hack I’m using now. Ideally I would really like to either use
<div class="m_gallery"></div> or - and this is a stretch goal - use
3- find a more targeted way to fire the script consistently in topic pages. ajaxComplete is the only thing I found that works, but it fires multiple times in each page reload. (
api.onPageChange does not work for me when loading topic pages but works great in the topic list)