Нужна помощь с настройкой изображений списка категорий

Привет!

Я хотел бы отображать изображения категорий в списке категорий примерно так же, как отображаются фотографии пользователей в разделе «Недавнее» Catégories - Discourse Meta.

Мне удалось добиться желаемого результата, поковырявшись в режиме инспектора Chrome.

Как вы думаете, это можно реализовать с помощью CSS или нужно редактировать HTML-шаблоны?

Сайт работает по адресу APF - Auberge du Pixel Fringant (apfcommu.ga), если захотите посмотреть его вживую.

Спасибо за ваше время :slight_smile:

Привет!

Я бы сказал, что это вполне вероятно, и похоже, вы уже нашли способ, поэкспериментировав в Chrome. Если ваш вопрос скорее «где применить мои изменения?», то пример вы найдёте здесь:

а также множество других примеров здесь: Search results for 'category-list' - Discourse Meta

Не совсем, я схитрил, переместив некоторые HTML-элементы.

В примере у них получилось это реализовать, убрав описания категорий и добавив описания непосредственно к изображениям. Я бы предпочел избежать такого подхода.

Ага, понял, моя ошибка :sweat_smile:
Так как я не очень хорошо разбираюсь в CSS, не уверен, что стоит идти по пути position : relative. Если вы решите переставлять элементы в HTML, это может оказаться полезнее:

А вот здесь: https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/navigation/category.hbs. Но чтобы внести изменения в discourse/app/views/categories/index.html.erb at main · discourse/discourse · GitHub, вам, скорее всего, понадобится плагин.

Я сам тоже не очень хорошо разбираюсь в CSS.

Спасибо за ресурсы, постараюсь разобраться с ними, когда у меня появится больше времени.

Скорее всего, мне придётся пойти по пути использования плагинов…

Я бы использовал этот новый компонент:

Он обеспечит более чистую разметку для стилизации с помощью CSS и обеспечит одинаковый вид на десктопе и мобильных устройствах с практически идентичными селекторами классов.