AGallery — блочный компонент галереи

Компонент AGallery отображает карусель изображений с подписями SEO. Управляющие стрелки располагаются под каруселью, между ними показывается текущий индекс слайда (например, 1/20). На широких экранах одновременно видно 3 изображения.

• Файл: app/components/article-blocks/gallery/AGallery.vue
• Типы пропсов: app/components/article-blocks/gallery/types.ts

Быстрый старт

Минимальный пример использования с тремя изображениями:

<template>
  <AGallery
    :id="101"
    name="Галерея: кофейные мотивы"
    type="BlockSliderGallery"
    :images="[
      {
        id: 1,
        image: {
            title: 'Чашка кофе на столе',
            alt: 'Чашка кофе на столе,
            source: 'https://placehold.co/600x400/orange/white'
        },
      },
      {
        id: 2,
        image: {
            title: 'Чашка кофе на столе',
            alt: 'Чашка кофе на столе,
            source: 'https://placehold.co/600x400/transparent/F00'
        },
      },
      {
        id: 3,
        image: {
            title: 'Чашка кофе на столе',
            alt: 'Чашка кофе на столе,
            source: 'https://placehold.co/600x400/blue/green'
        },
      },
    ]"
  />
</template>

API

Props

• id: number — идентификатор блока. Обязателен.
• name: string — заголовок секции. Необязателен (если задан — рендерится как h2 над каруселью).
• type: string — тип блока из CMS. Обязателен.
• images: Array<{ id: number; image: { webp: string; original: string; source: string }; image_seo: { image_title: string; image_alt: string } }>
  • image.source — основной src для
  • image.alt — обязательный альтернативный текст
  • image.title — заголовок/tooltip

Сигнатуры соответствуют интерфейсу BlockMultiImageProps из components/article-blocks/gallery/types.ts.

Поведение

• Карусель на базе Embla.
• На широких экранах отображается по 3 изображения в ряд; на средних — по 2; на узких — по 1.
• Стрелки навигации размещены под каруселью по центру.
• Между стрелками показывается текущий номер слайда и общее количество (например, 1/20).
• Изображения рендерятся через базовый компонент PictureTag (без внутренних стилей), все стили передаются снаружи.

Доступность и SEO

• Всегда передавайте корректный image.alt — это важно для скринридеров и поисковиков.
• image.title (image.title) может отображаться как подсказка в некоторых браузерах.
• Тег picture отдает WebP там, где поддерживается, и fallback‑изображение для остальных.

Примеры

Минимальный набор данных

С заголовком

Заметки по данным

• Следите за пропорциями исходников (желательно 16:9) для корректного отображения миниатюр без артефактов.
• Убедитесь, что URL‑адреса доступны (HTTP 200) и отдают корректный тип контента.