How to Create an Optimized Photo Gallery for the Web with Grav

This tutorial will guide you through the complete process of creating a modern and optimized photo gallery on your Grav-based website. You'll learn how to install the necessary tools, automate image optimization, and configure the appropriate plugin to display your photos professionally.

1. Installation of Necessary Tools

To optimize and process images automatically, we will use ImageMagick and cwebp (from libwebp). These tools are essential for resizing, compressing, and converting images to the WebP format.

Installation on Linux (Debian/Ubuntu)

Open a terminal and run the following commands:

```bash
# Update available packages
sudo apt update

# Install ImageMagick
sudo apt install imagemagick

# Install cwebp (tool to convert to WebP)
sudo apt install webp
```

Note: If you use another Linux distribution, consult its corresponding package manager.

2. Script to Optimize and Rename Images

The following Bash script automates the process of optimizing and converting images. It reduces their size while maintaining quality, generates versions for large screens and mobile devices, and renames images with a custom prefix and sequential numbering.

Save the following code in a file named optimize_and_rename.sh:

```bash
#!/bin/bash

# Configurable variables
INPUT_DIR="./input"       # Folder where original images are located
OUTPUT_DIR="./output"     # Folder where processed images will be saved
MAX_WIDTH_GRANDE=1600     # Maximum width for large images
MAX_HEIGHT_GRANDE=1600    # Maximum height for large images
MAX_WIDTH_MOVIL=800       # Maximum width for mobile images
MAX_HEIGHT_MOVIL=800      # Maximum height for mobile images
QUALITY=80                # WebP quality (0-100)
PREFIX=""                 # Prefix for filenames (example: "baleares")

# Check if a prefix is provided
if [ -z "$1" ]; then
    echo "Usage: $0 <prefix> [quality]"
    echo "Example: $0 baleares 80"
    exit 1
else
    PREFIX="$1"
fi

# Use custom quality if provided
if [ ! -z "$2" ]; then
    QUALITY=$2
fi

# Create the output folder if it doesn't exist
mkdir -p "$OUTPUT_DIR"

# Counter for numbering images
counter=1

# Process each image in the input folder
for file in "$INPUT_DIR"/*; do
    if [[ -f "$file" ]]; then
        # Get the base name and extension of the file
        filename=$(basename -- "$file")
        extension="${filename##*.}"
        base="${filename%.*}"

        echo "Processing $filename..."

        # Generate a unique name with prefix and number
        new_name="${PREFIX}-$(printf "%03d" $counter)"

        # Correct orientation before resizing
        convert "$file" -auto-orient -resize "${MAX_WIDTH_GRANDE}x${MAX_HEIGHT_GRANDE}>" "$OUTPUT_DIR/${new_name}-large-temp.$extension"
        cwebp -q $QUALITY "$OUTPUT_DIR/${new_name}-large-temp.$extension" -o "$OUTPUT_DIR/${new_name}-large.webp"
        rm "$OUTPUT_DIR/${new_name}-large-temp.$extension"

        # Correct orientation before resizing for mobile version
        convert "$file" -auto-orient -resize "${MAX_WIDTH_MOVIL}x${MAX_HEIGHT_MOVIL}>" "$OUTPUT_DIR/${new_name}-mobile-temp.$extension"
        cwebp -q $QUALITY "$OUTPUT_DIR/${new_name}-mobile-temp.$extension" -o "$OUTPUT_DIR/${new_name}-mobile.webp"
        rm "$OUTPUT_DIR/${new_name}-mobile-temp.$extension"

        echo "Converted to ${new_name}-large.webp and ${new_name}-mobile.webp"

        # Increment counter
        ((counter++))
    fi
done

echo "Process completed. All images have been processed."
```

How to Use the Script

1. Assign Execution Permissions:

   chmod +x optimize_and_rename.sh

2. Create input and output Folders:

   mkdir input output

3. Place Your Images in input:

   • Make sure all images are in the input folder.

4. Run the Script:

   ./optimize_and_rename.sh baleares 80

   • baleares: Prefix for the images.
   • 80: WebP quality (optional, default: 80).

5. Results:

   • The optimized images will appear in the output folder with names like:
     • baleares-001-large.webp
     • baleares-001-mobile.webp

3. Installation of the Shortcode Gallery PlusPlus Plugin

To display images on your Grav website, we will use the Shortcode Gallery PlusPlus plugin, which allows you to create modern and responsive galleries easily.

Installing the Plugin

1. Open a terminal in your Grav project.
2. Install the plugin using GPM:

   bin/gpm install shortcode-gallery-plusplus

3. Activate the plugin from the Grav admin panel.

Basic Configuration

In your Markdown page, use the following shortcode to create a gallery:

```markdown



```

Note: Ensure that the images generated by the script are in the appropriate folder within user/pages/your-gallery.

4. Benefits of This Workflow

1. Automatic Optimization:

   • The script significantly reduces image size without sacrificing quality, improving website load speed.

2. Structured Naming:

   • Images are automatically renamed with a custom prefix and sequential numbering, making them easier to manage.

3. Responsive Compatibility:

   • Two versions are generated for each image: one for large screens and one for mobile devices, ensuring optimal experience across all devices.

4. Easy Integration with Grav:

   • The Shortcode Gallery PlusPlus plugin offers simple syntax and advanced options for customizing your galleries.

5. Additional Tips

• Organize Your Folders: Keep a clear structure for your images (e.g., user/pages/gallery/baleares/input and output).
• Adjust WebP Quality: Experiment with different quality values to find the ideal balance between size and visual quality.
• Use srcset: In your Twig templates, consider using attributes like srcset to offer responsive image versions.

6. Conclusion

With this workflow, you've fully automated the process of optimizing and preparing images for your Grav gallery. By combining tools like ImageMagick, cwebp, and the Shortcode Gallery PlusPlus plugin, you can now create modern, fast, and easy-to-maintain galleries.

This approach not only saves you time but also ensures that your visitors enjoy a smooth and fast visual experience on all devices.