# Masonry Image Gallery **URL:** https://meta.discourse.org/t/masonry-image-gallery/188315 **Category:** Theme component **Created:** [April 27, 2021, 11:53pm UTC](https://meta.discourse.org/t/masonry-image-gallery/188315 "2021-04-27T23:53:25Z") **Posts on this page:** 1 **Showing post:** 1
### Author: ![Heddson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heddson/32/96742_2.png) [@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: ![desktop_view](https://global.discourse-cdn.com/meta/original/4X/c/3/2/c32fff33a8a463b11165681f0d6b10c50d0a1217.jpeg) # Mobile view: ![mobile_view](https://global.discourse-cdn.com/meta/original/4X/f/2/1/f2100322eec6d23c9c82d35722a87399b41bd6da.jpeg) # 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. ![edit_view](https://global.discourse-cdn.com/meta/original/4X/6/f/f/6ffb92bf25bd5f459bf56550ac85c45d0d6eb0ac.jpeg) > 🤔 → 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. ![order_comparison](https://global.discourse-cdn.com/meta/original/3X/4/1/415af5e0707830c038ef5c5997cfdefdfa9e7f33.jpeg) 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) | --- _[View the full topic](https://meta.discourse.org/t/masonry-image-gallery/188315)._