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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Contenido_2026_Orcasitas',
  category: 'Contenido con listas',
  name: 'Carrusel Glider.js con slides mixtos vídeo-popup o imagen-descripción 2026',
  description: 'Carrusel horizontal responsive basado en Glider.js (breakpoints adaptativos 5→4→3→2→1 slides según anchura) con dos tipos de slide coexistentes: vídeos (abren en popup al hacer click, con thumbnail + testimonio + autor + cargo) e imágenes (con descripción debajo y ancho auto-adaptativo 600/400/250px según cantidad). Incluye structured data schema.org: ItemList con VideoObject por slide de vídeo e ImageObject por slide de imagen. Dependencias Glider cargables desde CDN o reutilizables globales',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'carrusel', 'video', 'imagen', 'popup', 'glider', 'seo', 'responsive'],
   fields: [
    {
      name: 'slidesToShow',
      type: 'text',
      help: 'Número de slides visibles a la vez en desktop. Se ajusta automáticamente en tamaños menores (breakpoints responsive: 5→4→3→2→1 según anchura). Default 5',
      label: 'Número de slides a mostrar',
      mandatory: false,
      example_value: '3'
    },
    {
      name: 'slidesToScroll',
      type: 'text',
      help: 'Número de slides que se desplazan al pulsar las flechas o arrastrar. Default 1 (scroll suave uno a uno)',
      label: 'Número de slides a desplazar',
      mandatory: false,
      example_value: '1'
    },
    {
      name: 'loadScript',
      type: 'boolean',
      help: 'Si está activado, el componente carga CSS y JS de Glider.js desde el CDN. Actívalo si el carrusel es el único componente de la página que necesita Glider; desactívalo si Glider ya está cargado globalmente en la página para evitar duplicados',
      label: 'Cargar dependencias',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'items',
      type: 'list',
      help: 'Slides del carrusel. Cada slide puede ser un VÍDEO (si se rellena "Url iframe" — abre en popup al hacer click) o una IMAGEN (si se deja el iframe vacío y se rellena "URL Imagen" — aparece con descripción debajo). Los dos tipos pueden coexistir en el mismo carrusel. IMPORTANTE: dentro de cada slide rellena SOLO los campos de vídeo O SOLO los de imagen, nunca los dos a la vez. Campos de VÍDEO: "Url iframe", "Thumbnail del vídeo", "Url miniatura (SEO)", "Descripción (testimonio)", "Nombre del autor", "Cargo del autor", "Fecha de publicación". Campos de IMAGEN: "Imagen", "Alt Imagen", "Descripción de la imagen"',
      label: 'Listado de slides',
      mandatory: false,
      items: {
        type: 'object',
        fields: [
            { name: 'iframeSrc', type: 'text', help: 'URL del vídeo embebido (Vimeo, YouTube, etc.). Si tiene valor, el slide se renderiza como VÍDEO: muestra un thumbnail clicable que abre el vídeo en un popup. Si se deja vacío, el slide se renderiza como IMAGEN', label: 'Url iframe', example_value: 'https://player.vimeo.com/video/123456' },
            { name: 'imageSrc', type: 'image', help: 'Thumbnail del vídeo que se muestra en el slide antes de abrir el popup. Solo aplica a slides tipo VÍDEO', label: 'Thumbnail del vídeo', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
            { name: 'thumbnailUrl', type: 'text', help: 'URL de la miniatura para el structured data SEO del vídeo. Solo aplica a slides tipo VÍDEO', label: 'Url miniatura (SEO)', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
            { name: 'description', type: 'textArea', help: 'En slides tipo VÍDEO: testimonio/cita del autor (se muestra con su nombre y cargo). En slides tipo IMAGEN: no se muestra, se usa "Descripción de imagen"', label: 'Descripción (testimonio)', example_value: 'GenIA-L nos ha reducido el tiempo de redacción de contratos en un 70%' },
            { name: 'author', type: 'text', help: 'Nombre del autor del testimonio. Se muestra en slides tipo VÍDEO junto a la descripción', label: 'Nombre del autor', example_value: 'María García López' },
            { name: 'positionCompany', type: 'text', help: 'Cargo del autor en su empresa. Aparece debajo del nombre. Solo aplica a slides tipo VÍDEO', label: 'Cargo del autor', example_value: 'Socia directora de Derecho Fiscal' },
            { name: 'uploadDate', type: 'text', help: 'Fecha de publicación del vídeo (formato ISO YYYY-MM-DD). Se usa en el structured data SEO. Solo aplica a slides tipo VÍDEO', label: 'Fecha de publicación', example_value: '2026-01-15' },
            { name: 'image', type: 'image', help: 'Imagen del slide. Solo aplica a slides tipo IMAGEN (cuando "Url iframe" está vacío). El ancho se adapta automáticamente según cuántas imágenes haya (1→600px, 2→400px, 3 o más→250px)', label: 'Imagen', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
            { name: 'altImage', type: 'text', help: 'Texto alternativo de la imagen para accesibilidad. Solo aplica a slides tipo IMAGEN', label: 'Alt Imagen', example_value: 'Logo de corporación colaboradora de GenIA-L' },
            { name: 'descriptionImage', type: 'textArea', help: 'Descripción que aparece debajo de la imagen del slide. Solo aplica a slides tipo IMAGEN', label: 'Descripción de la imagen', example_value: 'Colaborador destacado del ecosistema legaltech español' }
        ]
      }
    }
   ]
};