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 galería de imágenes con pinch-to-zoom, navegación por swipe 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 dirección, compartible o enlazable; desde PhotoSwipe v5 hay que implementarlo por cuenta propia, porque el módulo de hash integrado desapareció. Para SEO esas direcciones no cuentan, ya que Google no considera URLs propias los fragmentos tras el signo #; para la búsqueda de imágenes cuentan los elementos <img> con texto alternativo significativo y nombres de archivo descriptivos.

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 engancha PhotoSwipe a la ampliación de imágenes de TYPO3

La extensión no trae un elemento de contenido propio, sino que activa PhotoSwipe para la ampliación de imágenes nativa de TYPO3. Los redactores mantienen las imágenes como siempre en los elementos de contenido de imagen, desde la mediateca FAL, activan la ampliación al hacer clic y ponen pies de foto opcionales. Al renderizar, la extensión añade al enlace el ancho y el alto de cada imagen como atributos data; con ellos, la librería JavaScript PhotoSwipe construye la galería.

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 registra ambos mediante la API PHP del AssetCollector en su ext_localconf.php, es decir, en todas las páginas, contengan o no una galería. Para evitar peticiones innecesarias, los ficheros se incluyen en su lugar con los ViewHelpers Fluid f:asset.css y f:asset.script en la plantilla de la galería; así solo llegan a páginas con 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 y v13 sin 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 no hace falta actualizar las plantillas, porque la versión 2.0.10 de la extensión soporta por igual v12.4 y v13. 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.