# Tiles Image Gallery
**URL:** https://meta.discourse.org/t/tiles-image-gallery/81950
**Category:** Theme component
**Tags:** deprecated
**Created:** [March 2, 2018, 6:56am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950 "2018-03-02T06:56:34Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [March 2, 2018, 6:56am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/1 "2018-03-02T06:56:34Z")
⚠ This component is deprecated. Discourse now has a built-in tiled gallery feature:
> [@Introducing image grids in posts](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664):
>
> If you have many images in a Discourse post, you can now have them automatically arranged into a nice grid. All you need to do is wrap them in [grid] ... [/grid] tags, and the images will be neatly arranged. This is a core feature as of [this commit](https://github.com/discourse/discourse/commit/f89b5680cb4cc28003133e0095393b78d4b87460), enabled on all Discourse instances. Here’s an example in action:
* * *
Responsive Grid Galleries!
 
  
* * *
Built using [David Desandro](https://github.com/desandro)’s open source [Masonry](https://masonry.desandro.com/) and [ImagesLoaded](https://imagesloaded.desandro.com/) libraries - [MIT license](https://desandro.mit-license.org/)
_" … released under the MIT license. Have at it."_
* * *
#### How do I use this?
This component adds a button to the composer.
So all you have to do is:
1- Upload a bunch of images using the default Discourse upload button then highlight the code:
2- Click the gallery button.
You will get a **static preview** of the the selected images in the preview pane:
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:
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.**
#### Can I use both Slick and Tiles at the same time?
You better believe it! 😄
This is possible by making both slick and tiles components of a theme.
Like this:
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: 😋
@dax - Composer button
@cpradio - Button translations
@Mittineague - `ajaxComplete` handler
@simon - `api.onPageChange` handler
@vinothkannans - Topic page url regex
@sam - adding `data-theme-*` to whitelisted attributes
* * *
Bug reports / Suggestions / PRs welcome. 🍷
| | | |
| --- | --- | --- |
| 🛠 | **Repository** | [github.com/discourse/Discourse-Tiles-Image-Gallery](https://github.com/discourse/Discourse-Tiles-image-gallery) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
---
### Author:  [@kaefert](https://meta.discourse.org/u/kaefert)
#### Post date: [March 10, 2018, 12:55pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/2 "2018-03-10T12:55:26Z")
You demonstrated that both Slick & Tiles theme can be used at the same time, but did not explain how. Could you please? (explain how)
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [March 10, 2018, 2:06pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/3 "2018-03-10T14:06:07Z")
That’s a very good point @kaefert thank you for bringing it up 🌻
I will edit both the Slick and Tiles topics and clarify what I meant.
In the meantime, to answer your question:
Tile and Slick act independently. What I meant to say here:
> [@lll](#):
>
> Can I use both Slick and Tiles at the same time?
> You better believe it! 😄
is that there is no conflict between Tiles and Slick. If you want to use both Tiles and Slick at the same time, you can! You just have to install both of them, separately.
If you install both of the same time, you get something like this in the composer:
And if you use both of them in a topic/post you end up with something like this:
[ ](https://global.discourse-cdn.com/meta/original/3X/a/1/a1b14744165035f183b7473e81e094052628ac84.jpg)
---
### Author:  [@kaefert](https://meta.discourse.org/u/kaefert)
#### Post date: [March 10, 2018, 2:35pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/4 "2018-03-10T14:35:12Z")
The problem I have about activating both at the same time is that I only can set one as default in the admin settings, and can only select one of them in the user settings.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [March 10, 2018, 2:49pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/5 "2018-03-10T14:49:47Z")
> [@kaefert](#):
>
> The problem I have about activating both at the same time is that I only can set one as default in the admin settings, and can only select one of them in the user settings.
I understand 👌
What you want you do is make Slick and Tiles _components_ of your current theme instead of them being user-selectable themes.
Like this:
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.
---
### Author:  [@savas](https://meta.discourse.org/u/savas)
#### Post date: [March 19, 2018, 10:35am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/6 "2018-03-19T10:35:23Z")
Bugs\*
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [March 19, 2018, 11:15am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/7 "2018-03-19T11:15:45Z")
Thanks for reporting @savas
Can you share a little bit more details? The reason why I’m asking is because that looks like a onebox. This theme component only applies styles to images within very specific structure like so
```plaintext
.tiles-initialized {
// all styles are applied here
}
```
So it should not have any effect on oneboxes at all.
Does the issue still occur if you disable the the theme temporarily?
---
### Author:  [@savas](https://meta.discourse.org/u/savas)
#### Post date: [March 19, 2018, 11:17am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/8 "2018-03-19T11:17:40Z")
i got installed facebook onebox plugin can he mess your plugin ?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [March 19, 2018, 11:21am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/9 "2018-03-19T11:21:17Z")
1- The Facebook onebox plugin is not supported anymore, you don’t need it.
2- No, there should not be any conflict between the two. Tiles only targets specific images but you have to use the button in the composer to make it work
If you’re not sure, check the OP again and let me know if you need more help.
---
### Author:  [@kaefert](https://meta.discourse.org/u/kaefert)
#### Post date: [March 27, 2018, 10:30am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/10 "2018-03-27T10:30:38Z")
Both the [Slick theme component](https://meta.discourse.org/t/slick-gallery-component/81952/4) and this one don’t seem to work after upgrading discourse to 2.0.0.beta5. JS Error messages for this one:
```plaintext
I18n.translations.en.js.composer is undefined
@https://discourse-instance/:104:2
O@https://discourse-instance/assets/application-d85c1a58a506702e3c09017c9d92a23100e1ec3c2a620a10440601587bf2d226.js:13:23523
initialize@https://discourse-instance/assets/application-d85c1a58a506702e3c09017c9d92a23100e1ec3c2a620a10440601587bf2d226.js:6:8870
runInstanceInitializers/<@https://discourse-instance/assets/ember_jquery-27e777857b8c0730dacfe09cb11711365d21a5db4f9ee0b85d494e4259cf6cda.js:8:23844
n
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [April 3, 2018, 7:37am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/11 "2018-04-03T07:37:45Z")
Hi @kaefert, @vchrizz and thank you for reporting 🌻
My apologies for not getting to you earlier.
**the good** news is that I have just tested on **v2.0.0.beta5 +120** and both Slick and Tiles seem to be working.
My guess is that subsequent commits to Discourse addressed the issue.
Are you still facing the same problem?
**Even better news** is that I tinkered a little bit with both Slick and Tiles and they now have much more targeted firing methods that will only fire when needed. Credit here goes to @vinothkannans for the [awesome tip](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856/26).
So if you’re using either Slick or Tiles or both, please update now and let me know if the problem is still there, or if there are any other issues that need to be addressed.
---
### Author:  [@kaefert](https://meta.discourse.org/u/kaefert)
#### Post date: [April 3, 2018, 8:19am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/12 "2018-04-03T08:19:31Z")
> [@lll](#):
>
> Are you still facing the same problem?
I just upgraded our Discourse instance to the latest commit and reinstalled the two themes components. Everything works again as it worked with beta4! 🙂
Thanks for your help!
---
### Author:  [@LKNickname](https://meta.discourse.org/u/LKNickname)
#### Post date: [April 25, 2018, 10:02am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/13 "2018-04-25T10:02:31Z")
I am facing a Problem on beta 2.0.7.
I imported the Theme and configured it as a Child-Theme for my standard “Dark”-Theme.
---
### Author:  [@LKNickname](https://meta.discourse.org/u/LKNickname)
#### Post date: [April 25, 2018, 10:03am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/14 "2018-04-25T10:03:05Z")
(Had to split the post because I cannot include more than one image in my posts)
However I just get a blank Screen…any ideas on that?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [April 25, 2018, 10:04am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/15 "2018-04-25T10:04:42Z")
@Lars Can you check if there are any errors in the browser console?
---
### Author:  [@LKNickname](https://meta.discourse.org/u/LKNickname)
#### Post date: [April 25, 2018, 10:19am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/16 "2018-04-25T10:19:42Z")
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [April 25, 2018, 10:22am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/17 "2018-04-25T10:22:34Z")
Ok, thank you. Can you update the theme and check again?
---
### Author:  [@LKNickname](https://meta.discourse.org/u/LKNickname)
#### Post date: [April 25, 2018, 10:25am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/18 "2018-04-25T10:25:33Z")
Did an Update and refreshed (cleared cache).
Seems to be the same error.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [April 25, 2018, 10:27am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/19 "2018-04-25T10:27:43Z")
Ok, try it again one last time 🌻. If that does not work I’ll take a deeper look at this and fix it within the next couple of hours.
* * *
**After the fact edit**
Crosspost:
> [@Slick Image Gallery](https://meta.discourse.org/t/slick-gallery-component/81952/7):
>
> There was a small update today that fixes the translation error for good! If you’re on beta 7 and face any errors, please update the theme. sunflower
---
### Author:  [@LKNickname](https://meta.discourse.org/u/LKNickname)
#### Post date: [April 25, 2018, 10:28am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/20 "2018-04-25T10:28:46Z")
That did the trick, thank you very much for the quick help 🙂
[Next page](https://meta.discourse.org/t/tiles-image-gallery/81950.md?page=2)