I’m not able to see the icon when creating a post and below there’s a prove it was added as a component to my theme… What am I doing wrong?
Thanks in advance!
Hey Joe
I appreciate your time and effort with the experimental branch. Will give it a shot in some test category and go from there! 
5 Likes
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?
4 Likes
We already moved the toolbar to flexbox when we redid the composer 
— so @Caroline_Early, to rearrange the buttons this CSS can be added to your theme:
.d-editor-button-bar {
button:nth-of-type(n+7),
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.
6 Likes
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:
-
go to
admin>customize>themesthen clicknew -
name it something like “Tiles button order”, select “component” from the dropdown, click create
-
Then you can click
Edit CSS/HTML, copy & paste the CSS above tocommon > css
Now the component is created and you need to add it to your current theme
-
go back to the previous page, then switch from the components tab to the themes tab
-
select your currently active theme (it’ll have a green check mark)
-
within the theme settings here there’s a
Theme Componentssection, find your new component from the dropdown and then click “add” -
Now when you return to your forum homepage and refresh, it should be active.
6 Likes
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.
3 Likes
I pushed a few fixes:
- dropped waitForImages (total component size is now ~1.8kb)
- fixed zoom icon
- 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
10 Likes
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?
4 Likes
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.)
7 Likes
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:
-
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?
-
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!
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.
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’