Is there a plugin of some sort to have an Icon next to a category?

Product Support

AI-generated summary

The discussion revolves around adding an icon next to a category in Discourse. Glow is looking for a plugin to achieve this, but Lilly explains that it’s possible without a plugin by uploading an image in the Category Settings. However, Glow finds the image too large and wants to resize it. Lilly provides a CSS solution to adjust the image size.

Glow is still unsure if this is the solution they were looking for, as they remember using a plugin before. Lilly suggests further customization with CSS and provides a link to a similar discussion on category icons. Meanwhile, Lhc_fl shares a custom CSS code for adjusting the category logo size and spacing, which might be helpful in achieving the desired look.

1

Hi, I am wondering if there is a plugin of some sort that allows to have an icon next to a category similar to something like this? I know there is one but I can’t remember the name.

image
image493×287 18.2 KB

2

Hi @Glow :wave:

No need for a plugin or theme component. Go to the Category Settings via the admin wrench in top right corner of each category you want an image icon for and go to the “images” tab and there you can upload images to appear like in your screenshot. The one you want is the first one “Category Image Logo”. Note that it will also appear the top of the Category page as well.

3

Thanks! and is there a way to make it so that it is smaller? It is quite oversized

image
image1138×429 32.5 KB

4

In common - css of a theme or theme component, you can do this:

.category-logo.aspect-image {
    width: 100px;
}

Just change the width value to whatever you wish. Can also use percent instead of pixels. I hope this helps :slight_smile:

5

hmm, im pretty sure there is still a plugin as i remember using such thing, because this looks pretty weird when i scale it down, and doesnt look like it exactly in the picture, but i cant remember the name.

image
image1184×412 14.9 KB

6

you can use CSS to further customize the image and it’s placement.

there is also this one but I’m not sure it’s what you want.

7

This is a code I wrote before…


:root {
    --category-logo-width: 70px;
    --category-spacing: 0px;
}

.desktop-view table.category-list .category-logo.aspect-image {
    width: var(--category-logo-width);
    height: calc(var(--category-logo-width) - 45px);
    margin: 0 5px 0 0;
    padding: 0;
    transform: translatey(-35px);
}
table.category-list .category-logo.aspect-image img{
    width: var(--category-logo-width);
    height: var(--category-logo-width);
}
.desktop-view .has-logo .category-text-title {
    margin-left: calc(var(--category-logo-width) + 5px); 
}
.mobile-view .category-title-link {
    display: flex;
}
.mobile-view .category-logo.aspect-image {
    margin: 0 5px 0 0;
    margin-top: 0 !important;
    padding: 0;
    order: -1
}
.mobile-view .category-text-title {
    margin: auto 0;
}


.desktop-view td.category {
    margin: var(--category-spacing);
}
.desktop-view table.category-list {
    border-collapse: separate;
    border-spacing: 0 var(--category-spacing);
}
.desktop-view table.category-list tr {
    margin: var(--category-spacing);
}