libreria-astro-lefebvre 0.1.65 → 0.1.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
|
|
|
4
4
|
component_name: 'Contenido_2025_Malaga',
|
|
5
5
|
category: 'Contenido de Imagen',
|
|
6
6
|
name: 'Sección hiper-configurable con texto, imagen o vídeo lateral, botón y modal LF2 2025',
|
|
7
|
-
description: 'Sección de contenido altamente configurable con más de 20 campos: título pequeño tipo badge, subtítulo h2 con tamaño conmutable (56px/46px/40px), descripción HTML, imagen o vídeo MP4 lateral opcional (posicionable a izquierda o derecha, mutuamente excluyentes:
|
|
7
|
+
description: 'Sección de contenido altamente configurable con más de 20 campos: título pequeño tipo badge, subtítulo h2 con tamaño conmutable (56px/46px/40px), descripción HTML, imagen o vídeo MP4 lateral opcional (posicionable a izquierda o derecha, mutuamente excluyentes: solo se muestra uno de los dos), botón primario y botón secundario que abre un modal con formulario LF2 inyectado dinámicamente. Ofrece controles finos de alineación vertical, tamaño de fuente del texto, padding horizontal, ancho del contenedor (full/3-5/7xl) y variantes de orientación icono-texto',
|
|
8
8
|
framework: 'Astro',
|
|
9
9
|
priority: 1,
|
|
10
10
|
tags: ['contenido', 'imagen', 'video', 'icono', 'texto', 'modal', 'formulario', 'lf2', 'cta', 'boton'],
|
|
@@ -135,7 +135,7 @@ export const metadata: ComponentMetadata = {
|
|
|
135
135
|
name: 'showImage',
|
|
136
136
|
type: 'boolean',
|
|
137
137
|
help: 'Si está activado, se renderiza el layout con media lateral (texto + imagen o vídeo). Si está desactivado, se renderiza un layout alternativo solo con texto (con más padding)',
|
|
138
|
-
label: 'Mostrar imagen',
|
|
138
|
+
label: 'Mostrar imagen/vídeo',
|
|
139
139
|
mandatory: false,
|
|
140
140
|
options: ['false', 'true'],
|
|
141
141
|
options_labels: ['Falso', 'Verdadero'],
|
|
@@ -144,7 +144,7 @@ export const metadata: ComponentMetadata = {
|
|
|
144
144
|
{
|
|
145
145
|
name: 'image',
|
|
146
146
|
type: 'image',
|
|
147
|
-
help: 'URL de la imagen principal. Solo se renderiza si "Mostrar imagen" está activado. Mutuamente exclusivo con el vídeo:
|
|
147
|
+
help: 'URL de la imagen principal. Solo se renderiza si "Mostrar imagen" está activado. Mutuamente exclusivo con el vídeo: rellena solo uno de los dos',
|
|
148
148
|
label: 'Src de la imagen',
|
|
149
149
|
mandatory: false,
|
|
150
150
|
exclusive_group: 'media',
|
|
@@ -154,7 +154,7 @@ export const metadata: ComponentMetadata = {
|
|
|
154
154
|
{
|
|
155
155
|
name: 'iframeSrc',
|
|
156
156
|
type: 'video',
|
|
157
|
-
help: 'URL del vídeo MP4 lateral (se reproduce con autoplay, muted y loop). Solo se renderiza si "Mostrar imagen" está activado.
|
|
157
|
+
help: 'URL del vídeo MP4 lateral (se reproduce con autoplay, muted y loop). Solo se renderiza si "Mostrar imagen" está activado. Mutuamente exclusivo con la imagen: rellena solo uno de los dos',
|
|
158
158
|
label: 'URL del video',
|
|
159
159
|
mandatory: false,
|
|
160
160
|
exclusive_group: 'media',
|
|
@@ -47,7 +47,11 @@ const imageSkyscraper = crops['skyscraper'] || ''; // Disponible para uso en el
|
|
|
47
47
|
// Fallback: si solo viene una URL directa, usar extractImageUrl.
|
|
48
48
|
// Si no hay imagen configurada, se muestra una imagen por defecto
|
|
49
49
|
const DEFAULT_IMAGE = 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png';
|
|
50
|
+
const hasImage = !!(imageBase || extractImageUrl(image));
|
|
50
51
|
const imageUrl = imageBase || extractImageUrl(image) || DEFAULT_IMAGE;
|
|
52
|
+
// Imagen y vídeo son excluyentes (toggle en Mecano): el vídeo solo se
|
|
53
|
+
// renderiza si es el único campo relleno; en cualquier otro caso, imagen
|
|
54
|
+
const videoUrl = !hasImage && iframeSrc ? iframeSrc : '';
|
|
51
55
|
---
|
|
52
56
|
|
|
53
57
|
<section class="w-full flex items-center justify-center">
|
|
@@ -125,9 +129,9 @@ const imageUrl = imageBase || extractImageUrl(image) || DEFAULT_IMAGE;
|
|
|
125
129
|
)}
|
|
126
130
|
|
|
127
131
|
<div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-auto`}>
|
|
128
|
-
{
|
|
132
|
+
{videoUrl ? (
|
|
129
133
|
<video autoplay loop muted playsinline preload="metadata" width="600" height="450" class="md:max-w-xl w-full md:w-[75%] h-auto object-cover rounded-lg m-auto">
|
|
130
|
-
<source src={
|
|
134
|
+
<source src={videoUrl} type="video/mp4" />
|
|
131
135
|
</video>
|
|
132
136
|
) : (
|
|
133
137
|
<img src={imageUrl} alt={title} width="600" height="450" class="md:max-w-xl w-full md:w-[75%] h-auto object-cover rounded-lg m-auto" loading={loading} />
|