Превью-изображение для собственных тем

Поддержка
1

Всем привет,

во-первых, хочу сразу отметить, что мой вопрос касается совершенно незначительной вещи, но я всё же хотел его задать :wink::

Где и как можно задать изображение-превью для собственных тем? В админ-панели без подходящего превью это выглядит немного голым:

No preview image for own themes
No preview image for own themes959×617 77.1 KB

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

Пожалуйста, простите, если этот вопрос уже обсуждался здесь, на Meta. Но я не нашёл подходящего ответа через поиск.

2

Я помню это руководство, но не уверен, что это то, что вы ищете:

3

Спасибо, но не совсем. Или я чего-то не понимаю — что, впрочем, вполне возможно. :wink:

Я создал тему на скриншоте из стандартной темы моего собственного экземпляра Discourse. Я нигде её не скачивал и не загружал. Также я не вижу каталога темы в общих путях к файлам за пределами контейнера Docker.

Так что я всё ещё немного теряюсь… :man_shrugging:

4

Полагаю, скриншоты предназначены только для тем, которые вы создаёте самостоятельно на GitHub, например, при самостоятельной разработке. Поэтому они находятся в Documentation > Developer Guides.

5

Да. Так что вопрос остаётся: есть ли какой-то способ?

И, опять же, это не самый важный вопрос и не главная функция. :wink:

6

Если вы создали тему исключительно через административный интерфейс, то нет.

Чтобы добавить скриншоты, у вас должна быть локальная файловая структура или каталог, соответствующий структуре темы.
Вы можете экспортировать тему, распаковать её, добавить скриншоты, как указано в упомянутом выше руководстве, снова запаковать и импортировать. Но, с другой стороны, скриншоты в основном используются, чтобы показать другим людям, как выглядит ваша тема. Если вы нигде её не опубликовали, кому же вы это показываете?

7

Понятно. Спасибо. Значит, всё как есть. :slight_smile:

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

8

Это может быть немного «костыльно», но вы можете заменить стандартный SVG-узор на собственное изображение с помощью CSS.
Пример результата

image
image905×664 63.6 KB

В разделе «Загрузки» вашей темы добавьте скриншот

image
image602×305 5.79 KB

и во вкладке CSS в разделе «Редактировать код» добавьте:

строчные буквы и замените пробелы на дефисы

Имя переменной SCSS

.theme-card.=THEME_NAME= .theme-card__image-wrapper svg {
 display: none;
}

.theme-card.=THEME_NAME= .theme-card__image-wrapper {
 background-image: url($=UPLOAD_NAME=);
 background-size: cover;
 background-position: center;
}

Надеюсь, этого достаточно, чтобы помочь вашему внутреннему монаху немного расслабиться.

9

Ого, огромное спасибо за это! Всё сработало именно так, как вы описали. И благодаря вашему посту это было просто копирование и вставка. Круто! :+1:

Мой внутренний монах, похоже, исчез. По крайней мере, в этом вопросе. :stuck_out_tongue:

12

Код, который я привёл выше, недавно перестал работать. Изменилось имя класса, поэтому CSS-селектор больше не совпадает (по-моему, это произошло в #40001). Вот обновлённая версия, которую я сейчас использую на своём форуме:

приведите к нижнему регистру и замените пробелы на дефисы

Имя переменной SCSS

.theme-card.=THEME_NAME= .theme-card-preview__image-wrapper svg {
 display: none;
}

.theme-card.=THEME_NAME= .theme-card-preview__image-wrapper {
 background-image: url($=UPLOAD_NAME=);
 background-size: cover;
 background-position: center;
}