A theme component to that creates responsive grid galleries in topics if the markup matches a certain pattern.
Repo: GitHub - hnb-ku/discourse-masonry-gallery
Samples:
Desktop:
tablet:
Mobile:
click for full size
About
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
Usage
This being a theme component (as opposed to being a plugin) my options were a bit limited.
If the html structure follows this pattern
<div dir="rtl">
<!-- line break-->
![nice house|529x500]![another house|830x500] <!-- uploaded images... -->
</div>
What this means is that if you want to create a grid gallery in a topic you add:
<div dir="rtl">
and then a add a line break using Enter
and then upload the images in bulk using the default Discourse uploader
and then close the div by adding
</div>
below your images. The rest is automatic.
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
This theme will not have ANY effect on lightboxs that don't match the pattern above.
How does it work?
Most the weight lifting is done by the Discourse upload process, this is complimented by David Desandro’s Masonry and ImagesLoaded libraries - ( MIT license )
I ended up binding the script to the ajaxComplete thanks to @Mittineague’s help here:
I realize it’s a bit blunt but it’s the only thing I managed to get working consistently in topic pages
TODO
Help appreciated if any of this is possible under site customization:
1- white list a class for the gallery instead of the dir
hack I’m using now.
2- add a button to the composer - (Thank you @Dax for the script and @cpradio for the translation fix )
3- find a less blunt way to fire the script consistently in topic pages (api.onPageChange
does not work for me when loading topic pages but works great in the topic list)