Featured Cards component

No, not directly. You can choose categories, but only to restrict the selection of topics. I wouldn’t want to add more logic to enable this option.

A workaround could be to auto-tag all new topics, using a wildcard:

Or use a different component. If you can explain the look that you want to achieve a bit more, maybe I can recommend one.

Thanks for your response.

Adding a specific tag for the component will be an added bloat in the long term if I ever decide to remove this component.

So, the best logic for the component would be to auto-pick the latest posts if no tag is specified.

In case I ever remove the component, I will have to look for all the threads using the “featured” tag and untag them all.

You can remove tags from topics very quickly by filtering by tag and using the Bulk Action options:

Untitled

image

I think it only grabs the ones visible on the screen, so I often scroll down to load them all before applying the bulk action. :+1:

1 Like

Well, you can also just delete that tag and it’s gone :headstone: :upside_down_face:

1 Like

On a general note: The component is forked from the official Featured Tiles Component. The whole idea and motivation for me was to have a cards-look with the functionality that component offers. I don’t think I’ll add any more functional features over the original component. The reason is that with regards to code maintenance I want to be able to just follow the compatibility fixes of the official component.

2 Likes

In case anyone’s interested: We modified the featured cards component to allow users to scroll horizontally through all featured topics (topic source used: latest).

This is the CSS used:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    -ms-overflow-style: none; /* Hide the scrollbar for MS Edge */
    scrollbar-width: none; /* Hide the scrollbar for Mozilla Firefox */
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
}

.featured-card {
    scroll-snap-align: start;
}

.featured-cards-container::-webkit-scrollbar {
    display: none; /* Hide the scrollbar on Webkit based browsers (Chrome, Safari, etc) */
    -webkit-overflow-scrolling: touch; /* On touch screens the content continues to scroll for a while after finishing the scroll gesture */
}
3 Likes

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?

Great, but he doesn’t support on the FKB theme

How can I set the max characters for the title? I’m showing excerpt on the card and it over extends outside the box with the title and excerpt text.

There is no setting to control the max title characters. However, you can increase the cards height setting to fit the content.
image

If you don’t want to adjust every time, you can try this CSS in your theme or a component.
It removes the card height limit, and you have the following options:

  • whether you prefer stretching the card
  • the image max height.
  • the max title lines
  • the max excerpt lines
.featured-cards-container {
    $stretch_card: "true";
    $max-image-height: 10em;
    $max-title-lines: 3;
    $max-excerpt-lines: 4;
    
    height: inherit; 
    max-height: inherit;
    
    .featured-card {
        @if $stretch_card == "true" {
            height: inherit;
        }
        
        a.card-content .card-details {
            .topic-title {
                -webkit-line-clamp: $max-title-lines;
            }
            
            .topic-excerpt {
                -webkit-line-clamp: $max-excerpt-lines;
            }
        }

        a.card-content .card-image {
            height: #{$max-image-height};
            min-height: #{$max-image-height};
        }
    }
}

Hope that helps!

1 Like

Thanks, I actually had your defined height of 350 before posting but I just tried your code and appears to adjust the card size appropriately for titles with excerpts.

Digging out this one, this is genious! Is there any way to also enable it for smartphone view?

For some reason, the horizontal scrolling isn’t working anymore. has anyone been able to make it work on desktop and mobile?

1 Like

Try something like that:

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    scroll-snap-type: x mandatory;
    scroll-padding: 1.25rem;

    /* Makes scrollbar tangible but invisible */
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;

    /* Or displays it but thin */
    // scrollbar-width: thin;
    // scrollbar-color: #91919185 transparent;

    /* Ensures the scrollbar is right below the container instead of below the max height. */
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

I’m not sure it’s a good idea to hide the scrollbar on a desktop; it can be frustrating to access it.

Thin and visible (also making the background transparent) look fine to me. What do you think?

3 Likes

That works on desktop now! But not on mobile. I already hacked together some CSS for mobile horizontal scroll, but it’s not really sophisticated :smiley:

Also added font adjustment as the title font size was too big for the small screen size

.featured-cards-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
    align-content: flex-start;
    overflow-x: auto;
    max-height: 350px;
}
.featured-cards-container .featured-card {
    min-width: 90%;
    
}


.featured-card a.card-content .card-details .topic-title {
    font-size: var(--font-up-1);
}
2 Likes

Is there any way to make the whole element collapsible and replicate the same behaviour as the Homepage Feature component?