PhotoSwipe para TYPO3

Las galerías de imágenes en dispositivos móviles solo funcionan con lightboxes optimizadas para táctil

La mayoría de webs TYPO3 usan lightboxes pensadas para navegadores de escritorio: Fancybox, Colorbox, Magnific Popup. En smartphones y tabletas esas soluciones se sienten ajenas, porque el zoom y la navegación no responden a gestos táctiles, sino a clics de ratón. PhotoSwipe es una librería JavaScript construida desde cero para táctil. La extensión TYPO3 integra PhotoSwipe como una galería de imágenes completa con pinch-to-zoom, navegación por swipe, deep linking y layout responsive. Con menos de 30 KB (minificada y con gzip), PhotoSwipe es al mismo tiempo una de las soluciones de lightbox más ligeras del mercado.

Para webs con un alto porcentaje de tráfico móvil, es decir, prácticamente todas hoy, no es una mejora opcional, sino un requisito funcional. Los visitantes esperan los mismos gestos que conocen de la app de fotos nativa de su smartphone.

Los escenarios típicos incluyen galerías de portfolio, imágenes de producto y archivos de medios

El escenario más frecuente son las galerías de portfolio en webs de agencias, estudios de arquitectura o fotografía. Un fotógrafo muestra de 20 a 40 imágenes por proyecto. Los visitantes hacen clic en una miniatura, ven la imagen en resolución completa, hacen zoom con pinch y deslizan a la siguiente imagen. Deep linking significa que cada imagen tiene su propia URL, compartible o enlazable. Eso es relevante para SEO, porque Google puede indexar las imágenes a través de las URLs deep link.

Un segundo escenario son las páginas de detalle de producto en instalaciones TYPO3 cercanas al e-commerce. Un fabricante de muebles muestra cinco perspectivas por producto. PhotoSwipe las renderiza como galería con zoom de alta resolución, que en escritorio se activa con la rueda del ratón y en táctil con doble toque. La calidad del zoom depende directamente de la resolución de la imagen origen. Recomendamos al menos 2000 píxeles de ancho para imágenes de producto que vayan a examinarse con zoom.

Tercer escenario: archivos de medios y áreas de prensa. Una universidad pone a disposición 500 fotos de eventos. PhotoSwipe renderiza la galería con buen rendimiento, porque las imágenes solo se cargan al hojearse (lazy loading). La vista general de miniaturas muestra 50 imágenes por página sin tiempo de carga apreciable.

La arquitectura técnica integra PhotoSwipe como elemento de contenido TYPO3

La extensión registra un elemento de contenido propio en el backend de TYPO3. Los redactores seleccionan imágenes desde la mediateca FAL, definen el orden y ponen pies de foto opcionales. El renderizado lo asumen plantillas Fluid que inicializan la librería JavaScript PhotoSwipe y pasan las URLs de las imágenes como array JSON.

PhotoSwipe en sí no tiene dependencias, ni jQuery, ni framework. La librería consiste en un fichero CSS y un fichero JS. La extensión TYPO3 carga ambos vía el AssetCollector de TypoScript, de modo que solo se incluyen en páginas que realmente contienen una galería. Eso evita peticiones innecesarias en páginas sin galería.

Para imágenes responsive, la extensión soporta atributos srcset: el navegador carga, según el viewport, el tamaño de imagen adecuado. El image processing de TYPO3 genera las variantes automáticamente. Combinado con conversión a WebP (ver la extensión webp), las galerías PhotoSwipe alcanzan tiempos de carga óptimos.

Desde el punto de vista del RGPD, la integración es inocua: PhotoSwipe no realiza peticiones a servidores externos, no coloca cookies y no transfiere datos a terceros. Eso es relevante para entidades del sector público y páginas que quieran operar sin banner de consentimiento para esta función.

Los problemas frecuentes son conflictos con otras extensiones de lightbox y tamaños de imagen faltantes

El problema más frecuente es el conflicto con una extensión de lightbox ya instalada. Si Fancybox y PhotoSwipe están activas simultáneamente, ambas reaccionan al clic sobre imágenes y generan overlays duplicados. La solución: desactivar la extensión de lightbox antigua y retirar sus includes CSS/JS del setup TypoScript. Un grep por “fancybox” o “colorbox” en los ficheros TypoScript muestra si aún se cargan restos de la librería antigua.

Segundo problema: tamaños de imagen faltantes. PhotoSwipe necesita para el zoom las dimensiones reales en píxeles de la imagen. Si la extensión no puede leerlas de los metadatos FAL, el zoom no funciona o salta a un tamaño erróneo. La solución: revisar los metadatos FAL de todas las imágenes de la galería. TYPO3 lee width y height automáticamente al subir, pero imágenes importadas o insertadas vía CLI a veces tienen los metadatos vacíos.

Un tercer tema es la accesibilidad. Conforme a la WCAG 2.1 y al Real Decreto 1112/2018, los contenidos interactivos deben ser manejables por teclado. PhotoSwipe ofrece navegación por teclado (flechas, Escape, Enter) y es compatible con lectores de pantalla cuando los textos alternativos de las imágenes se mantienen en el backend de TYPO3. Sin textos alt, tanto la accesibilidad como el SEO de imágenes sufren.

PhotoSwipe v5 corre en TYPO3 v12, la compatibilidad con v13 requiere actualizar plantillas

La librería PhotoSwipe actual está en versión 5. La extensión TYPO3 se ha adaptado a diferentes versiones de TYPO3 y corre estable en v12. Para TYPO3 v13 se requiere actualizar las plantillas Fluid y la configuración TypoScript, porque v13 ha cambiado ligeramente el flujo de trabajo del AssetCollector. Gosign actualiza en los upgrades de TYPO3 todas las extensiones de frontend, incluida la lightbox, y comprueba si los gestos táctiles funcionan correctamente en versiones actuales de iOS y Android.