Actualización de mi sistema WordPress y galería integrada
- Plugin que funcione con las versiones 6.8.3 de WordPress y 15.6.0 de Piwigo.
- Instalable como un fichero zip, de tal manera que pueda usarse desde el gestor de plugins de la instalación de WordPress.
- Compatible con el editor Gutenberg.
- Tenía que permitir insertar imágenes individuales de una galería mediante una referencia al número de la imagen (por ejemplo, si en la URI de Piwigo la imagen estaba referenciada como /piwigo/picture.php?/7585/ se habría de poder insertar la imagen indicando el número 7585)
- Se había de poder insertar toda una galería.
El resultado fue espectacularmente bueno. Apenas fue necesario corregir algunos aspectos menores para tener un plugin perfectamente funcional. Fue así como nació Piwigo Gallery Integration, una solución moderna y robusta que colma este vacío en el ecosistema de WordPress. A continuación entro en más detalle sobre las características del plugin.
El Problema: Un Vacío en el Ecosistema
Como hemos visto, Piwigo es una plataforma de gestión de galerías fotográficas extremadamente potente y flexible, utilizada por miles de fotógrafos, empresas de fotografía y entusiastas en todo el mundo. Sin embargo, mantener una galería separada de WordPress siempre ha presentado desafíos a la hora de integración.
Limitaciones de los Plugins Existentes
| Característica | Plugins Antiguos | Piwigo Gallery Integration |
|---|---|---|
| Soporte Gutenberg | ✗ | ✓ |
| WordPress 6.8.3 | ✗ | ✓ |
| Piwigo 15.6.0 | ✗ | ✓ |
| Imágenes Individuales | ✗ | ✓ |
| Galerías Completas | ✓ | ✓ |
| Preview en Vivo | ✗ | ✓ |
| Panel de Configuración | ✓ | ✓ |
Como vemos en la tabla anterior, los plugins existentes no ofrecían una solución integral para usuarios modernos de WordPress. Era necesario crear algo desde cero.
Características del Plugin Piwigo Gallery Integration
Piwigo Gallery Integration ha sido diseñado teniendo en cuenta las necesidades reales de los usuarios de WordPress que dependen de Piwigo para su gestión de imágenes. El plugin ofrece una solución completa y moderna.
🖼️ Imagen Individual
Inserta imágenes específicas usando solo su ID. Perfecto para artículos que destacan fotografías particulares.
🎨 Galería Completa
Muestra galerías enteras de Piwigo con diseño responsive y totalmente personalizable.
📱 Diseño Responsive
Todas las imágenes y galerías se adaptan perfectamente a dispositivos móviles, tablets y escritorio.
⚙️ Configuración Sencilla
Panel de administración intuitivo con prueba de conexión automática a Piwigo.
🔗 Enlaces Directos
Opción para enlazar directamente a imágenes originales en alta resolución.
🎯 Bloques Nativos
Integración perfecta con Gutenberg sin necesidad de shortcodes o código manual.
Cómo Funciona
El flujo de trabajo es extremadamente sencillo:
- Instala y activa el plugin desde WordPress
- Configura la URL de tu instalación Piwigo en Ajustes
- En el editor de Gutenberg, busca los bloques «Piwigo Single Image» o «Piwigo Gallery»
- Ingresa el ID de la imagen o categoría
- Personaliza opciones como tamaño, número de columnas y enlaces
- ¡Listo! El contenido se sincroniza automáticamente desde Piwigo
Arquitectura y Diseño Técnico
Estructura del Proyecto
El plugin está organizado de manera modular y escalable:
├── piwigo-gallery-integration.php # Núcleo principal
├── admin/
│ └── settings-page.php # Panel de configuración
├── blocks/
│ ├── single-image/ # Bloque imagen individual
│ │ ├── block.json # Metadatos del bloque
│ │ ├── index.js # Lógica del bloque
│ │ ├── style.css # Estilos frontend
│ │ └── editor.css # Estilos del editor
│ └── gallery/ # Bloque galería
│ ├── block.json
│ ├── index.js
│ ├── style.css
│ └── editor.css
├── readme.txt # Documentación WordPress
└── README.md # Documentación técnica
Stack Tecnológico
- PHP 7.4+ – Backend y procesamiento del servidor
- JavaScript – Interactividad en Gutenberg (sin transpilación)
- React/JSX (wp-element) – Componentes UI en el editor
- CSS3 – Estilos responsive y modernos
- API REST de Piwigo – Comunicación con galerías
- Gutenberg Block API – Integración con WordPress
Decisiones Arquitectónicas Clave
1. Shortcodes Dinámicos
En lugar de guardar HTML con URLs completas en la base de datos, el plugin utiliza shortcodes simples que se resuelven dinámicamente:
[piwigo imageId=7584 size="medium" link="true" caption="true"]
…que tiene como resultado la inserción de la siguiente imagen:
Esta arquitectura ofrece múltiples ventajas: si cambias la URL de Piwigo, todas las imágenes se actualizan automáticamente sin necesidad de editar cada post.
En cuanto al editor Gutenberg, el plugin proporciona los siguientes menús contextuales para automatizar la inserción de los shortcodes:
2. Integración Segura con API
El plugin implementa:
- Validación de URLs antes de hacer llamadas API
- Caching de resultados para optimizar rendimiento
- Manejo robusto de errores de conexión
- Soporte para autenticación opcional en galerías privadas
3. Componentes Reutilizables
Ambos bloques (imagen y galería) comparten funcionalidad común, minimizando código duplicado y facilitando el mantenimiento.
4. Sin Necesidad de Build Tool
A diferencia de muchos plugins modernos, este plugin no requiere npm, webpack o compiladores. Todo funciona con JavaScript vanilla compatible con WordPress out-of-the-box.
Ventajas Técnicas Principales
Rendimiento
- Las imágenes se cargan directamente desde Piwigo, sin duplicarlas en WordPress
- Caching inteligente reduce llamadas API innecesarias
- Lazy loading automático en galerías grandes
Mantenibilidad
- Código limpio y bien documentado
- Estructura modular facilita futuras mejoras
- Cambios de configuración se aplican globalmente
Compatibilidad
- Funciona con WordPress 6.0 en adelante
- Compatible con Piwigo 15.6.0 y versiones superiores
- Sin conflictos con otros plugins
Experiencia de Usuario
- Preview en vivo en el editor Gutenberg
- Panel de configuración intuitivo
- Prueba de conexión con un click
Instalación y Configuración Rápida
Requisitos Previos
- WordPress 6.0 o superior
- PHP 7.4 o superior
- Piwigo 15.6.0 o superior (instalado en el mismo servidor u otro con acceso)
- Acceso a la API de Piwigo (habilitada por defecto)
Pasos de Instalación
- Descarga el archivo ZIP del plugin
- Ve a Plugins > Añadir nuevo > Subir plugin
- Selecciona el archivo ZIP y haz clic en «Instalar ahora»
- Activa el plugin
- Ve a Ajustes > Piwigo Gallery
- Ingresa la URL de tu Piwigo (ej: https://www.ejemplo.com/piwigo)
- Haz clic en «Probar Conexión»
- ¡Listo para usar!
Conclusión
Piwigo Gallery Integration representa un paso importante hacia la modernización de las herramientas disponibles para usuarios de WordPress que dependen de Piwigo. Colma el vacío dejado por plugins obsoletos y ofrece una solución elegante, eficiente y fácil de usar.
Con su soporte completo para Gutenberg, arquitectura moderna y enfoque en la experiencia del usuario, este plugin demuestra que es posible crear integraciones poderosas sin sacrificar la simplicidad.
Llegados a este punto, disponía de un WordPress actualizado, con un nuevo sistema de galerías, y un plugin para insertar imágenes en los artículos de manera sencilla. Pero quedaba lo más complicado. Arreglar miles de referencias al sistema de galerías antiguo. Lo que teníamos por delante era la etapa reina.
