Странная разметка после обновления

Поддержка
1

У кого-нибудь возникали проблемы при обновлении до последней версии Discourse? Все миниатюры категорий искажены. Я использовал кастомизацию только на главной странице, но даже на страницах категорий они все сдвинуты. Как это исправить?

Screenshot 2022-10-13 at 22.09.39
Screenshot 2022-10-13 at 22.09.391920×1086 108 KB

2

Никто?
Laugh Lol GIF by PG Tips

3

Возможно, вы уже исправили это, но при анонимном посещении всё выглядит хорошо:

image
image778×720 78.1 KB

4

Кажется, было обновление, которое добавило новую функцию (логотипы категорий в тёмной/светлой теме), и это могло повлиять на некоторые настройки. Я пока не уверен на 100%, как это исправить, но уже уточняю информацию. :+1:

(Хотя, надеюсь, @renato прав, и всё само собой исправилось :crossed_fingers:)

5

Здесь я вижу, что изображения выглядят как на скриншоте @renato в Chrome, но как у автора темы (OP) в Safari. Это, безусловно, регрессия, приношу извинения. Похоже, что у вас нет никаких кастомизаций, но у вас есть довольно большие изображения в качестве логотипов категорий; например, то, что у автора темы, имеет размер 2657x2657.

Итак, есть два способа исправить это:

  1. Загрузите изображения меньшего размера. Попробуйте изображение 150x150 — оно должно работать хорошо. (Это также ускорит загрузку страниц благодаря меньшим изображениям.)
  2. Если вы не хотите перезагружать изображения, попробуйте добавить это правило CSS в компонент темы:
body .category-logo.aspect-image {
  max-width: 150px;
}
6

Да, в Chrome всё выглядит нормально, а в Safari — нет. Есть какие-то идеи, почему так происходит? Я пробовал исправление с max-width, но это не помогло. Также загрузил изображения меньшего размера — 450×450 пикселей, но всё равно ничего не вышло.

7

Попробуйте вот так

@supports (--custom: property) {
  body .category-logo.aspect-image {
    max-width: 150px;
  }
}
8

Однозначно не один. Однако я не понимаю решение (я полный новичок). Есть ли где-то, где я мог бы найти немного больше информации о том, что и где мне нужно реализовать это решение? Спасибо.

13

Здравствуйте и добро пожаловать, @Richard :slightly_smiling_face:

Вы можете добавить дополнительные фрагменты кода на свой сайт, создав небольшой компонент темы и подключив его к вашей теме:

  • Перейдите в /admin/customize/themes
  • Нажмите Установить, а затем Создать новый
  • Придайте ему имя и выберите «Компонент».
  • Создать
  • Добавьте его в вашу тему
  • Нажмите кнопку Редактировать CSS/HTML и вставьте код во вкладку Общее
  • И сохраните. :+1:
15

Кажется, для этой проблемы уже внесено несколько исправлений, так что после обновления вы, возможно, сможете удалить свой пользовательский код. :+1: