Preciso de ajuda para configurar imagens de lista de categorias

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.

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) caso queira ver ao vivo.

Obrigado pelo seu tempo :slight_smile:

Olá!

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:

e muitos outros aqui Search results for 'category-list' - Discourse Meta

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.

Ah, entendi, minha culpa :sweat_smile:
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:

E há 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, você provavelmente precisará de um plugin.

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..

Eu usaria este novo componente:

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.