# Homepage Feature

**URL:** https://meta.discourse.org/t/homepage-feature/144264
**Category:** Theme component
**Tags:** official, homepage-feature
**Created:** [March 13, 2020, 9:16pm UTC](https://meta.discourse.org/t/homepage-feature/144264 "2020-03-13T21:16:58Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [March 13, 2020, 9:16pm UTC](https://meta.discourse.org/t/homepage-feature/144264/1 "2020-03-13T21:16:58Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Homepage Feature** features up to 5 topics with images on your community’s homepage. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/homepage-feature) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-homepage-feature-component](https://github.com/discourse/discourse-homepage-feature-component) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
> 
> [❓ **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=homepage-feature "Ask for support on configuring and using Homepage Feature") [🐛 **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=homepage-feature "A bug report means something is broken, preventing normal/typical use of the theme component") [👀 **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=homepage-feature "Discussion about the user interface of Homepage Feature, and how features are presented (including language and UI elements)") [💡 **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=hompage-feature "Discussion about how existing Homepage Feature features can be improved or enhanced, and how proposed new features could work")

### Features

 ![Screen Shot 2020-03-13 at 5.06.59 PM](https://global.discourse-cdn.com/meta/original/3X/8/7/879f7f0b1d606d4a03a6b39e7cb5fae9e05cdc9e.jpeg)

By default the theme will feature the 3 most recent topics tagged `featured` and will pull in the first image from the topic. In the settings you can choose custom tags, hide the tag, set a custom title, and configure where the component appears.

### 📱 Mobile & small screens

By default it will drop topics until there is only left on mobile.

 ![Screen Shot 2020-03-13 at 5.16.05 PM](https://global.discourse-cdn.com/meta/original/3X/1/6/161e24dee3f51453d244d82c9b5e1c2f2dfc92b8.jpeg)

You can change this default behavior by turning on **show all always**. This will show make the component horizontally scrollable on smaller screens (\< 1000px).  
On the smallest screens (\< 600px) you have the option to stack the topics instead, by changing the **mobile style** setting.

#### Settings

| Name | Description |
| --- | --- |
| featured tag | Set the tag(s) to pull topics from. Topics matching _any_ of the selected tags are featured. |
| number of topics | Display up to 5 topics at max-width |
| max number of topics | Maximum number of featured topics. If set higher than `number of topics`, arrows are shown for paging through the topics. |
| pages loop | If pagination is enabled (`max number of topics` \> `number of topics`), paging past the last page loops back to the first. |
| hide featured tag | When enabled (the default), the featured tag(s) set above are hidden from normal users when viewing topics. Staff can still see them. |
| show on | Where the component appears: `homepage`, `top_menu` pages (the pages set in the top menu site setting), or `all` pages. |
| show for | Which visitors see the component: `everyone`, only `logged_in` users, or only `logged_out` (anonymous) visitors. |
| make collapsible | Make the entire component collapsible |
| show title | displays the text set below (title is always shown when `make_collapsible` is on) |
| title text | text for the title, if you want to localize this use the `featured_topic_title` translation instead |
| sort by created | disable to sort by recent replies instead |
| show all always | By default the amount of shown topics is decreased with the screen size, down to only 1 on mobile. Checking this setting will show all on any screen size. |
| hide closed topics | Hide closed topics from the featured topic list |
| always link to first post | Always link to the first post in the topic, even if it has been read before |
| mobile style | If `show_all_always` is checked, the topics will be shown via a horizontal scroll by default. You can change this behavior on smaller screens, and choose to stack them on anything smaller than 600px. |
| featured content position | Advanced theme development: this changes the plugin outlet for the component |

| Translation | Default |
| --- | --- |
| featured\_topic\_title | |

  

> :discourse2: **Hosted by us?** Theme components are available to use on our Pro, Business, and Enterprise plans.

> Last edited by @awesomerobot 2026-06-30T20:54:23Z
> 
> > **Check document**
> >
> > Perform check on document:

---

<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: [March 14, 2020, 9:36am UTC](https://meta.discourse.org/t/homepage-feature/144264/3 "2020-03-14T09:36:01Z")

</div>

guys this is epic! Huge thx. It would be amazing addition to core

---

<div class="post-metadata">

### Author: ![Justin\_Vega](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin_vega/32/159021_2.png) [@Justin\_Vega](https://meta.discourse.org/u/Justin_Vega)
#### Post date: [March 14, 2020, 12:48pm UTC](https://meta.discourse.org/t/homepage-feature/144264/4 "2020-03-14T12:48:23Z")

</div>

“Featured Topics” in the mobile version shouldn’t be plural.

---

<div class="post-metadata">

### Author: ![habeycole](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/habeycole/32/128367_2.png) [@habeycole](https://meta.discourse.org/u/habeycole)
#### Post date: [March 16, 2020, 7:40am UTC](https://meta.discourse.org/t/homepage-feature/144264/5 "2020-03-16T07:40:51Z")

</div>

This is lovely. Although I already use the Featured Topic Component, but this is not a bad idea too.

A suggestion, though: How about you make this component work with links too and not just tag? Maybe then can we link the contents to be sourced from maybe categories and/or top (to stand for trending) IMHO. With this, one can have the **Trending** topics feature on the homepage; like Reddit has. What do you think about this @awesomerobot?

---

<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: [March 17, 2020, 7:30am UTC](https://meta.discourse.org/t/homepage-feature/144264/11 "2020-03-17T07:30:52Z")

</div>

Great component, thank you! A little feature request: It would be great, if you could adjust the number of topics on desktop/mobile and also show the author of the post beneath the image…

---

<div class="post-metadata">

### Author: ![Bank\_Live](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bank_live/32/75893_2.png) [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [March 18, 2020, 5:09pm UTC](https://meta.discourse.org/t/homepage-feature/144264/12 "2020-03-18T17:09:45Z")

</div>

I thing is add slide for ship topic because in mobile we can see one topic only.

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

To button for ship topic.

[![](https://global.discourse-cdn.com/meta/original/4X/2/8/0/28029cc7fde1080030ec70beb5933f8cd578537a.jpeg "Topic slide next") ](https://www.youtube.com/watch?v=cC3yIqVjByE)

---

<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: [March 23, 2020, 12:15pm UTC](https://meta.discourse.org/t/homepage-feature/144264/15 "2020-03-23T12:15:20Z")

</div>

Maybe your topics don’t have a image?

---

<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: [March 25, 2020, 12:27pm UTC](https://meta.discourse.org/t/homepage-feature/144264/16 "2020-03-25T12:27:11Z")

</div>

Amazing component.It gives a nice look to homepage. Would it be possible to showcase also 3 topics on mobile? Maybe with a slider? And also,would it be possible to showcase also featured topics by category?

---

<div class="post-metadata">

### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [March 25, 2020, 3:26pm UTC](https://meta.discourse.org/t/homepage-feature/144264/17 "2020-03-25T15:26:05Z")

</div>

Very nice component 👍.

I second the suggestion of having the author somewhere. Would also be nice to:

- have the link on the image to always go to the most recent post (like the one in the title)
- able to choose an alternative layout like the variant in one of the posts above, the latest created topic on the left with smaller ones on the right
- able to hide the component title when an empty title is chosen
- having an horizontal scrolling on mobile (either by small icons below or side arrows) to be able to have the three or four topics available

---

<div class="post-metadata">

### Author: ![internet\_cookie](https://avatars.discourse-cdn.com/v4/letter/i/aca169/32.png) [@internet\_cookie](https://meta.discourse.org/u/internet_cookie)
#### Post date: [April 15, 2020, 7:04am UTC](https://meta.discourse.org/t/homepage-feature/144264/18 "2020-04-15T07:04:58Z")

</div>

I found a bug with how this component interacts with user cards.

For some reason, the user cards don’t seem to be aware that the component is adding page height.

Here is a screenshot from the theme previewer, when I click on a user profile the card comes up. As you can see the user card seems to be unaware of the featured topics:

I’ve taken several stabs at fixing this but I’m not sure why the height of the component isn’t being taken into account when calculating user card positioning.

Thanks!

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

---

<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: [April 16, 2020, 2:10am UTC](https://meta.discourse.org/t/homepage-feature/144264/19 "2020-04-16T02:10:11Z")

</div>

I’ve just made an update that fixes it.

[https://github.com/discourse/discourse-homepage-feature-component/commit/a3ce45ab63f54ebe7a12c6f505db5fdc0e1ffcc3](https://github.com/discourse/discourse-homepage-feature-component/commit/a3ce45ab63f54ebe7a12c6f505db5fdc0e1ffcc3)

The way I had it previously was interfering with some margin collapse… which threw off our top positioning calculation for user-cards… it’s briefly covered here: [Mastering margin collapsing - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing), this was related to “No content separating parent and descendants.”

---

<div class="post-metadata">

### Author: ![Nelsonius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nelsonius/32/175657_2.png) [@Nelsonius](https://meta.discourse.org/u/Nelsonius)
#### Post date: [April 19, 2020, 3:42pm UTC](https://meta.discourse.org/t/homepage-feature/144264/20 "2020-04-19T15:42:20Z")

</div>

Awesome theme add-on!

---

<div class="post-metadata">

### Author: ![Nelsonius](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nelsonius/32/175657_2.png) [@Nelsonius](https://meta.discourse.org/u/Nelsonius)
#### Post date: [April 19, 2020, 11:10pm UTC](https://meta.discourse.org/t/homepage-feature/144264/21 "2020-04-19T23:10:52Z")

</div>

Would it be possible to randomize the rotation? I’ve set it to display 2, and it show the two threads that have the most recent activity.

---

<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: [May 4, 2020, 9:39am UTC](https://meta.discourse.org/t/homepage-feature/144264/25 "2020-05-04T09:39:51Z")

</div>

Hi @awesomerobot this theme component is amazing. However, I would like to know if it’s possible that in the mobile version it doesn’t appear just 1, but a slider of the 3 featured themes that you can see in the main page. i think it gives a nice look to the main page. It would also be great if it was possible to add featured themes on each category page? Hopefully you can give some feedback and thanks a lot for this!

---

<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: [May 4, 2020, 10:15am UTC](https://meta.discourse.org/t/homepage-feature/144264/26 "2020-05-04T10:15:18Z")

</div>

I’ve managed to do some CSS tricks and now in mobile I can scroll it! but only vertical, i don’t know how it could be in horizontal 😃

---

<div class="post-metadata">

### Author: ![robotnjik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/robotnjik/32/120095_2.png) [@robotnjik](https://meta.discourse.org/u/robotnjik)
#### Post date: [May 4, 2020, 2:12pm UTC](https://meta.discourse.org/t/homepage-feature/144264/27 "2020-05-04T14:12:34Z")

</div>

Awesome component!  
Only thing is that on my forum, on mobile, it appears to have too much space below featured content.

 ![Screen Shot 2020-05-04 at 17.09.13](https://global.discourse-cdn.com/meta/original/3X/b/1/b129a5d5399482f4bd75fb4b64901475cc2bc029.png)

So, can I fix that somehow or is it way to at least disable it on the mobile view?  
Thanks!

---

<div class="post-metadata">

### Author: ![hjalali](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hjalali/32/181824_2.png) [@hjalali](https://meta.discourse.org/u/hjalali)
#### Post date: [May 4, 2020, 9:00pm UTC](https://meta.discourse.org/t/homepage-feature/144264/28 "2020-05-04T21:00:49Z")

</div>

Thanks for this, it is really nice.  
Is there anyway we can actually make the mobile show the 3 in a slider mode?|

Another awesome feature might be if you go inside a category or tag it can actually filter your “featured” tags and show them particularly for that tag or category.

Either way this is really awesome. Thank you.

---

<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: [May 4, 2020, 11:32pm UTC](https://meta.discourse.org/t/homepage-feature/144264/29 "2020-05-04T23:32:40Z")

</div>

That’s strange, I don’t see that much space on my end… is it possible you have other themes installed that could be causing it? (also as a side note that looks like desktop view at mobile with, not mobile view)

Here’s my test with no other themes enabled:

 ![Screen Shot 2020-05-04 at 7.31.02 PM](https://global.discourse-cdn.com/meta/original/3X/d/a/daee087c4812fc2cb9eca88641965a2f5707ea06.png)

---

<div class="post-metadata">

### Author: ![hjalali](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hjalali/32/181824_2.png) [@hjalali](https://meta.discourse.org/u/hjalali)
#### Post date: [May 5, 2020, 3:43pm UTC](https://meta.discourse.org/t/homepage-feature/144264/30 "2020-05-05T15:43:36Z")

</div>

Hi,  
Yesterday we had some thumbnails show up very nicely from 3 posts (2 of the post did not include images but rather a YouTube video) the system however had extracted the thumbnail and all was good.

Suddenly today the thumbnails are no longer appearing for the two posts that had the YouTube video. Is there a known problem here?

[https://www.tournamust.com/](https://www.tournamust.com/)

---

<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: [May 5, 2020, 9:12pm UTC](https://meta.discourse.org/t/homepage-feature/144264/31 "2020-05-05T21:12:56Z")

</div>

> [@hjalali](#):
>
> Suddenly today the thumbnails are no longer appearing for the two posts that had the YouTube video. Is there a known problem here?

I’m not aware of an issue, but I did not test this component with embedded video. I’ll take a look and see if there’s anything obvious happening.

[Next page](https://meta.discourse.org/t/homepage-feature/144264.md?page=2)
