Homepage Feature Component

This is a theme component that features up to 3 topics with images on your community’s homepage

:eyeglasses: Preview it on theme creator

:hammer_and_wrench: Git repo: https://github.com/discourse/discourse-homepage-feature-component

:thinking: How do I install a Theme or Theme Component?

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 a custom tag, hide the tag, set a custom title, and configure where the component appears.

:iphone: On mobile it will only show one topic.

53 Likes

:blush: nexpectedly, I am looking for this. Thank you, can I Fork your project on Git?
I have changed some to fit my site, thanks the author.


My demo

7 Likes

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

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

2 Likes

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?

This is possible, I tried using new posts instead of tags. Or /top/weekly.json

3 Likes

Thank you!
Now looks perfect.

Edit:

Sorry, can you explain how to do that? Didn’t get the featured json field in the theme component after installation.

It looks like @Bcat modified the component to add that field, seems like a decent option to add to this by default.

10 Likes

I added it to fit, fearing that you don’t like anyone changing components.
It is possible to duplicate this utility and / or add insert locations that will be more versatile. At that time, you can insert at the best article homepage and the latest article list …
@habeycole You can see it here, but it’s better for you to wait for the post owner, I’m not very good at coding

3 Likes

No problem. I’ll definitely wait for that. Thank you :+1:

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…

4 Likes

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

To button for ship topic.

I really like this but I am not getting images, just the thread title

Maybe your topics don’t have a image?

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?

1 Like

Very nice component :+1:.

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
3 Likes

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!

2 Likes

I’ve just made an update that fixes it.

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: Cascading Style Sheets | MDN, this was related to “No content separating parent and descendants.”

8 Likes

Awesome theme add-on!

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.