Логотип категории для всех тем в этой категории

Поддержка
1

Возможно ли отображать логотип категории во всех темах внутри этой категории? Я имею в виду «маленький логотип». В моём случае уместнее показывать логотип, связанный с конкретной темой, а не общий логотип сайта. Спасибо!

2

Хотите, чтобы логотип отображался только на странице темы или также в списке тем?
Думаю, это можно сделать с помощью CSS.
Или отредактировав шаблоны… :thinking:

3

Как видите, у нас на Discourse нет логотипов для категорий.
Но если бы они были выбраны, они отображались бы здесь:

image
image1438×781 64.7 KB

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

image
image1339×771 42.8 KB

4

Сколько у вас категорий?

Если категорий разумное количество, то это можно реализовать через CSS. Достаточно просто переопределить логотип вверху, используя:

<body class="category-***"

Например, category-support в теме, в которой мы сейчас находимся.

5

У меня будет фиксированное количество категорий — 30.
Не уверен, какой код добавить в CSS. Можете дать более явный намёк? :slight_smile:

6

Мы удаляем логотип:

img#site-logo {
    display: none;
}

Или, возможно, так:

.category-support img#site-logo {
    display: none;  
}

1
11023×397 39.3 KB

Для наглядности я добавил ваше фото:

.category-support .title a {
    background-image: url(https://d3bpeqsaub0i6y.cloudfront.net/user_avatar/meta.discourse.org/ed_bobkov/45/177564_2.png);
    width: 35px;
    height: 35px;
    display: block !important;
}

2
21130×405 40.4 KB

Возможно, вам придётся повторить этот код 30 раз.

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

7

Спасибо! Это работает с некоторыми изменениями.
Подсказка: название категории я должен брать из поля «Слаг категории» в настройках категории.

Размеры логотипа могут отличаться:
width: 65px;
height: 50px;
display: block !important;
background-size: cover;