Contents
Introducción
En este artículo explico con todo detalle cómo generar imágenes on-the-fly (a demanda) en un sitio WordPress usando PHP y cómo cachearlas de forma segura y eficiente. La idea es crear un mini-plugin que reciba una URL con parámetros (por ejemplo: la slug de un recurso y las dimensiones), genere la imagen en tiempo real la primera vez y, a partir de ahí, sirva la copia cacheada desde el disco, gestionando las cabeceras HTTP (Last-Modified / 304) para reducir ancho de banda y carga del servidor.
Requisitos
- WordPress 4.7 (pero el código funcionará en versiones modernas).
- PHP 7.x o 8.x con la extensión GD instalada (o Imagick si quieres adaptar el código).
- Acceso para instalar un plugin o añadir código en mu-plugins.
- Permisos de escritura en la carpeta de uploads de WordPress (wp-content/uploads).
Resumen de la arquitectura
La solución propuesta hace lo siguiente:
- Registra una regla de reescritura para URLs del tipo: /dynamic-image/{slug}/{WIDTH}x{HEIGHT}.jpg
- Intercepta la petición con template_redirect y, si coincide, procesa la generación/servicio de la imagen.
- Antes de generar la imagen, comprueba si existe una copia cacheada en wp-content/uploads/dynamic-images/ y, si existe y no está caducada, sirve directamente el archivo.
- Si no existe, genera la imagen con GD (o ImageMagick si adaptas), guarda el archivo en la carpeta de cache y lo sirve.
- Maneja cabeceras HTTP (Content-Type, Cache-Control, Last-Modified) y responde con 304 si procede.
Instalación rápida
Crea un archivo PHP en wp-content/plugins/dynamic-image-on-the-fly/dynamic-image.php y pega el siguiente código. Luego activa el plugin desde el panel de WordPress. El código incluye la activación que fuerza refrescar las reglas de reescritura.
lt?php
/
Plugin Name: Dynamic Image On-The-Fly (cache)
Description: Genera imágenes on-the-fly y las cachea en uploads/dynamic-images.
Version: 1.0
Author: Tu Nombre
/if ( ! defined( ABSPATH ) ) {
exit
}/
Añade una query var para detectar nuestras peticiones
/
function dio_add_query_vars( vars ) {
vars[] = dynamic_image
vars[] = di_slug
vars[] = di_w
vars[] = di_h
return vars
}
add_filter( query_vars, dio_add_query_vars )/
Regla de reescritura: /dynamic-image/{slug}/{WIDTH}x{HEIGHT}.jpg
/
function dio_add_rewrite_rule() {
add_rewrite_rule(
^dynamic-image/([^/] )/([0-9] )x([0-9] ).jpg
|
|
Acepto donaciones de BAT's mediante el navegador Brave :) |