Need help setting up category list images

[fl4shback]

Hi!

I would like to display category images in the category list kind of the same way users pictures are displayed on the recent view Catégories - Discourse Meta.

I kind of got the result I would like to have by fiddling around in chrome inspect mode.

Do you think this is achievable in CSS or do I need to edit html templates ?

Website is live at APF - Auberge du Pixel Fringant (apfcommu.ga) if you want to see it live.

Thanks for your time

[Benjamin_D (Benjamin Decotte)]

Hi !

@fl4shback

do you think this is achievable in CSS

I’d say very likely and it seems you’ve already found the way tinkering with chrome, so if your question is more “where to apply my modifications?”, you’ll find an example there:

Category Image Formatting

You’re adding category logos that already include descriptions. They force the text-based Discourse descriptions to be rendered out of view - because the category logos are so wide. [image] Even when they’re out of view, they will still affect the layout of their sibling elements. Can you try adding this CSS to your theme under desktop > CSS .category-list { .category-description { display: none; } .category-logo.aspect-image { margin-bottom: 0; } } like so [image]

and many more here Search results for 'category-list' - Discourse Meta

[fl4shback]

Not really, I cheated by moving around some html elements.

In the example, they got it to work by removing the category descriptions and adding the descriptions directly to the images. I’d prefer to avoid doing this.

[Benjamin_D (Benjamin Decotte)]

Oh I see, my bad
so as I’m really not good at css and I’m not sure you should go down the road of position : relative, in case you’ll go for the html shuffling you’ll find this more useful:

@Johani

Overriding Discourse templates

Just like you can add new elements to templates, you can make changes to existing elements by overriding the template. A word of caution first. When you override a template, you’re essentially using a new template in its place. While this is not inherently a bad thing. it does come with increased maintenance.

and there is https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs , but as to make some changes to the discourse/app/views/categories/index.html.erb at main · discourse/discourse · GitHub , you’ll probably need a plugin.

[fl4shback]

Not really good in CSS myself either.

Thanks for the ressources, will try to look into that when I have some more time.

I will probably need to go down the plugin road…

[nolo (Manuel)]

I’d use this new component:

GitHub - jordanvidrine/discourse-category-group-boxes

It will give you a cleaner markup to style with css. And have the same look on desktop and mobile with almost similar class selectors.