libreria-astro-lefebvre 0.0.49 → 0.0.51

package/README.md

@@ -8,6 +8,74 @@ Instrucciones:
 npm i libreria-astro-lefebvre
 ```
 
+## 🖼️ Imágenes de Limbo
+
+La librería incluye utilidades para trabajar con imágenes de Limbo de forma sencilla.
+
+### Opción 1: Componente LimboImage (Recomendado para maquetadores)
+
+El componente `<LimboImage>` extrae automáticamente la URL del JSON de Limbo:
+
+```astro
+---
+import LimboImage from 'libreria-astro-lefebvre/components/LimboImage.astro';
+
+const { imagen } = Astro.props; // Puede ser URL directa o JSON de Limbo
+---
+
+<!-- Uso básico -->
+<LimboImage src={imagen} alt="Descripción de la imagen" />
+
+<!-- Con estilos -->
+<LimboImage 
+  src={imagen} 
+  alt="Hero" 
+  class="w-full h-auto rounded-lg"
+/>
+
+<!-- Preferir imagen original en lugar del crop -->
+<LimboImage src={imagen} prefer="original" alt="Original" />
+
+<!-- Con fallback si no hay imagen -->
+<LimboImage src={imagen} fallback="/default.jpg" alt="Con fallback" />
+```
+
+### Opción 2: Función extractImageUrl
+
+Para casos donde necesitas más control:
+
+```astro
+---
+import { extractImageUrl } from 'libreria-astro-lefebvre/lib/functions';
+
+const { imagen } = Astro.props;
+
+// Extraer URL (preferir crop por defecto)
+const srcUrl = extractImageUrl(imagen);
+
+// Preferir imagen original
+const originalUrl = extractImageUrl(imagen, { prefer: 'original' });
+---
+
+<img src={srcUrl} alt="Mi imagen" />
+```
+
+### Funciones disponibles
+
+```javascript
+import { 
+  extractImageUrl,    // Extrae URL de JSON Limbo
+  parseImageData,     // Obtiene datos completos (original + crops)
+  resolveUrl,         // Convierte /files/... a URL absoluta
+  isValidImageUrl,    // Verifica si URL es válida (no blob)
+  LIMBO_BASE_URL      // { DEV: '...', PROD: '...' }
+} from 'libreria-astro-lefebvre/lib/functions';
+```
+
+---
+
+## Instalación y desarrollo
+
 
 Hacer un link en librería local: 
 ``` npm link ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "libreria-astro-lefebvre",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "Librería de componentes Astro, React y Vue para Lefebvre",
   "author": "Equipo web desarrollo Lefebvre",
   "type": "module",
@@ -12,7 +12,9 @@
     },
     "./list": "./src/list.ts",
     "./limbo": "./src/limbo/index.ts",
