libreria-astro-lefebvre/src/carbins/Galeria_2026_Segorbe.ts

Librería de componentes Astro, React y Vue para Lefebvre

import type { ComponentMetadata } from '../interfaces/types';

export const metadata: ComponentMetadata = {
  component_name: 'Galeria_2026_Segorbe',
  category: 'Contenido con listas',
  name: 'Galería de imágenes en masonry 2026',
  description: 'Galería tipo masonry (estilo Pinterest): muestra una lista de imágenes en columnas con altura variable usando CSS columns. El número de columnas en escritorio es configurable (2, 3 o 4); en tablet siempre 2 y en móvil 1. Cada imagen conserva su proporción original. Incluye structured data schema.org (ItemList de ImageObject)',
  framework: 'Astro',
  priority: 1,
  tags: ['galeria', 'imagenes', 'masonry', 'pinterest', 'grid'],
  fields: [
    {
      name: 'columns',
      type: 'select',
      help: 'Número de columnas en escritorio (breakpoint lg). En tablet (md) siempre se muestran 2 columnas y en móvil 1',
      label: 'Columnas en escritorio',
      options: ['2', '3', '4'],
      options_labels: ['2 columnas', '3 columnas', '4 columnas'],
      example_value: '3'
    },
    {
      name: 'items',
      type: 'list',
      help: 'Listado de imágenes que componen la galería. Cada imagen mantiene su proporción original; el layout las distribuye en columnas de altura variable. IMPORTANTE: para conseguir el efecto masonry (estilo Pinterest) las imágenes deben tener proporciones distintas entre sí (verticales, horizontales, cuadradas, etc.). Si todas tienen el mismo aspect-ratio (p. ej. todas 16:9) el resultado se verá como una rejilla uniforme, no como masonry',
      label: 'Imágenes de la galería',
      mandatory: false,
      items: {
        type: 'object',
        fields: [
          { name: 'image', type: 'image', help: 'Imagen de la galería. Acepta URL directa o JSON de Limbo', label: 'Imagen', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
          { name: 'alt', type: 'text', help: 'Texto alternativo de la imagen para accesibilidad y SEO. Si se deja vacío se usa un texto genérico', label: 'Texto alternativo (alt)', example_value: 'Imagen de la galería' }
        ]
      }
    }
  ]
};