Necesito ayuda para configurar imágenes de listas de categorías

¡Hola!

Me gustaría mostrar imágenes de categorías en la lista de categorías de manera similar a como se muestran las fotos de los usuarios en la vista reciente Categorías - Discourse Meta.

He logrado un resultado parecido al que busco manipulando el código en el modo de inspección de Chrome.

¿Crees que esto es posible solo con CSS o necesito editar las plantillas HTML?

El sitio web está en vivo en APF - Auberge du Pixel Fringant (apfcommu.ga) si quieres verlo en funcionamiento.

Gracias por tu tiempo :slight_smile:

¡Hola!

Diría que es muy probable, y parece que ya has encontrado la forma probando en Chrome. Así que, si tu pregunta es más bien «¿dónde aplicar mis modificaciones?», encontrarás un ejemplo aquí:

y muchos más aquí: Search results for 'category-list' - Discourse Meta

No realmente, hice trampa moviendo algunos elementos HTML.

En el ejemplo, lo lograron eliminando las descripciones de las categorías y añadiendo las descripciones directamente a las imágenes. Preferiría evitar hacer esto.

¡Ah, ya veo, mi culpa :sweat_smile:!
Así que, como no soy muy bueno con CSS y no estoy seguro de que debas seguir el camino de position: relative, en caso de que optes por reordenar el HTML, esto te resultará más útil:

Y aquí está https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs, pero para realizar algunos cambios en discourse/app/views/categories/index.html.erb at main · discourse/discourse · GitHub, probablemente necesitarás un plugin.

No soy muy bueno en CSS tampoco.

Gracias por los recursos, los revisaré cuando tenga un poco más de tiempo.

Probablemente tendré que tomar el camino de los plugins.

Usaría este nuevo componente:

Te proporcionará un marcado más limpio para estilizar con CSS, y mantendrá la misma apariencia en escritorio y móvil con selectores de clase casi idénticos.