# 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:** 5

<div class="post-metadata">

### Author: ![manchestermania](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manchestermania/32/147706_2.png) [@manchestermania](https://meta.discourse.org/u/manchestermania)
#### Post date: [July 9, 2019, 10:20am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/84 "2019-07-09T10:20:28Z")

</div>

Why we can not use tile image gallery when the image is only 2 ? It shows just 1 “thumbnail” image. But when the image are 3 and more, it works. Hope, someday, tile image gallery can works even only 2 images on it.

Thanks a lot

---

<div class="post-metadata">

### Author: ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [August 15, 2019, 12:57am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/85 "2019-08-15T00:57:01Z")

</div>

So, I’m having this component fail for me. I installed it on the default theme just to give it a test run before I added it to others, but it’s not working properly. I’ve tried it myself, and so have users.

This is what ends up happening:

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/a/da304628f0936768047180a04d63198065ca4ad2.jpeg)  
Thread test is [here](https://forums.nanowrimo.org/t/testing-image-galleries/1927).

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [August 15, 2019, 3:39am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/86 "2019-08-15T03:39:05Z")

</div>

What other components/plugins are you using? A conflict is usually the culprit in these situations, as that component is working fine on both of my Discourse instances.

Also, I am looking forward to NaNoWriMo this year! 😉

---

<div class="post-metadata">

### Author: ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [August 15, 2019, 4:17am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/87 "2019-08-15T04:17:37Z")

</div>

Nothing fancy. Just these, no plugins.

 ![Screenshot_20190815-001449](https://global.discourse-cdn.com/meta/original/3X/6/8/68941d3d527ce70e852f126e626bf8a2fa29e303.jpeg)

(The Vincent one is straight css, only on the Vincent theme, not default.)

First year we’ll have nano on discourse. Can’t WAIT.

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [August 15, 2019, 10:05am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/88 "2019-08-15T10:05:09Z")

</div>

I’m using Vincent on one of my sites as well. It’s a great theme, though you may have to fix the CSS in a few places, as the theme hasn’t been updated for the changes in Discourse 2.3. (I just added a theme component containing the CSS fixes … easy peasy.)

I’m using all of the components you are except for the Staff Color Fix one.

Are you using any unusual plugins?

---

<div class="post-metadata">

### Author: ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [August 15, 2019, 3:43pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/90 "2019-08-15T15:43:50Z")

</div>

Nope, no plugins at all, just SSO

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [August 16, 2019, 9:57am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/91 "2019-08-16T09:57:11Z")

</div>

Okay, so I was BRIEFLY able to replicate what you were seeing by installing the component on a Discourse instance which didn’t have it installed previously. When I used the component for the first time, I got the same behavior you saw (images way off to the right side).

HOWEVER, the problem resolved itself after I did one small thing: I added line breaks between the image URIs. When I saved the message, within a moment or two, the engine re-rendered the images in tile format as expected.

So, I changed this:

```
![PNG|690x376](upload://tkDa9A71XGWBECPZ8O4NJ7EVU0o.jpeg) ![PNG|690x375](upload://qF63DV2mw5jrFWvYleWclebsDMo.jpeg) ![PNG|690x376](upload://8xiyNyKpSqdDOfh4mxMHgy0Bzkh.jpeg) 

</div>

```

To this:

```
<div data-theme-tiles="1">

![PNG|690x376](upload://tkDa9A71XGWBECPZ8O4NJ7EVU0o.jpeg) 
![PNG|690x375](upload://qF63DV2mw5jrFWvYleWclebsDMo.jpeg) 
![PNG|690x376](upload://8xiyNyKpSqdDOfh4mxMHgy0Bzkh.jpeg) 

</div>

```

Interestingly, after it worked once, it no longer seems to matter whether there are line breaks between the image URLs 🤨

If you want to test it out on either of my sites, just send me a message and I’ll send you links (one is non-public rn) 🕶

---

<div class="post-metadata">

### Author: ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [August 16, 2019, 8:24pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/92 "2019-08-16T20:24:24Z")

</div>

Okay, after a lot of experimentation and work with @cjk77 on his own installation, we’ve figured out we’re bumping up against the max image size limitations. It doesn’t handle that gracefully, so instead of just failing, it does some weird reformatting on the final product. IF you post an image that’s too _small_ you may get this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/5/151f3aef10c7981167ad452e5d2129982d7f73b8.png)  
All images used were under the resize limit. Image of the exact limit don’t render at all.

---

<div class="post-metadata">

### Author: ![Garrick](https://avatars.discourse-cdn.com/v4/letter/g/b9bd4f/32.png) [@Garrick](https://meta.discourse.org/u/Garrick)
#### Post date: [August 19, 2019, 1:46pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/94 "2019-08-19T13:46:47Z")

</div>

I have this issue also. This is due to the size of the image? Should they be enlarged and reuploaded?

Edit: that fixed it.

---

<div class="post-metadata">

### Author: ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [August 19, 2019, 5:55pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/95 "2019-08-19T17:55:29Z")

</div>

Yes, based on my experiments the component won’t work on images smaller than the max limit. It has to do with the way oneboxing works, I believe.

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [January 24, 2020, 2:41am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/96 "2020-01-24T02:41:07Z")

</div>

This and Slick Image Gallery component is not working. @Johani

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [January 24, 2020, 12:31pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/97 "2020-01-24T12:31:37Z")

</div>

Both work perfectly here. Could you be more specific about what’s not working for you? What version of Discourse are you using?

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [January 24, 2020, 4:12pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/98 "2020-01-24T16:12:19Z")

</div>

We are hosted by Discourse. So I don’t know the exact number but it seems last update has happened 17 hours ago. I’ve installed the component and upload several images to try but not working. That’s all 🤔

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [January 25, 2020, 11:23am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/99 "2020-01-25T11:23:34Z")

</div>

You can find the version of Discourse you’re on by looking at the HTML header of any page:

 ![discourseversion](https://global.discourse-cdn.com/meta/original/3X/2/6/26334b1e043bb113ff232203f03d4b674640e022.png)

> [@Anatolia](#):
>
> I’ve installed the component and upload several images to try but not working. That’s all

That’s still not helpful – WHAT is not working? Do the buttons appear in the editor? What does the resulting text look like before you save it? Do the images appear in your post at all? Etc.

No one will be able to help unless they can understand what specifically is going on.

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [January 25, 2020, 6:51pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/100 "2020-01-25T18:51:46Z")

</div>

Thanks, I’ve found it:

![update](https://global.discourse-cdn.com/meta/original/3X/7/5/75481220d2283fd635b70e39d40de6d2cd018dff.png)

Images appear but not as how it supposed to be:

 ![tiles](https://global.discourse-cdn.com/meta/original/3X/f/b/fb4aa65b31ce7fcab994004387a14090b0655f9e.jpeg)

It should’ve been like this:

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/3/936ef6d928b48476a4d56de42bbef767288439af.jpeg)

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [January 27, 2020, 12:35pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/101 "2020-01-27T12:35:49Z")

</div>

Your images are too small. They need to be large enough to activate Discourse’s internal image resizing routine for the Tiles or Slick galleries to work.

---

<div class="post-metadata">

### Author: ![Anatolia](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anatolia/32/133777_2.png) [@Anatolia](https://meta.discourse.org/u/Anatolia)
#### Post date: [January 29, 2020, 3:03pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/102 "2020-01-29T15:03:24Z")

</div>

What are minimum sizes for images to make the component work correctly?

---

<div class="post-metadata">

### Author: ![Heather\_Dudley](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heather_dudley/32/151925_2.png) [@Heather\_Dudley](https://meta.discourse.org/u/Heather_Dudley)
#### Post date: [January 29, 2020, 6:38pm UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/103 "2020-01-29T18:38:13Z")

</div>

Whatever your setting is for your site.

Look for `max image width` and `max image height`

Images must be larger than this setting to trigger the component.

---

<div class="post-metadata">

### Author: ![ian1](https://avatars.discourse-cdn.com/v4/letter/i/ebca7d/32.png) [@ian1](https://meta.discourse.org/u/ian1)
#### Post date: [February 14, 2020, 6:59am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/104 "2020-02-14T06:59:54Z")

</div>

Bug perhaps? Certainly opportunity for improvement. I just installed this today and have been struggling to get the layout correct. I finally worked it out. I needed to have all my images on a _single line_ before using the composer button. Otherwise I end up with code that looks like this:

```
![20060316-img1|679x500](upload://7IiKEBIQhilcDwt9KIBxiWZsVt8.jpeg)

</div>
<div data-theme-tiles="1">

![20060106-img2|674x499](upload://pYLbo4Bg417KHGzcNsfVopvxDfX.jpeg)

</div>

```

And all my images are in a single column.

I’m guessing this isn’t an issue if you upload all your images in a single batch, but in my case I was collating images from a number of posts, and copying the links in one-by-one.

---

<div class="post-metadata">

### Author: ![cjk77](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cjk77/32/151779_2.png) [@cjk77](https://meta.discourse.org/u/cjk77)
#### Post date: [February 14, 2020, 11:24am UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/105 "2020-02-14T11:24:04Z")

</div>

Why not just press the Tiles button _first_, then insert the image links where it says “Add images”?

 ![tiles](https://global.discourse-cdn.com/meta/original/3X/1/c/1cd44597e53ffb1b1ee5b2515b5dabd2ebab89a4.png)

[Previous page](https://meta.discourse.org/t/tiles-image-gallery/81950.md?page=4)

[Next page](https://meta.discourse.org/t/tiles-image-gallery/81950.md?page=6)
