Responsive Grid Galleries!

10KB (Gzip)
3 http requests on initial load
IE 11+ & modern browsers

Github repository link

https://github.com/hnb-ku/Discourse-Tiles-image-gallery


![Capture: 457x500, 75%](/images/81950/6dOZGJ29JQ0zYifAkPkBVUQVVLG.jpg)![Capture2: 459x500, 75%](/images/81950/jCyP4e1Eth89S3bDzHzV13BaydQ.jpg)
![Capture3: 260x499, 75%](/images/81950/oZJJiJt0QhmgLdrmIYLhNH14huw.jpg)![Capture44: 250x500, 75%](/images/81950/xqj6otG8X4HdsAV8FMeec6m9yuO.jpg)![Capture4: 250x500, 75%](/images/81950/wlWc2Jbj85A51wa2thzoFz7qDj9.jpg)

Built using David Desandro’s open source Masonry and ImagesLoaded libraries - MIT license

” ... released under the MIT license. Have at it.”


How do I install this?

You install this component just like any other theme. Follow the instructions in the official guide:

https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682

Once you’re done, simply add the component to your current theme. Done!


How do I use this?

This component adds a button to the composer.

Untitled: 690x278

So all you have to do is:

1- Upload a bunch of images using the default Discourse upload button then highlight the code:

Capture6: 497x500

2- Click the gallery button.

You will get a static preview of the the selected images in the preview pane:

Capture8: 690x417

Done!


Anything else I need to know?

This 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:

Capture5: 525x500

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.

Capture9: 690x478

Can I use both Slick and Tiles at the same time?

You better believe it! :smile:

Capture999: 411x500

This is possible by making both slick and tiles components of a theme.

Like this:

Capture: 439x500

You can then make “my theme” in the example above the default theme or make it user-selectable and it would include both Slick and Tiles.


A big thank you to everyone that helped along the way: :yum:

@Dax - Composer button
@cpradio - Button translations
@Mittineague - ajaxComplete handler
@Simon_Cossar - api.onPageChange handler
@vinothkannans - Topic page url regex
@sam - adding data-theme-* to whitelisted attributes


Bug reports / Suggestions / PRs welcome. :wine_glass: