# Preciso de ajuda para configurar imagens de lista de categorias
**URL:** https://meta.discourse.org/t/need-help-setting-up-category-list-images/199061
**Category:** Support
**Created:** [3 Agosto , 2021 18:27 UTC](https://meta.discourse.org/t/need-help-setting-up-category-list-images/199061 "2021-08-03T18:27:52Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@fl4shback](https://meta.discourse.org/u/fl4shback)
#### Post date: [3 Agosto , 2021 18:27 UTC](https://meta.discourse.org/t/need-help-setting-up-category-list-images/199061/1 "2021-08-03T18:27:52Z")
Olá!
Gostaria de exibir imagens de categoria na lista de categorias, de forma semelhante à maneira como as fotos dos usuários são exibidas na visualização recente [Categorias - Discourse Meta](https://meta.discourse.org/categories).
Consegui o resultado que desejava mexendo um pouco no modo de inspeção do Chrome.
Você acha que isso é possível apenas com CSS ou preciso editar os modelos HTML?
O site está no ar em [APF - Auberge du Pixel Fringant (apfcommu.ga)](https://discourse.apfcommu.ga/) caso queira ver ao vivo.
Obrigado pelo seu tempo 🙂
---
### Author:  [@Benjamin\_D](https://meta.discourse.org/u/Benjamin_D)
#### Post date: [3 Agosto , 2021 18:57 UTC](https://meta.discourse.org/t/need-help-setting-up-category-list-images/199061/2 "2021-08-03T18:57:58Z")
Olá!
> [@fl4shback](#):
>
> você acha que isso é viável em CSS?
Eu diria que é muito provável e parece que você já encontrou o caminho experimentando no Chrome. Então, se sua pergunta é mais “onde aplicar minhas modificações?”, você encontrará um exemplo aqui:
> [@Category Image Formatting](https://meta.discourse.org/t/category-image-formatting/197176/4):
>
> 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. 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]
e muitos outros aqui [Search results for 'category-list' - Discourse Meta](https://meta.discourse.org/search?q=category-list)
---
### Author:  [@fl4shback](https://meta.discourse.org/u/fl4shback)
#### Post date: [3 Agosto , 2021 19:14 UTC](https://meta.discourse.org/t/need-help-setting-up-category-list-images/199061/3 "2021-08-03T19:14:22Z")
Na verdade não, eu trapaceei movendo alguns elementos HTML.
No exemplo, eles conseguiram fazer funcionar removendo as descrições das categorias e adicionando as descrições diretamente às imagens. Eu preferiria evitar fazer isso.
---
### Author:  [@Benjamin\_D](https://meta.discourse.org/u/Benjamin_D)
#### Post date: [3 Agosto , 2021 20:30 UTC](https://meta.discourse.org/t/need-help-setting-up-category-list-images/199061/4 "2021-08-03T20:30:53Z")
Ah, entendi, minha culpa 😅
Então, como não sou muito bom em CSS e não tenho certeza se você deve seguir o caminho de `position: relative`, caso opte pela reorganização do HTML, isso será mais útil:
> [@Johani](#):
>
> ##### Sobrescrevendo modelos do Discourse
>
> Assim como você pode adicionar novos elementos aos modelos, também pode fazer alterações em elementos existentes sobrescrevendo o modelo. Um aviso primeiro: ao sobrescrever um modelo, você está essencialmente substituindo-o por um novo. Embora isso não seja inerentemente ruim, isso aumenta a necessidade de manutenção.
E há [https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs), mas para fazer algumas alterações em [discourse/app/views/categories/index.html.erb at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/main/app/views/categories/index.html.erb), você provavelmente precisará de um plugin.
---
### Author:  [@fl4shback](https://meta.discourse.org/u/fl4shback)
#### Post date: [3 Agosto , 2021 20:36 UTC](https://meta.discourse.org/t/need-help-setting-up-category-list-images/199061/5 "2021-08-03T20:36:50Z")
Eu também não sou muito bom em CSS.
Obrigado pelos recursos, vou dar uma olhada quando tiver um pouco mais de tempo.
Provavelmente vou precisar seguir pelo caminho dos plugins..
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [4 Agosto , 2021 08:39 UTC](https://meta.discourse.org/t/need-help-setting-up-category-list-images/199061/6 "2021-08-04T08:39:02Z")
Eu usaria este novo componente:
> **[GitHub - discourse/discourse-minimal-category-boxes](https://github.com/discourse/discourse-minimal-category-boxes)**
>
> Contribute to discourse/discourse-minimal-category-boxes development by creating an account on GitHub.
Ele fornecerá um HTML mais limpo para estilizar com CSS e manterá a mesma aparência no desktop e no mobile, com seletores de classe quase idênticos.