-    "./limbo/LimboProvider.astro": "./src/limbo/LimboProvider.astro"
+    "./limbo/LimboProvider.astro": "./src/limbo/LimboProvider.astro",
+    "./components/LimboImage.astro": "./src/components/LimboImage.astro",
+    "./lib/functions": "./src/lib/functions.js"
   },
   "files": [
     "src"
@@ -26,12 +28,18 @@
   ],
   "peerDependencies": {
     "astro": "^5.11.0",
-    "limbo-component": "latest"
+    "limbo-component": "latest",
+    "vue": "^3.3.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "scripts": {
     "generate:registry": "node scripts/generateRegistry.js"
   },
   "devDependencies": {
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vue": "^3.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

package/src/carbins/AstroButton.ts

@@ -27,20 +27,8 @@ export const metadata: ComponentMetadata = {
       name: 'imagen',
       type: 'image',
       label: 'Imagen de prueba',
-      mandatory: true,
-      example_value: '',
-      image_cuts: [
-        {
-          label: "mobile",
-          width: "300",
-          height: "100"
-        },
-        {
-          label: "desktop",
-          width: "400",
-          height: "400"
-        },
-      ]
+      mandatory: false,
+      example_value: ''
     },
     {
       name: 'target',

package/src/carbins/Contenido_2025_Alcorcon.ts

@@ -53,7 +53,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'src',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-3-4.png'

package/src/carbins/Contenido_2025_Malaga.ts

@@ -39,7 +39,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png'

package/src/carbins/Contenido_2025_Montevideo.ts

@@ -39,7 +39,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'

package/src/carbins/Formulario_2025_Seul.ts

@@ -25,7 +25,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'imageSrc',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-3-4.png'

package/src/carbins/Formulario_2025_Teruel.ts

@@ -97,7 +97,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'imageModal',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen modal',
       mandatory: false,
       example_value: ''
@@ -118,7 +118,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'imageSrc',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'

package/src/carbins/GeometricShapeCard.ts

@@ -33,7 +33,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'imageSrc',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'

package/src/carbins/ImageTextSimple.ts

@@ -28,7 +28,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-1-1.png'

package/src/carbins/Imagen_2025_Bogota.ts

@@ -46,7 +46,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'src',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen',
       mandatory: false,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'

package/src/carbins/Imagen_2025_Fukushima.ts

@@ -11,7 +11,7 @@ export const metadata: ComponentMetadata = {
    fields: [
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'Src de la imagen del logo',
       mandatory: false,
       example_value: 'https://lefebvre.es/genia-l/images/genial/img-iso4.webp'

package/src/carbins/TextImageBackground.ts

@@ -29,7 +29,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-16-9.png'

package/src/carbins/TextImageBlock.ts

@@ -44,7 +44,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-4-3.png'

package/src/carbins/TextImageCard.ts

@@ -26,7 +26,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-1-1.png'

package/src/carbins/TextImageHeader.ts

@@ -50,7 +50,7 @@ export const metadata: ComponentMetadata = {
     },
     {
       name: 'image',
-      type: 'text',
+      type: 'image',
       label: 'URL de la imagen',
       mandatory: true,
       example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-4-3.png'

package/src/components/Astro/Cabecera_2025_Madrid.astro

@@ -90,7 +90,7 @@ const categories = [
         
         <div class="max-w-7xl flex items-center justify-between mx-auto">
             <a href={subdirectory + '/'} class="flex items-center">
-                <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" class="h-[40px]" alt="GenIA-L Lefebvre">
+                <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" class="h-[40px]" alt="GenIA-L Lefebvre" loading="lazy">
             </a>
             <div class="flex items-center gap-4">
                 <div class="flex items-center gap-4">

package/src/components/Astro/Contenido_2025_Alcorcon.astro

@@ -1,4 +1,6 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     title,
     subtitle,
@@ -11,7 +13,7 @@ const {
     showBtn = true
     } = Astro.props;
 
-
+const srcUrl = extractImageUrl(src);
 ---
 
 <section class="w-full flex items-center justify-center pb-[36px]">
@@ -20,8 +22,8 @@ const {
 
         <div class="max-w-7xl w-full flex justify-center items-center relative md:w-4/5">
             <div class="relative w-full max-w-7xl min-h-[400px] md:min-h-[500px] lg:min-h-[auto]">
-                {src && src !== "" ? (
-                    <img src={src} alt={alt} title={title} class="object-cover object-center w-full h-full lg:max-h-[446px] min-h-[400px] md:min-h-[500px] lg:min-h-[auto] rounded-2xl"> 
+                {srcUrl && srcUrl !== "" ? (
+                    <img src={srcUrl} alt={alt} title={title} class="object-cover object-center w-full h-full lg:max-h-[446px] min-h-[400px] md:min-h-[500px] lg:min-h-[auto] rounded-2xl"> 
                 ) : (
                     <video autoplay loop muted playsinline class="object-cover object-center w-full h-full lg:max-h-[446px] min-h-[400px] md:min-h-[500px] lg:min-h-[auto] rounded-2xl">
                         <source src={iframeSrc} type="video/mp4" />

package/src/components/Astro/Contenido_2025_Malaga.astro

@@ -1,4 +1,6 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     title,
     description,
@@ -17,7 +19,7 @@ const {
     alignItems = 'start',
     } = Astro.props;
 
-
+const imageUrl = extractImageUrl(image);
 ---
 
 <section class="w-full flex items-center justify-center">
@@ -94,7 +96,7 @@ const {
                 )}
                 
                 <div class={`w-full lg:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-square`}>
-                    <img src={image} alt={title} class="w-[100%] h-[100%] object-cover rounded-lg" />
+                    <img src={imageUrl} alt={title} class="w-[100%] h-[100%] object-cover rounded-lg" />
                 </div>
             </div>
         </article>

package/src/components/Astro/Contenido_2025_Montevideo.astro

@@ -1,6 +1,6 @@
 ---
-
 import Titulo_2025_Santorini from './Titulo_2025_Santorini.astro';
+import { extractImageUrl } from '../../lib/functions.js';
 
 const {
     link='#',
@@ -11,14 +11,14 @@ const {
     description=''
 } = Astro.props;
 
-
+const imageUrl = extractImageUrl(image);
 ---
 
 <a href={link} class="w-full flex flex-col cursor-pointer px-4 md:px-0">
     <article class="w-full h-full flex flex-col rounded-lg border border-gray-200 items-center shadow-article hover:bg-gradient-to-r from-[#001978] via-[#2134F1] to-[#F81BBD] transition-all duration-300 p-[1px]">
         <div class="bg-white mt-[1px] rounded-tl-[7px] rounded-tr-[7px] h-full">
             <div class="w-full">
-                <img class="cursor-pointer rounded-tr-lg rounded-tl-lg mx-auto h-full" src={image} alt={altImage} />
+                <img class="cursor-pointer rounded-tr-lg rounded-tl-lg mx-auto h-full" src={imageUrl} alt={altImage} />
             </div>
             <div class="p-6 flex-grow flex flex-col">
                 {tag && tag !== '' && <Titulo_2025_Santorini description={tag} />}

package/src/components/Astro/CorpFooter.astro

@@ -60,7 +60,7 @@ const categories = [
 
             <div class="flex flex-col flex-[4_4_0%]">
                 <div class="mb-8">
-                    <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" alt="Logo" class="h-10" />
+                    <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" alt="Logo" class="h-10" loading="lazy" />
                 </div>
                 <div>
                     <ul class="flex flex-wrap gap-4 text-sm text-gray-800">

package/src/components/Astro/CorpNavigation.astro

@@ -43,14 +43,14 @@ const categories = [
     <nav class="px-4 py-2 w-full border-b-1 border-gray-400">
         
         <div class="w-1/2 flex items-center justify-between py-2 mx-auto">
-            <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" alt="Logo" class="h-[55px]" />
+            <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" alt="Logo" class="h-[55px]" loading="lazy" />
             
             <div class="flex items-center gap-4">
                 <a href="https://lefebvre.es/tienda" class="underline flex items-center gap-1  cursor-pointer">
                     <span>
                         Tienda
                     </span>
-                    <img src="https://assets.lefebvre.es/media/icons-2/svg/icon-basket.svg" class="w-5"></a>
+                    <img src="https://assets.lefebvre.es/media/icons-2/svg/icon-basket.svg" class="w-5" loading="lazy"></a>
                 <a href="https://espaciolefebvre.lefebvre.es/login/" class="px-4 py-3 border-1 border-black text-black hover:bg-black hover:text-white transition-all duration-300 rounded-lg font-semibold cursor-pointer">Entrar</a>
             </div>
 

package/src/components/Astro/Footer_2025_Napoles.astro

@@ -86,7 +86,7 @@ const categories = [
         <div class="flex flex-col md:flex-row gap-8 max-w-7xl mx-auto p-[32px] md:px-2">
             <div class="flex flex-col flex-[4_4_0%]">
                 <div class="mb-8">
-                    <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" alt="Logo" class="h-10" />
+                    <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" alt="Logo" class="h-10" loading="lazy" />
                 </div>
                 <div>
                     <ul class="flex flex-wrap gap-2 text-sm text-gray-800">

package/src/components/Astro/Formulario_2025_Seul.astro

@@ -1,4 +1,5 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
 
 const { 
     title, 
@@ -10,6 +11,7 @@ const {
     businessAction = false
 } = Astro.props;
 
+const imageSrcUrl = extractImageUrl(imageSrc);
 const idTargetLf2 = 'lf2-form-' + Math.random().toString(36).substring(2, 15);
 
 const structuredData = `<script type="application/ld+json">
@@ -44,7 +46,7 @@ const structuredData = `<script type="application/ld+json">
                     <div id={idTargetLf2} class="w-full flex flex-col mx-auto gap-3"></div>
                 </div>
                 <div class={`w-full p-0 md:p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
-                    <img src={imageSrc} alt={title} class="w-full md:w-4/5 min-h-auto md:min-h-[650px] object-cover rounded-lg" />
+                    <img src={imageSrcUrl} alt={title} class="w-full md:w-4/5 min-h-auto md:min-h-[650px] object-cover rounded-lg" />
                 </div>
             </div>
         </article>

package/src/components/Astro/Formulario_2025_Teruel.astro

@@ -1,4 +1,5 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
 
 const {
     bottomBorder = false,
@@ -22,6 +23,8 @@ const {
 
 } = Astro.props;
 
+const imageSrcUrl = extractImageUrl(imageSrc);
+const imageModalUrl = extractImageUrl(imageModal);
 const randomId = Math.floor(Math.random() * 1000);
 
 
@@ -53,7 +56,7 @@ const randomId = Math.floor(Math.random() * 1000);
             )}
         </div>
         <div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
-            <img src={imageSrc} alt={title} class="w-full md:w-1/2 rounded-2xl" />
+            <img src={imageSrcUrl} alt={title} class="w-full md:w-1/2 rounded-2xl" />
         </div>
     </div>
 
@@ -66,7 +69,7 @@ const randomId = Math.floor(Math.random() * 1000);
         </div>
         <div class="w-full h-full flex flex-col lg:flex-row items-start justify-center gap-8">
             <div class="w-full lg:w-1/3 flex justify-center items-center p-0 lg:p-4 mt-[32px] lg:mt-0">
-                <img src={imageModal} alt={altModal} class="w-fit" />
+                <img src={imageModalUrl} alt={altModal} class="w-fit" />
             </div>
             <div class="w-full lg:w-2/3">
                 <h2 class="font-poppins text-[#262626] text-[28px] lg:text-[32px] font-normal text-left leading-[40px] mb-[32px]">{titleModal}</h2>

package/src/components/Astro/GeometricShape.astro

@@ -1,5 +1,8 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const { imageSrc, orientation, figure = 'Trapecio', gradiantIndex = 0 } = Astro.props;
+const imageSrcUrl = extractImageUrl(imageSrc);
 const polygons = [
     {
         name: 'Trapeze',
@@ -36,5 +39,5 @@ const selectedPolygon = polygons.find(p => p.name === figure) || polygons[0];
 ---
 <div class={`w-[400px] h-[400px] relative ${orientation === 'right' ? '' : '-scale-x-100'}`}>
     <div class={`absolute bottom-0 right-0 w-full h-full bg-cover mask-no-repeat mask-bottom-right ${gradiants[gradiantIndex]}`} style={`mask-image: url(${selectedPolygon.polygon});`}></div>
-    <img src={`${imageSrc}`} loading="lazy" class="absolute bottom-0 right-0 max-h-[400px] h-auto z-10 mask-no-repeat mask-bottom-right" style={`mask-image: url(${selectedPolygon.full});`} alt="Figura Geométrica" />
+    <img src={`${imageSrcUrl}`} loading="lazy" class="absolute bottom-0 right-0 max-h-[400px] h-auto z-10 mask-no-repeat mask-bottom-right" style={`mask-image: url(${selectedPolygon.full});`} alt="Figura Geométrica" />
 </div>

package/src/components/Astro/GeometricShapeCard.astro

@@ -1,5 +1,6 @@
 ---
 import GeometricShape from './GeometricShape.astro';
+import { extractImageUrl } from '../../lib/functions.js';
 
 
 const {
@@ -12,13 +13,15 @@ const {
     gradiantIndex = 0
 } = Astro.props;
 
+const imageSrcUrl = extractImageUrl(imageSrc);
+
 const randomId = `geo-shape-card-`+ Math.random().toString(36).substring(2, 15);
 
 ---
 
 <section class={`flex my-8 items-center justify-center relative min-h-[500px]`}>
     <div class={`absolute top-0 ${orientation === 'right' ? 'right-0' : 'left-0'}`}>
-        <GeometricShape imageSrc={imageSrc} orientation={orientation} figure={figure} gradiantIndex={gradiantIndex} />
+        <GeometricShape imageSrc={imageSrcUrl} orientation={orientation} figure={figure} gradiantIndex={gradiantIndex} />
     </div>
     <div class={`flex text-gray-800 flex-col w-3/5 mx-auto ${orientation === 'right' ? 'text-left items-start' : 'text-right items-end'}`}>
         <h2 class="text-4xl font-bold mb-5 max-w-3xl">{title}</h2>

package/src/components/Astro/HeaderCorporativo.astro

@@ -13,12 +13,12 @@ const {
         <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
             
             <a href="/" class="flex justify-between items-center">
-                <img src={logo} class="" alt={alt}/>
+                <img src={logo} class="" alt={alt} loading="lazy"/>
             </a>
 
 
             {showLefebvreLogo && (
-                <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" class="" alt="Lefebvre"/>
+                <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" loading="lazy" class="" alt="Lefebvre"/>
             )}
                      
         </div>

package/src/components/Astro/ImageTextSimple.astro

@@ -1,10 +1,14 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     image,
     title,
     video ,
     description,
 } = Astro.props;
+
+const imageUrl = extractImageUrl(image);
 ---
 
 <!-- Componente que sirve para las páginas soluciones-profesionales y conocenos entre otras. Si se le pasa por parámetro una imagen, la muestra a la izquierda y el texto a la derecha. Si se le pasa un vídeo, muestra el vídeo a la izquierda y el texto a la derecha. -->
@@ -15,7 +19,7 @@ const {
                 
                 {image
                     ? (
-                            <div class="w-full lg:w-1/2 lg:mx-4 mask-add mask-[url(https://assets.lefebvre.es/media/logos-2/svg/lefebvre-iso.svg)] mask-no-repeat mask-center bg-cover" style={`background-image: url('${image}')`} id="rotating-image"></div>
+                            <div class="w-full lg:w-1/2 lg:mx-4 mask-add mask-[url(https://assets.lefebvre.es/media/logos-2/svg/lefebvre-iso.svg)] mask-no-repeat mask-center bg-cover" style={`background-image: url('${imageUrl}')`} id="rotating-image"></div>
                         )
                     : video
                         ? (

package/src/components/Astro/Imagen_2025_Bogota.astro

@@ -1,4 +1,12 @@
 ---
+/**
+ * 🎯 Imagen_2025_Bogota
+ * 
+ * Componente de imagen con overlay de texto.
+ * Usa LimboImage para simplificar el manejo de imágenes de Limbo.
+ */
+import LimboImage from '../LimboImage.astro';
+
 const {
     title,
     description,
@@ -10,19 +18,19 @@ const {
     showBtn = true,
     showDescription = true,
     color = '#ffffff',
-    } = Astro.props;
+} = Astro.props;
 
-    const structuredData = `<script type="application/ld+json">
-    {
-        "@context": "https://schema.org",
-        "@type": "ImageObject",
-        "name": "${title || ''}",
-        "description": "${description ? description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') : ''}",
-        "url": "${src || iframeSrc || ''}",
-        "contentUrl": "${src || iframeSrc || ''}",
-        ${src ? `"encodingFormat": "image"` : `"encodingFormat": "video/mp4"`}
-    }
-    </script>`;
+const structuredData = `<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "ImageObject",
+    "name": "${title || ''}",
+    "description": "${description ? description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') : ''}",
+    "url": "${src || iframeSrc || ''}",
+    "contentUrl": "${src || iframeSrc || ''}",
+    ${src ? `"encodingFormat": "image"` : `"encodingFormat": "video/mp4"`}
+}
+</script>`;
 ---
 
 <section class="w-full flex items-center justify-center">
@@ -32,13 +40,19 @@ const {
         <div class="max-w-full lg:max-w-7xl h-full flex justify-center items-center aspect-auto relative md:w-4/5 lg:aspect-video">
             <div class="absolute inset-0">
 
-                {src && src !== "" ? (
-                    <img src={src} alt={alt} title={title} class="object-cover object-center w-full h-full rounded-2xl shadow-lg"> 
-                ) : (
+                {src ? (
+                    <LimboImage 
+                        src={src} 
+                        alt={alt || title || ''} 
+                        title={title}
+                        class="object-cover object-center w-full h-full rounded-2xl shadow-lg"
+                        fallback={iframeSrc}
+                    />
+                ) : iframeSrc ? (
                     <video autoplay loop muted playsinline class="object-cover object-center w-full h-full rounded-2xl shadow-lg">
                         <source src={iframeSrc} type="video/mp4" />
                     </video> 
-                )}                
+                ) : null}                
             </div>
             
             <div class="w-4/5 relative z-10 flex flex-col justify-center items-center h-full text-center p-0 py-8 md:p-6">

package/src/components/Astro/Imagen_2025_Fukushima.astro

@@ -1,4 +1,6 @@
 ---
+import { extractImageUrl } from '../../lib/functions.js';
+
 const {
     link = false,
     image,
@@ -6,6 +8,7 @@ const {
     descriptionImage
     } = Astro.props;
 
+const imageUrl = extractImageUrl(image);
 ---
 
 
@@ -14,12 +17,12 @@ const {
         <div class="w-full">
             {(link && link !== '') ? (
                 <a href={link} class="w-full flex flex-col flex-1 justify-center items-center">
-                    <img class="max-w-[80px] w-fit mb-4" src={image} alt={altImage} />
+                    <img class="max-w-[80px] w-fit mb-4" src={imageUrl} alt={altImage} />
                     <p class="text-[14px] text-[#363942]" set:html={descriptionImage}></p>
                 </a>
             ) : (
                 <div class="w-full flex flex-col flex-1 justify-center items-center max-h-[94px]">
-                    <img class="max-w-[80px] w-fit mb-4" src={image} alt={altImage} />
+                    <img class="max-w-[80px] w-fit mb-4" src={imageUrl} alt={altImage} />
                 </div>
                 <div class="w-full flex flex-col flex-1 justify-center items-center">
                     <p class="text-[14px] text-[#363942]" set:html={descriptionImage}></p>