Плашки на изображениях

MediaFrame добавляет HTML-плашки поверх любого изображения, не меняя сам <img>. Плашка принадлежит конкретному кадру, поэтому при использовании слайдера перемещается вместе со своим слайдом.

Значение html выводится как доверенный HTML. Передавайте только строки, заданные в репозитории. Данные из CMS или пользовательский ввод необходимо предварительно очищать.

Комбинированный пример

Здесь одновременно используются два ribbon, panel с иконкой и светлый plain. Плашки с одинаковой позицией автоматически складываются в колонку.

HAVAL F7x на городской дороге с демонстрационными плашками — На узком экране «Обновление 2026» скрывается, а «Гарантия до 5 лет» перемещается вверх влево.

---
import MediaFrame from '@/ui/media-frame/MediaFrame.astro';

const overlays = [
    {
        position: 'top-right',
        html: 'Ставка от 0,01%<br />до 4 лет<sup>*</sup>',
        variant: 'ribbon',
        tone: 'dark',
        classes: 'text-[#00caba]!',
    },
    {
        position: 'bottom-left',
        html: 'Оборудование<br />в подарок',
        icon: 'mdi:gift-outline',
        variant: 'panel',
        classes: 'bg-[#00caba]! text-black!',
    },
];
---

<MediaFrame overlays={overlays} classes="aspect-video">
    <img src={imageUrl} alt="Описание автомобиля" class="h-full w-full object-cover" />
</MediaFrame>

Все девять позиций

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

Верхний ряд позиций плашек на HAVAL JOLION — `top-left`, `top-center`, `top-right`

Средний ряд позиций плашек на HAVAL JOLION — `center-left`, `center`, `center-right`

Нижний ряд позиций плашек на HAVAL JOLION — `bottom-left`, `bottom-center`, `bottom-right`

Мобильное поведение

mobile.position меняет расположение только на ширине меньше md, а mobile.hidden скрывает второстепенную плашку. Измените ширину окна, чтобы увидеть оба состояния.

HAVAL DARGO с адаптивными демонстрационными плашками — На десктопе видны две плашки; на мобильном остаётся одна и меняет позицию.

Плашки внутри слайдера

Каждый элемент images содержит собственный overlays. Пагинация и стрелки имеют больший z-index, поэтому остаются доступны поверх слоя плашек.

Плашки
первого слайда

Плашки
второго слайда

Два кадра — два набора плашек

Переключите слайд: подпись меняется вместе с изображением.

const images = [
    {
        imageUrl: '/images/car-front.webp',
        alt: 'Автомобиль, вид спереди',
        overlays: [{ position: 'top-right', html: 'Выгода до 300 000 ₽' }],
    },
    {
        imageUrl: '/images/car-side.webp',
        alt: 'Автомобиль, вид сбоку',
        overlays: [{ position: 'bottom-left', html: 'Шины в подарок', icon: 'mdi:tire' }],
    },
];

Контракт `MediaOverlay`

Параметр	Обязательный	Значения	Назначение
`position`	да	девять позиций из примера выше	Положение группы на изображении
`html`	да	доверенная HTML-строка	Текст, переносы, `<b>`, `<sup>` и другая простая разметка
`icon`	нет	имя Astro Icon, например `mdi:gift-outline`	Иконка перед текстом
`variant`	нет	`ribbon`, `panel`, `plain`	Форма плашки; по умолчанию `panel`
`tone`	нет	`dark`, `light`	Базовая контрастная тема; по умолчанию `dark`
`classes`	нет	CSS/Tailwind-классы	Локальная настройка цвета и оформления
`mobile.position`	нет	одна из девяти позиций	Другая позиция на мобильном
`mobile.hidden`	нет	`true`	Скрыть второстепенную плашку на мобильном

Использование в `ModelCarsCards`

images[].overlays задаёт плашки только для конкретного кадра — подходит для слайдера с разными подписями.
imageOverlays в ModelCarsCardOverride применяется ко всем изображениям карточки, включая фотографии, выбранные из фида.
Если в самом изображении уже есть overlays, они имеют приоритет над общим imageOverlays карточки.

const modelCarsCardOverrides = [
    {
        modelId: 'dargo',
        imageOverlays: [
            { position: 'top-right', html: 'Ставка от 0,01%', variant: 'ribbon' },
            { position: 'bottom-right', html: 'Гарантия до 5 лет', tone: 'light' },
        ],
    },
];

вернуться обратно