Высота изображений категорий / Общее понимание переменных темы

Поддержка
1

Всем привет,

когда я возился с некоторыми изменениями темы, я заметил этот фрагмент кода SCSS

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 150px;
    max-height: var(--max-height);
    max-width: 60%;
    height: auto;
    width: calc(var(--max-height) * var(--aspect-ratio));

  }
}

Интересно, какой есть (если вообще есть) правильный способ изменить здесь переменную max-height.

2

Не совсем понятно, к чему вы стремитесь, но если ваша цель просто увеличить или уменьшить логотип, вот что может стать отправной точкой.

Логотип категории по умолчанию используется в нескольких местах — на странице категорий и на страницах конкретных категорий.

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

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // замените 200 на нужную высоту
  }
}

После изменения переменной --max-height ширина должна подстроиться автоматически.

Если вам нужно что-то более конкретное, например, изменить размеры логотипа только на странице категорий, проверьте настройку сайта desktop_category_page_style и сообщите, какое у неё значение.

Если изменение должно применяться только на настольных устройствах, добавьте приведённый CSS во вкладку CSS для десктопа вашей темы. Если только на мобильных — во вкладку CSS для мобильных устройств. Если нужно для обоих типов устройств, добавьте его во вкладку общего CSS.

3

Хм, я попробовал изменить --max-height, как вы и советовали, и хотя в инспекторе это значение обновляется, изображение остаётся того же размера.

В инспекторе я заметил, что значение --aspect-ratio, похоже, не установлено (в Chrome нет кликабельной ссылки на это значение), и я не могу понять, где оно может быть задано. Я искал в коде репозитория Discourse на GitHub, но так и не нашёл.

Есть ли у вас идеи, как найти, где устанавливается --aspect-ratio, или какое значение мне следует задать для него?

Редактирование: проблему нашёл — высота задавалась в https://meta.discourse.org/t/discourse-category-headers-theme-component/148682:

.category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
    float: left;
    margin: 0 0.5em 0.25em 0;
    max-height: 150px;
}

Поэтому я просто переопределил max-height в своей теме:

.category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
    max-height: 80px;
}

Редактирование #2: ваше предложение сработало для иконок категорий на странице категорий, так что спасибо!