Cómo Crear una Galería Optimizada para Web con Grav

Este tutorial te guiará a través del proceso completo para crear una galería moderna y optimizada en tu sitio web basado en Grav. Aprenderás a instalar las herramientas necesarias, automatizar la optimización de imágenes y configurar el plugin adecuado para mostrar tus fotos de forma profesional.

1. Instalación de Herramientas Necesarias

Para optimizar y procesar imágenes automáticamente, utilizaremos ImageMagick y cwebp (de libwebp). Estas herramientas son esenciales para redimensionar, comprimir y convertir imágenes al formato WebP.

Instalación en Linux (Debian/Ubuntu)

Abre una terminal y ejecuta los siguientes comandos:

```bash
# Actualiza los paquetes disponibles
sudo apt update

# Instala ImageMagick
sudo apt install imagemagick

# Instala cwebp (herramienta para convertir a WebP)
sudo apt install webp
```

Nota: Si usas otra distribución de Linux, consulta su gestor de paquetes correspondiente.

2. Script para Optimizar y Renombrar Imágenes

El siguiente script en Bash automatiza el proceso de optimización y conversión de imágenes. Reduce su tamaño manteniendo la calidad, genera versiones para dispositivos grandes y móviles, y renombra las imágenes con un prefijo personalizado y numeración consecutiva.

Guarda el siguiente código en un archivo llamado optimize_and_rename.sh:

```bash
#!/bin/bash

# Variables configurables
INPUT_DIR="./input"       # Carpeta donde están las imágenes originales
OUTPUT_DIR="./output"     # Carpeta donde se guardarán las imágenes procesadas
MAX_WIDTH_GRANDE=1600     # Ancho máximo para imágenes grandes
MAX_HEIGHT_GRANDE=1600    # Alto máximo para imágenes grandes
MAX_WIDTH_MOVIL=800       # Ancho máximo para imágenes móviles
MAX_HEIGHT_MOVIL=800      # Alto máximo para imágenes móviles
QUALITY=80                # Calidad del formato WebP (0-100)
PREFIX=""                 # Prefijo para los nombres de archivo (ejemplo: "baleares")

# Verificar si se proporcionó un prefijo
if [ -z "$1" ]; then
    echo "Uso: $0 <prefijo> [calidad]"
    echo "Ejemplo: $0 baleares 80"
    exit 1
else
    PREFIX="$1"
fi

# Si se proporciona una calidad personalizada, usarla
if [ ! -z "$2" ]; then
    QUALITY=$2
fi

# Crear la carpeta de salida si no existe
mkdir -p "$OUTPUT_DIR"

# Contador para numerar las imágenes
counter=1

# Procesar cada imagen en la carpeta de entrada
for file in "$INPUT_DIR"/*; do
    if [[ -f "$file" ]]; then
        # Obtener el nombre base y la extensión del archivo
        filename=$(basename -- "$file")
        extension="${filename##*.}"
        base="${filename%.*}"

        echo "Procesando $filename..."

        # Generar nombre único con prefijo y número
        new_name="${PREFIX}-$(printf "%03d" $counter)"

        # Corregir la orientación antes de redimensionar
        convert "$file" -auto-orient -resize "${MAX_WIDTH_GRANDE}x${MAX_HEIGHT_GRANDE}>" "$OUTPUT_DIR/${new_name}-grande-temp.$extension"
        cwebp -q $QUALITY "$OUTPUT_DIR/${new_name}-grande-temp.$extension" -o "$OUTPUT_DIR/${new_name}-grande.webp"
        rm "$OUTPUT_DIR/${new_name}-grande-temp.$extension"

        # Corregir la orientación antes de redimensionar para versión móvil
        convert "$file" -auto-orient -resize "${MAX_WIDTH_MOVIL}x${MAX_HEIGHT_MOVIL}>" "$OUTPUT_DIR/${new_name}-movil-temp.$extension"
        cwebp -q $QUALITY "$OUTPUT_DIR/${new_name}-movil-temp.$extension" -o "$OUTPUT_DIR/${new_name}-movil.webp"
        rm "$OUTPUT_DIR/${new_name}-movil-temp.$extension"

        echo "Convertido a ${new_name}-grande.webp y ${new_name}-movil.webp"

        # Incrementar contador
        ((counter++))
    fi
done

echo "Proceso completado. Todas las imágenes han sido procesadas."
```

Cómo Usar el Script

  1. Asigna Permisos de Ejecución:

    chmod +x optimize_and_rename.sh

  2. Crea Carpetas input y output:

    mkdir input output

  3. Coloca Tus Imágenes en input:

    • Asegúrate de que todas las imágenes estén en la carpeta input.

  4. Ejecuta el Script:

    ./optimize_and_rename.sh baleares 80
    • baleares: Prefijo para las imágenes.
    • 80: Calidad del formato WebP (opcional, valor predeterminado: 80).

  5. Resultados:

    • Las imágenes optimizadas aparecerán en la carpeta output con nombres como:
      • baleares-001-grande.webp
      • baleares-001-movil.webp

3. Instalación del Plugin Shortcode Gallery PlusPlus

Para mostrar las imágenes en tu sitio web de Grav, utilizaremos el plugin Shortcode Gallery PlusPlus, que permite crear galerías modernas y responsivas con facilidad.

Instalación del Plugin

  1. Abre una terminal en tu proyecto de Grav.
  2. Instala el plugin mediante GPM: 
    bin/gpm install shortcode-gallery-plusplus
  3. Activa el plugin desde el administrador de Grav.

Configuración Básica

En tu página Markdown, utiliza el siguiente shortcode para crear una galería:

```markdown





```

Nota: Asegúrate de que las imágenes generadas por el script estén en la carpeta correspondiente dentro de user/pages/tu-galeria.

4. Beneficios de Este Flujo de Trabajo

  1. Optimización Automática:

    • El script reduce significativamente el tamaño de las imágenes sin perder calidad, mejorando la velocidad de carga del sitio.

  2. Nombres Estructurados:

    • Las imágenes se renombran automáticamente con un prefijo y numeración consecutiva, facilitando su gestión.

  3. Compatibilidad Responsiva:

    • Se generan dos versiones por imagen: una para pantallas grandes y otra para móviles, asegurando una experiencia óptima en todos los dispositivos.

  4. Fácil Integración con Grav:

    • El plugin Shortcode Gallery PlusPlus ofrece una sintaxis simple y opciones avanzadas para personalizar tus galerías.

5. Consejos Adicionales

  • Organiza tus carpetas: Mantén una estructura clara para tus imágenes (por ejemplo, user/pages/galeria/baleares/input y output).
  • Ajusta la calidad WebP: Experimenta con diferentes valores de calidad para encontrar el equilibrio ideal entre peso y calidad visual.
  • Usa srcset: En tus plantillas Twig, considera usar atributos como srcset para ofrecer versiones responsivas de las imágenes.

6. Conclusión

Con este flujo de trabajo, has logrado automatizar por completo el proceso de optimización y preparación de imágenes para tu galería en Grav. Al combinar herramientas como ImageMagick, cwebp y el plugin Shortcode Gallery PlusPlus, ahora puedes crear galerías modernas, rápidas y fáciles de mantener.

Este enfoque no solo te ahorrará tiempo, sino que también garantizará que tus visitantes disfruten de una experiencia visual fluida y rápida en todos los dispositivos.