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

1 me gusta

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.

1 me gusta

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.

1 me gusta

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.

4 Me gusta