Рекомендуемые флип-карты

Модификация компонента темы Featured Tiles. Отображает избранные темы в виде ряда переворачиваемых карточек:

Чтобы карточки не были слишком большими или маленькими, компонент использует контрольные точки для разных размеров окна. По умолчанию отображается две карточки на мобильных устройствах, четыре на планшетах и пять или шесть на настольных компьютерах. Рекомендуется иметь как минимум шесть избранных тем.

В любом случае, это будет интереснее, если у вас их больше, и вы воспользуетесь функцией randomize (случайный порядок):

Screenshot from 2021-06-18 21-06-49

Таким образом, у вас всегда будет новая раскладка карточек :black_joker:

22 лайка

Выглядит отлично! Для сведения, в Safari происходит следующее:

Есть ли шанс добавить опцию квадратного кадрирования? С разными соотношениями сторон это выглядит не очень хорошо. Или, возможно, можно добавить размытую версию изображения на заднем плане, как это делает Topic Thumbnails? Просто предлагаю идеи :+1:

2 лайка

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

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

4 лайка

Есть ли шанс увеличить количество рекомендуемых тем на мобильных устройствах и включить горизонтальную прокрутку? Это было бы здорово

У меня проблема: карточка с переворотом не отображается на мобильном устройстве.

Safari

Chrome

Мой сайт

1 лайк

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

1 лайк

Похоже, проблема каким-то образом связана с Safari, так как после установки этого обновления проблемы на нашем форуме испытывают только пользователи Safari, и, судя по всему, @Bank_Live тоже использует этот браузер.

Сайт @Bank_Live также не отображает компонент в Chrome. Я не думаю, что эта проблема связана с компонентом, по крайней мере, мне не удалось её воспроизвести.

Но да, есть некоторые проблемы с CSS в Safari, и я смогу разобраться с ними через неделю. Прямо сейчас у меня нет под рукой Mac, и я не могу воспроизвести это на WebKit в Linux.

2 лайка

Есть какие-то новости по проблеме с Safari?

Компонент использует свойство aspect-ratio. Я думал, что оно поддерживается в Safari, но, оказывается, только начиная со следующего выпуска (15).

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

3 лайка

Спасибо! У нас в сообществе работает как по волшебству
Season 2 Dancing GIF by The Fresh Prince of Bel-Air

2 лайка

Запрос функции.

Можно ли добавить опцию для отображения этого на странице конкретной категории?

Например, при просмотре раздела «Lounge» здесь отображаются рекомендуемые карточки.

Показываемое изображение — это изображение категории. Я использую тему Air. Приложение должно отображать рекомендуемые темы, связанные с этой категорией, из её подкатегории «Frontier news».

Какой рекомендуемый размер изображения для карточки?

Вот моя идея для приложения, которое отображает рекомендуемые темы над конкретной интересующей категорией.

Я использую тему Air. Потребуется либо опция, либо, возможно, настройка, позволяющая размещать этот блок под логотипом категории. Также, по возможности, нужна опция для отображения в нескольких выбранных категориях.

Например, у меня есть главная категория с несколькими подкатегориями, и я хочу демонстрировать подкатегорию «Новости».