# Featured Tiles

**URL:** https://meta.discourse.org/t/featured-tiles/156677
**Category:** Theme component
**Tags:** official, featured-tiles
**Created:** [3 juli 2020 om 08:47 UTC](https://meta.discourse.org/t/featured-tiles/156677 "2020-07-03T08:47:25Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Tom\_Eagle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_eagle/32/200481_2.png) [@Tom\_Eagle](https://meta.discourse.org/u/Tom_Eagle)
#### Post date: [26 januari 2021 om 14:37 UTC](https://meta.discourse.org/t/featured-tiles/156677/22 "2021-01-26T14:37:31Z")

</div>

I first want to say thank you for this amazing component. It has taken our forum up a few notches visually and a brilliant way to revive old threads without the need for staff to bump them to keep them fixable.

I have a question though and I may be missing a simple solution to this, but is it possible to remove the OPs avatar from the tile… Or preferably just remove the clickablility of the OPs avatar?

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [10 juni 2021 om 01:12 UTC](https://meta.discourse.org/t/featured-tiles/156677/23 "2021-06-10T01:12:16Z")

</div>

Thank you for this David, I am trying to get `display-on-categories` and `scope-to-category` working but I can only get the featured tiles to display on Latest and Categories home page, not the individual categories. Any idea what I’m doing wrong here, below are my settings. I have tried this with all other TC’s disabled and in [safe mode](https://meta.discourse.org/t/53504?silent=true) with unofficial plugins disabled. I don’t see anything in the console or logs related to this.

> **Settings screenshot**
>
> ![CleanShot 2021-06-09 at 18.57.58@2x](https://global.discourse-cdn.com/meta/original/3X/5/c/5c1b7b97b71d7cda92c9b70bcf7130be0d5cd41c.jpeg)

Also, is there any way to add spacing between the images?

---

<div class="post-metadata">

### Author: ![ElForoViajero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elforoviajero/32/187116_2.png) [@ElForoViajero](https://meta.discourse.org/u/ElForoViajero)
#### Post date: [10 juni 2021 om 08:17 UTC](https://meta.discourse.org/t/featured-tiles/156677/24 "2021-06-10T08:17:40Z")

</div>

IS there a wat to show 4 tiles in desktop and just 1 or 2 on mobile? It doesn’t look so good on it. Thanks!

 ![Captura de pantalla 2021-06-10 a las 10.15.23](https://global.discourse-cdn.com/meta/original/3X/7/b/7badcba932b06bdefca9239f579144862e7cc447.jpeg)

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [10 juni 2021 om 09:05 UTC](https://meta.discourse.org/t/featured-tiles/156677/25 "2021-06-10T09:05:04Z")

</div>

> [@davidkingham](#):
>
> I can only get the featured tiles to display on Latest and Categories home page, not the individual categories

Do you have `editors-pick` topics in every individual category?

> [@davidkingham](#):
>
> Also, is there any way to add spacing between the images?

You could do this using CSS, yes. Something like

```css
.featured-tiles-container {
    gap: 1em;
}

```

> [@ElForoViajero](#):
>
> IS there a wat to show 4 tiles in desktop and just 1 or 2 on mobile? It doesn’t look so good on it. Thanks!

This could also be done with CSS. To hide the 3rd, 4th and 5th square on mobile, you could do something like:

```css
.mobile-view .featured-tiles-container > .featured-tile:nth-child(2) ~ .featured-tile {
    display: none;
}

```

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [10 juni 2021 om 15:29 UTC](https://meta.discourse.org/t/featured-tiles/156677/26 "2021-06-10T15:29:04Z")

</div>

> [@david](#):
>
> Do you have `editors-pick` topics in every individual category?

Yes, I even tried setting it to only one category where the tag is used and it does not show up in that category. I tried different tags that are not part of tag groups, a category without restricted tags, but nothing seems to work. I also tried another site I have that is much simpler, doesn’t have TLP installed, etc. and it doesn’t work there either, even tried featuring a category rather than a tag, still doesn’t show up in any categories.

> [@david](#):
>
> You could do this using CSS, yes. Something like
> 
> ```plaintext
> .featured-tiles-container {
> gap: 1em;
> }
> 
> ```

This works perfectly in firefox and chrome, but not safari. Any other ideas?

Also, a small feature request to have a title for the featured images, because how are people supposed to know what these images are? I know, I know, submit a PR, but trust me you wouldn’t want me to 😁 Just something like this:

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

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [11 juni 2021 om 11:33 UTC](https://meta.discourse.org/t/featured-tiles/156677/27 "2021-06-11T11:33:15Z")

</div>

> [@davidkingham](#):
>
> I am trying to get `display-on-categories` and `scope-to-category` working but I can only get the featured tiles to display on Latest and Categories home page, not the individual categories.

Same here. I’m trying out the component on a new instance, so there’s not much else to disable. The featured tiles only show on _Latest_ and _Categories_.

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [5 juli 2021 om 19:43 UTC](https://meta.discourse.org/t/featured-tiles/156677/28 "2021-07-05T19:43:23Z")

</div>

Hey @david

In my tests for some existing topics the image is not appearing. I am running on latest test-passed.  
What I tried so far:

- put the image into the first line of the first post
- renew HTML of the first post
- removing and re-adding the featured tag
- issue persists in theme preview as well

 ![Screenshot 2021-07-05 at 21.43.04](https://global.discourse-cdn.com/meta/original/3X/0/1/01405da2a4b0b4b6e9404444a67e5d1f1c126f58.jpeg)

Any ideas?

---

<div class="post-metadata">

### Author: ![linzo](https://avatars.discourse-cdn.com/v4/letter/l/97f17d/32.png) [@linzo](https://meta.discourse.org/u/linzo)
#### Post date: [8 juli 2021 om 22:17 UTC](https://meta.discourse.org/t/featured-tiles/156677/29 "2021-07-08T22:17:02Z")

</div>

I have this exact same issue. Were you able to fix it?

 ![tile-error](https://global.discourse-cdn.com/meta/original/3X/d/e/de83a467070e5a2c197a345a6aa4112afb2bc0c4.jpeg)

---

<div class="post-metadata">

### Author: ![Reaxgrim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/reaxgrim/32/233033_2.png) [@Reaxgrim](https://meta.discourse.org/u/Reaxgrim)
#### Post date: [5 september 2021 om 14:16 UTC](https://meta.discourse.org/t/featured-tiles/156677/30 "2021-09-05T14:16:02Z")

</div>

Any reason why this does not show on category pages even tho the option for it is ticked?

---

<div class="post-metadata">

### Author: ![Krischan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/krischan/32/47290_2.png) [@Krischan](https://meta.discourse.org/u/Krischan)
#### Post date: [2 februari 2022 om 09:58 UTC](https://meta.discourse.org/t/featured-tiles/156677/31 "2022-02-02T09:58:07Z")

</div>

I have the same issue: It doesn’t show on category pages, even when it’s the only active component. Can you help @david?

---

<div class="post-metadata">

### 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: [26 april 2022 om 16:12 UTC](https://meta.discourse.org/t/featured-tiles/156677/32 "2022-04-26T16:12:43Z")

</div>

I’ve made an update that should fix this for category pages; give it a try!

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [30 april 2022 om 21:18 UTC](https://meta.discourse.org/t/featured-tiles/156677/33 "2022-04-30T21:18:45Z")

</div>

It works Kris, you rock!

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [18 juli 2022 om 03:52 UTC](https://meta.discourse.org/t/featured-tiles/156677/34 "2022-07-18T03:52:32Z")

</div>

Does anyone have an idea of how to insert text above this component or below `.list-controls`? I really need text above to explain what these images are. Red line in image below is where I need it. Thanks!

 ![CleanShot 2022-07-17 at 21.27.56@2x](https://global.discourse-cdn.com/meta/original/4X/8/d/6/8d6211fbbf41cd96f40bfd85561f8169dad1578f.jpeg)

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [18 juli 2022 om 09:32 UTC](https://meta.discourse.org/t/featured-tiles/156677/35 "2022-07-18T09:32:44Z")

</div>

For a quick solution you can always use the `before` or `after` selectors to insert content on your site. E.g:

```plaintext
.featured-tiles::before {
  content: "Hello There";
}

```

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [18 juli 2022 om 13:45 UTC](https://meta.discourse.org/t/featured-tiles/156677/36 "2022-07-18T13:45:38Z")

</div>

Thanks Nolo, that will work for now! Would be nice to add a URL in there, but this will suffice. Thanks for your help.

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [24 juli 2022 om 23:07 UTC](https://meta.discourse.org/t/featured-tiles/156677/37 "2022-07-24T23:07:51Z")

</div>

Such a GORGEOUS site, @davidkingham !!! Stunning!!!

---

<div class="post-metadata">

### Author: ![Nesha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nesha/32/268340_2.png) [@Nesha](https://meta.discourse.org/u/Nesha)
#### Post date: [21 oktober 2022 om 08:11 UTC](https://meta.discourse.org/t/featured-tiles/156677/38 "2022-10-21T08:11:55Z")

</div>

This looks really nice…when it works.  
On our Cloud Discourse site it only works if you select only one tag. It shows empty banner line if more than one tag are selected.

Update: sometimes pictures are not shown on the main page, but going to the category with topics tagged with the selected tag helps. Returning to the main page shows the pictures on the banner.

Can anyone else try and confirm?

---

<div class="post-metadata">

### Author: ![Eagle\_Reptiles](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eagle_reptiles/32/256924_2.png) [@Eagle\_Reptiles](https://meta.discourse.org/u/Eagle_Reptiles)
#### Post date: [6 november 2022 om 14:04 UTC](https://meta.discourse.org/t/featured-tiles/156677/39 "2022-11-06T14:04:59Z")

</div>

> [@Nesha](#):
>
> sometimes pictures are not shown on the main page

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/e/0/be05ab3ae5836ed15fd3392dd2a49f5f0e9169b8.jpeg)  
Yep I’m having this same issue. The ones without images don’t even have the ‘featured’ tag

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/8/7/c87315ab6dee664b68c8882b13269914c413d2ac.png)

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [22 januari 2023 om 10:10 UTC](https://meta.discourse.org/t/featured-tiles/156677/40 "2023-01-22T10:10:49Z")

</div>

Feature request idea

> [@Featured Flip Cards](https://meta.discourse.org/t/featured-flip-cards/194360/12):
>
> Feature Request. Can we have an Option to have this displayed on A Specific category page? ie if viewing Lounge featured cards are shown here. the image shown is Category Image. I am using Air Theme. Application to show featured topics related to that category from it’s subcategory Frontier news. what is recommended image size for Card image? This is my idea on an application to show featured topics Above a specific category of interest. I am using Air theme. It will need to either or …

EDiT looks like it should work as I describe. 🤦‍♂️

However on Air theme it is blank as below. Whhat am I doing wrong? Can if needed dm yiu site link.

 ![Screenshots_2023-01-22-06-28-09](https://global.discourse-cdn.com/meta/original/4X/b/7/0/b7086c079000f59a37e50740108755dcc1713d04.jpeg)

I have 2 topics with pics in op first post. Pics are first in post.

---

<div class="post-metadata">

### Author: ![hoangphuctran93](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hoangphuctran93/32/290976_2.png) [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [26 januari 2024 om 19:34 UTC](https://meta.discourse.org/t/featured-tiles/156677/41 "2024-01-26T19:34:54Z")

</div>

I recently installed your theme component, and I thought it would be great if you added these 2 features

1. Next and prev button  
I have referenced this code but don’t know how to add it to your customizations

> [https://stackoverflow.com/questions/65833297/add-prev-next-buttons-to-scroll-container-with-css-and-jquery](https://stackoverflow.com/questions/65833297/add-prev-next-buttons-to-scroll-container-with-css-and-jquery)

1. Allow loading additional content after the user has viewed all previous news

This helps users have an optimal experience on both desktop and mobile and at the same time be familiar with stories applications on social networks, as well as I see many articles where Google is currently very interested in stories content.

This is my custom on desktop and mobile

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/7/a/97aa27b011a6a409c61108b0fe10142647d81584.jpeg)  
View at [https://businesslab.vn](https://businesslab.vn)

[Vorige pagina](https://meta.discourse.org/t/featured-tiles/156677.md?page=1)

[Volgende pagina](https://meta.discourse.org/t/featured-tiles/156677.md?page=3)
