# 瓷砖图片库 **URL:** \ **Category:** Theme component\ **Tags:** deprecated\ **Created:** [2018年三月2日 06:56 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950 "2018-03-02T06:56:34Z")\ **Posts on this page:** 20\ **Page:** 4
**Author:** ![anabelpump](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anabelpump/32/123505_2.png) [@anabelpump](https://meta.discourse.org/u/anabelpump)\ **Post date:** [2018年十月28日 19:22 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/61 "2018-10-28T19:22:45Z")
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? ![](https://global.discourse-cdn.com/meta/original/3X/9/6/966708a564f7fdf1e85e28d546e18710994d531c.png) Thanks in advance! ---
**Author:** ![anon36484860](https://avatars.discourse-cdn.com/v4/letter/a/b782af/32.png) [@anon36484860](https://meta.discourse.org/u/anon36484860)\ **Post date:** [2018年十月29日 08:24 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/62 "2018-10-29T08:24:45Z")
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! 🙂 ---
**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\ **Post date:** [2018年十月29日 12:54 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/63 "2018-10-29T12:54:32Z")
Do you see any errors in the [browser console](https://support.airtable.com/hc/en-us/articles/232313848-How-to-open-the-developer-console)? Can you share a link to the site you’re having trouble with? (you can PM me the link if you prefer) ---
**Author:** ![Caroline\_Early](https://avatars.discourse-cdn.com/v4/letter/c/e480ec/32.png) [@Caroline\_Early](https://meta.discourse.org/u/Caroline_Early)\ **Post date:** [2018年十一月13日 17:53 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/64 "2018-11-13T17:53:53Z")
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. ---
**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\ **Post date:** [2018年十一月14日 01:02 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/65 "2018-11-14T01:02:43Z")
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? ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2018年十一月14日 02:04 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/66 "2018-11-14T02:04:38Z")
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: ```CSS .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. ---
**Author:** ![Caroline\_Early](https://avatars.discourse-cdn.com/v4/letter/c/e480ec/32.png) [@Caroline\_Early](https://meta.discourse.org/u/Caroline_Early)\ **Post date:** [2018年十一月14日 16:54 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/67 "2018-11-14T16:54:51Z")
Thanks! That’s great. …but I’m a total n00b when it comes to CSS. Where do I add this within the existing CSS? ---
**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\ **Post date:** [2018年十一月14日 17:25 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/68 "2018-11-14T17:25:25Z")
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. 🎉 Now when you return to your forum homepage and refresh, it should be active. ---
**Author:** ![Caroline\_Early](https://avatars.discourse-cdn.com/v4/letter/c/e480ec/32.png) [@Caroline\_Early](https://meta.discourse.org/u/Caroline_Early)\ **Post date:** [2018年十一月14日 17:34 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/69 "2018-11-14T17:34:22Z")
Okay we’re all set over here. Thanks for your help @awesomerobot @sam 🙂 ---
**Author:** ![bangarang](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bangarang/32/63023_2.png) [@bangarang](https://meta.discourse.org/u/bangarang)\ **Post date:** [2019年一月11日 21:33 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/70 "2019-01-11T21:33:30Z")
since the introducing of [font awesome 5 as SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643) some used icon fonts are now missing in this theme-component, like the search-icon on the thumbnail overlay. ---
**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\ **Post date:** [2019年一月13日 04:34 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/71 "2019-01-13T04:34:37Z")
I pushed a few fixes: [https://github.com/hnb-ku/Discourse-Tiles-image-gallery/commit/1db4952cea7662a8456a1410df3c0ba8cbfe9279](https://github.com/hnb-ku/Discourse-Tiles-image-gallery/commit/1db4952cea7662a8456a1410df3c0ba8cbfe9279) 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 ![1](https://global.discourse-cdn.com/meta/original/3X/9/6/963b447205f1026b92120aa84847e214c969dcff.png) fuzzy image load first ![2](https://global.discourse-cdn.com/meta/original/3X/1/0/108bf798e2fc3c998901669fce67b614fe498a6d.png) full images load after that ![3](https://global.discourse-cdn.com/meta/original/3X/b/8/b8357fd4392576e90a07633b9847f98caa06d6a8.png) ---
**Author:** ![elGrande](https://avatars.discourse-cdn.com/v4/letter/e/ecc23a/32.png) [@elGrande](https://meta.discourse.org/u/elGrande)\ **Post date:** [2019年一月13日 15:03 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/72 "2019-01-13T15:03:49Z")
Hi @Johani A small 🐛 ![bug](https://global.discourse-cdn.com/meta/original/3X/d/a/da15b14c20e50053cc77f2deec94f70fa70807be.png) ---
**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\ **Post date:** [2019年一月14日 19:07 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/73 "2019-01-14T19:07:30Z")
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? ---
**Author:** ![elGrande](https://avatars.discourse-cdn.com/v4/letter/e/ecc23a/32.png) [@elGrande](https://meta.discourse.org/u/elGrande)\ **Post date:** [2019年一月15日 17:43 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/74 "2019-01-15T17:43:26Z")
Yes, I use the latest version - [v2.2.0.beta8](https://github.com/discourse/discourse/compare/6c2333a780494fc1339b871211a309864fcd9cb4...tests-passed) Check this screenshot: ![bug-arrow](https://global.discourse-cdn.com/meta/original/3X/b/1/b19f92b5f6cd8f44397fa9adbaaec484543a9351.png) ---
**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\ **Post date:** [2019年一月15日 17:51 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/75 "2019-01-15T17:51:01Z")
Ah, well, that’s not the same component, it’s the [Slick image gallery](https://meta.discourse.org/t/slick-image-gallery/81952) component. (And yes, icons are broken for that component. Will work on a fix.) ---
**Author:** ![Buntspecht](https://avatars.discourse-cdn.com/v4/letter/b/3e96dc/32.png) [@Buntspecht](https://meta.discourse.org/u/Buntspecht)\ **Post date:** [2019年二月2日 15:37 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/79 "2019-02-02T15:37:18Z")
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: ![20190202_162424](https://global.discourse-cdn.com/meta/original/3X/1/c/1c342745a95bac0c8e70295bb1afcac69d0d3748.jpeg) 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: ![20190202_162627](https://global.discourse-cdn.com/meta/original/3X/1/4/141e357cfd99140746432f9d6db1f8a6411c1355.jpeg) Thanks for any help! 🙂 ---
**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\ **Post date:** [2019年二月21日 05:54 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/80 "2019-02-21T05:54:41Z")
> [@Johani](#): > > I don’t see myself working on that particular problem any time soon. 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. 🙂 ---
**Author:** ![DNSTARS](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dnstars/32/100957_2.png) [@DNSTARS](https://meta.discourse.org/u/DNSTARS)\ **Post date:** [2019年三月29日 19:08 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/81 "2019-03-29T19:08:57Z")
Would it be possible at all to have this support hyperlinks within the tiled images? That would be really cool. ---
**Author:** ![thaidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thaidb/32/68488_2.png) [@thaidb](https://meta.discourse.org/u/thaidb)\ **Post date:** [2019年五月6日 02:52 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/82 "2019-05-06T02:52:25Z")
Hello, i have a error about lookup icon when hover mouse into photo ![image](https://global.discourse-cdn.com/meta/original/3X/3/8/387098732222fba9dbb656ea2efa2bf202b96217.jpeg) Can everyone have me fix it? Thank you! ---
**Author:** ![tran\_tien](https://avatars.discourse-cdn.com/v4/letter/t/c6cbf5/32.png) [@tran\_tien](https://meta.discourse.org/u/tran_tien)\ **Post date:** [2019年六月16日 09:03 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/83 "2019-06-16T09:03:17Z")
> [@anon36484860](#): > > 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! 🙂 If the site have alot of categories and admin want to apply to all categories, him will need a option for ‘all categories’ [上一頁](https://meta.discourse.org/t/tiles-image-gallery/81950.md?page=3) [下一頁](https://meta.discourse.org/t/tiles-image-gallery/81950.md?page=5)