Tiles Image Gallery

Do you see any errors in the browser console?

Can you share a link to the site you’re having trouble with?
(you can PM me the link if you prefer)

Thanks! We added this to our forum.

But it automatically added it to the 7th from the left on the nav bar, and I’m wondering if there’s anyway to add it to the left of the upload button, so 8th from the left. The reason being that we constantly tell people to use the upload button, 7th from the left, and now that is no longer accurate.

1 Like

This is surprisingly tricky it would require some changes to core.

At the moment in the theme component says add to “insertions” group, which it does diligently. Trouble is that upload is an extra button which is added after the theme component did its work.

I can think of some hacks we can apply to make core comply here, but they are risky and not the kind of things I would recommend carrying long term.

Best solution I can think of though is amending our toolbar to render with flexbox, then you can order it in CSS however you see fit which is very easy to explain to people for cases like this.

@awesomerobot I wonder how often this kind of stuff pops up, is it worth tracking flexboxifying the toolbar?


We already moved the toolbar to flexbox when we redid the composer :mage: — so @Caroline_Early, to rearrange the buttons this CSS can be added to your theme:

.d-editor-button-bar {
  div:nth-of-type(n+2)  { // Tiles button, divider, and gear dropdown
    order: 2;

  button.upload { // Place upload button before above elements
    order: 1;

What this is doing:

By default order is set to 0.

Adding order: 2 to the tile button and all elements after it means they’ll be placed after anything with a lower order. Since they all share the same order value, they’ll fall back to the sequence of appearance in the HTML.

Adding order: 1 puts the upload button before everything with order: 2 and after everything with the default order: 0. So this puts it to the left of the tile button instead of the right.


Thanks! That’s great.

…but I’m a total n00b when it comes to CSS. Where do I add this within the existing CSS?

It might be best to add this as a theme component, so it’s separate from your current theme.

How to do that:

  1. go to admin>customize>themes then click new

  2. name it something like “Tiles button order”, select “component” from the dropdown, click create

  3. Then you can click Edit CSS/HTML, copy & paste the CSS above to common > css

Now the component is created and you need to add it to your current theme

  1. go back to the previous page, then switch from the components tab to the themes tab

  2. select your currently active theme (it’ll have a green check mark)

  3. within the theme settings here there’s a Theme Components section, find your new component from the dropdown and then click “add”

  4. :tada: Now when you return to your forum homepage and refresh, it should be active.


Okay we’re all set over here. Thanks for your help @awesomerobot @sam :slight_smile:


since the introducing of font awesome 5 as SVG icons some used icon fonts are now missing in this theme-component, like the search-icon on the thumbnail overlay.


I pushed a few fixes:


  1. dropped waitForImages (total component size is now ~1.8kb)
  2. fixed zoom icon
  3. removed load backgrounds. Discourse now offers tiny fuzzy images and this component now matches core behavior and shows those while full size images load. There’s no special magic in this component as far as fuzzy images go, I’ve only removed some things that were causing it not to work the same way.

Here’s what that looks like now:

before anything loads

fuzzy image load first

full images load after that


Hei @Johani

A small :bug:

I can’t reproduce this. Those should be arrows (and they’re coming from Discourse core, not the gallery component.) Are you up to date with Discourse core?


Yes, I use the latest version - v2.2.0.beta8

Check this screenshot:

1 Like

Ah, well, that’s not the same component, it’s the Slick image gallery component. (And yes, icons are broken for that component. Will work on a fix.)


I think since the lazy load of images was implemented this component is a little bit broken but I don’t know for sure since when. I observed two strange things:

  1. When I add some images with the composer and format them as tiles everything in the preview looks good but when I post the message the little thumbnails of the pictures are all aligned to the right. So I have to wait some minutes before this behaviour is gone. Maybe the thumbnails for lazy load need to be generated?

  2. Some images won’t be shown (there should be 4):

Only after I rotate the screen to landscape and back to portrait view all 4 are shown:

We run version 2.20b10 of discourse and the tiles component. Site is running in Firefox 65 on android 9 and we use the material design theme. this is the post:

Thanks for any help! :slight_smile:

I am also interested in this “feature”. I will be happy to do some testing since…
a) my community loves the gallery feature
b) they struggle with the syntax and fiddling with the div tags.

After initial testing I noticed that line breaks in between images prevent the auto-tiles from working.

Let me know in case you are interested in working on it. :slight_smile:

1 Like

Would it be possible at all to have this support hyperlinks within the tiled images? That would be really cool.

1 Like

Hello, i have a error about lookup icon when hover mouse into photo

Can everyone have me fix it?
Thank you!

If the site have alot of categories and admin want to apply to all categories, him will need a option for ‘all categories’

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

1 Like

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:

Thread test is here.

1 Like