### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [April 27, 2021, 11:53pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/1 "2021-04-27T23:53:26Z")
> ⚠ This feature is now built-in to Discourse core, see [the announcement](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664) regarding image grids in Discourse.
This theme component adds a responsive masonry-style image gallery with customizable ordering.
Desktop view:
#
Mobile view:
#
When clicking on an image it will open with the default lightbox viewer.
You add the gallery by clicking on the grid icon and then adding your images. It also works by first selecting the uploaded images and then clicking the icon.
> 🤔 → So what do you mean with customizable ordering?
The images can be ordered horizontally (from left-to-right) or vertically. The horizontal order is ideally for images from magazines, comic books or similar. Also, when you press next in the lightbox view the correct image will show.
The images below illustrates the difference. The one to the right has horizontal ordering.
The default order is horizontal, but can be changed in the settings. It’s also possible to change the order of a specific gallery by adding _vertical/horizontal_ (v/h works as well) to the attribute in the composer like this ``.
> 🧐 → This component looks a lot like Joe’s [Tiles image gallery](https://meta.discourse.org/t/tiles-image-gallery/81950). Is this a clone or what?
I’ve been using Tiles for a while and like it a lot. So yeah, you could definitely say that it’s heavily influenced by that one 😉 . But a lot of stuff differ, so decided to share it. Below is a list of some of the things that are different.
- No dependencies.
- No jquery.
- Horizontal ordering.
- Small images won’t break the layout.
- Correct preview when editing.
- Possible to select multiple rows with line breaks when adding a gallery.
- Using the API function decorateCookedElement instead of decorateCooked.
Suggestions and improvements are welcome!
#
> ℹ Small images will show up in the gallery, but a lightbox view will not be created. That’s the default Discourse behavior. It’s however possible to change what’s considered a _small image_ by modifying the settings `max image width` and `max image height`. The default values are 690 px and 500 px, respectively.
> ℹ This component uses the API version 0.8.42. If you haven’t updated since May 2020, you need to do update in order to use it.
#
| | | | |
| --- | --- | --- | --- |
| 🕶 | **Preview** | | [theme-creator.discourse.org](https://theme-creator.discourse.org/theme/heddson/masonry-image-gallery) |
| 🛠 | **Repository** | | [discourse-masonry-image-gallery](https://gitlab.com/silentboatman/discourse-masonry-image-gallery.git) |
| 📖 | **Install Guide** | | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [April 28, 2021, 9:17pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/2 "2021-04-28T21:17:53Z")
Awesome component. I have been looking for a tiles image gallery replacement for a while!
What are your thoughts on adding an auto-gallery option to apply it to all images? Basically, whenever there are 3 or more without any other elements between each other, the masonry gallery view is enabled automatically. (Tiles Image Gallery tried something there in their [auto-tiles branch](https://github.com/discourse/Discourse-Tiles-image-gallery/tree/auto-tiles))
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [April 29, 2021, 10:29am UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/3 "2021-04-29T10:29:24Z")
Thanks!
Yeah, I saw that branch. That’s a really interesting feature. Don’t know if the way it’s implemented in Tiles works on this component, or if some other code is needed. But will definitely look into it!
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [May 2, 2021, 12:14am UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/4 "2021-05-02T00:14:00Z")
If you have Tiles installed on your site and want to switch to Masonry, you need to change the attribute of the gallery divs to _data-masonry-gallery_ on all of your old gallery posts. That’s if you want your old gallery posts to still render correctly, but don’t want to have both components installed.
Thought I share how you could do that, since I made the switch on my own site. Maybe it can be of some help to someone.
The most obvious way would be to edit the posts manually. That works as long as you don’t have too many posts you need to change, though it could still be a pain to find every posts. But don’t worry, [data explorer](https://meta.discourse.org/t/data-explorer-plugin/32566) to the rescue! Run the following SQL and you’ll get exactly what you need.
```
SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~'%data-theme-tiles%'
```
#
If there’s too many to edit manually, you could use `rake` to replace every string. To do that, you need to SSH into your sever and run:
```
cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]
```
You can read more about that solution [on this post](https://meta.discourse.org/t/replace-a-string-in-all-posts/48729). Please note the warning from that post about the `rake posts:remap` command:
> [@Replace a string in all posts](https://meta.discourse.org/t/replace-a-string-in-all-posts/48729/1):
>
> > ## ⚠ **WARNING**
> >
> > We _strongly_ recommend you take a full backup before proceeding, and make _sure_ your string replacement is specific enough to affect _only_ the places you want it to. If this string replacement goes wrong, every post on your site will look broken!
#
There are most likely also other ways to do it. For example, if you like to you could modify the components code so that it looks for both attributes.
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [May 2, 2021, 1:44am UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/5 "2021-05-02T01:44:53Z")
Excellent work. Thank you.
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [May 12, 2021, 8:11am UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/6 "2021-05-12T08:11:53Z")
> [@jrgong](#):
>
> whenever there are 3 or more without any other elements between each other, the masonry gallery view is enabled automatically.
This would be brilliant and much more user friendly! Are there any plans for this?
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [May 12, 2021, 8:46am UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/7 "2021-05-12T08:46:06Z")
That feature is kind of finished. Have modified the code from Tiles, just need to do some more tests (with different scenarios/site modifications). Will try to find the time to do it soon, but should be added within a week. If I only had more time 🙂 .
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [May 12, 2021, 8:50am UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/8 "2021-05-12T08:50:47Z")
Fantastic, thanks! We’re looking forward to it 🙂
---
### Author:  [@lhkjacky](https://meta.discourse.org/u/lhkjacky)
#### Post date: [May 12, 2021, 3:57pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/9 "2021-05-12T15:57:10Z")
Thank you very much for creating a great TC. 🥰
Now I can replace the problematic “Tiles Image Gallery” TC completely. 🎉 🎊 🎊 🎊
@Heddson
Just curious, do you have plan to create a similar TC to replace " [Slick Image Gallery](https://meta.discourse.org/t/slick-image-gallery/81952)" as well ? 😘
> [@Slick Image Gallery](https://meta.discourse.org/t/slick-image-gallery/81952):
>
> Responsive Carousel Galleries 12KB (Gzip) 2 http requests on initial load IE 11+ & modern browsers [Github repository link](https://github.com/hnb-ku/Discourse-Slick-image-gallery) https://github.com/hnb-ku/Discourse-Slick-image-gallery Desktop Video Mobile Built using [Ken Wheeler](https://github.com/desandro)’s [Slick](http://kenwheeler.github.io/slick/) library - [MIT license](https://github.com/kenwheeler/slick/blob/master/LICENSE) “Free as in Bacon” How do I install this? You install this component just like any other theme. Follow the instructions in the official guide: Once you’re done…
The “Slick Image Gallery” have all the problems similar to “Tiles Image Gallery”, such as small image break the layout and preview can’t slow gallery correctly, etc.
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [May 13, 2021, 11:10pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/10 "2021-05-13T23:10:14Z")
> [@lhkjacky](#):
>
> @Heddson
> Just curious, do you have plan to create a similar TC to replace " [Slick Image Gallery](https://meta.discourse.org/t/slick-image-gallery/81952)" as well ?
I don’t have any plans to do that at this time. Maybe later if I have the time.. If it’s a small fix, I could maybe do a pull request.
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [May 24, 2021, 2:41pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/11 "2021-05-24T14:41:50Z")
Hey, I was wondering if you had time to work on the ‘automatic mode’?
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [May 24, 2021, 4:58pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/12 "2021-05-24T16:58:38Z")
I just updated the component with the auto gallery feature. After you update, you can enable it in the settings.
It’s possible to specify categories and also set the minimum number of images required (without any other element or empty line between them) for a gallery to be automatically created.
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [May 24, 2021, 5:27pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/13 "2021-05-24T17:27:28Z")
Amazing, I’ll go try that out!
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [May 24, 2021, 5:32pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/14 "2021-05-24T17:32:17Z")
Let me know if you find anything strange!
---
### Author:  [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [May 24, 2021, 5:43pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/15 "2021-05-24T17:43:13Z")
Works like a charm! 👍
---
### Author:  [@UndecidedAdmin](https://meta.discourse.org/u/UndecidedAdmin)
#### Post date: [May 28, 2021, 2:15pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/16 "2021-05-28T14:15:13Z")
Just wanted to say this works perfectly out of the box, I’ve been having trouble with the other two components mentioned so this is fantastic. 🥳
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [May 28, 2021, 10:29pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/17 "2021-05-28T22:29:14Z")
That’s great to hear!
I also added the div attribute _grid_ (or _g_) for a grid type of style (despite the name of the component 😄) that sets every row to a fixed height (as the rows highest image). Could be nice if you have images with almost the same height.
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [February 3, 2022, 8:09am UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/18 "2022-02-03T08:09:44Z")
@Heddson
We are currently testing 2.8 stable. The `auto enabled categories` feature doesn’t trigger when a specific category is defined. We tried to add category slug and category ID. When `auto enabled categories` is left empty, it works.
---
### Author:  [@Heddson](https://meta.discourse.org/u/Heddson)
#### Post date: [February 3, 2022, 10:44am UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/19 "2022-02-03T10:44:52Z")
Hmm that’s strange. It works on my 2.9.0.beta1 and that’s pretty much the same as 2.8 stable. It’s the category name that should be added. But I will see if I can find anything.
Thanks for the info!
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [February 3, 2022, 12:58pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315/20 "2022-02-03T12:58:09Z")
Never mind, forgot to set checkbox 🤦♂️
[Next page](https://meta.discourse.org/t/masonry-image-gallery/188315.md?page=2)