PrestaShop: Generate webp thumbnails based on image types and sizes defined in a .cfg file

convertTable.cfg

cart_default:125x125
small_default:98x98
medium_default:452x452
home_default:250x250
large_default:800x800
default_xs:120x120
default_s:160x160
default_m:200x200
default_md:320x320
default_xl:400x400
product_main:720x720
product_main_2x:1440x1440
end:end

generate_webp_thumbnails.sh

#!/bin/bash

# Get the directory of the script
SCRIPT_DIR=$(dirname "$0")

# Handle interrupt signal (Ctrl+C)
trap 'echo -e "\nScript interrupted. Exiting..."; exit 1;' SIGINT

if [ $# -lt 1 ]; then
    echo "Usage: $0 <path> [--force]"
    exit 1
fi

TARGET_PATH=$1
FORCE_REPLACE=$2

if [ ! -f "${SCRIPT_DIR}/convertTable.cfg" ]; then
    echo "convertTable.cfg file is missing"
    exit 1
fi

if [ ! -d "$TARGET_PATH" ]; then
    echo "The specified path is not a directory"
    exit 1
fi

echo "Starting processing in $TARGET_PATH"

find "$TARGET_PATH" -type d | while read -r DIR; do

    ORIGINAL_FILE=$(find "$DIR" -maxdepth 1 -type f \( -name "*.jpg" -o -name "*.webp" -o -name "*.png" -o -name "*.avif" \) | grep -E "/[0-9]+\.(jpg|webp|png|avif)$" | head -n 1)

    if [ -z "$ORIGINAL_FILE" ]; then
        echo "No original file found in $DIR. Searching for the largest existing thumbnail."
        LARGEST_FILE=$(find "$DIR" -maxdepth 1 -type f \( -iname '*.jpg' -o -iname '*.jpeg' -o -iname '*.png' -o -iname '*.webp' \) -exec stat -f "%z %N" {} \; | sort -n -r | head -n 1 | cut -d' ' -f2-)

        if [ -n "$LARGEST_FILE" ]; then
            FILENAME=$(basename "$LARGEST_FILE")
            FILENAME_WO_EXT="${FILENAME%%.*}"
            EXTENSION="${LARGEST_FILE##*.}"
            ORIGINAL_FILE="${DIR}/${FILENAME_WO_EXT}.${EXTENSION}"
            
            if [ "$LARGEST_FILE" != "$ORIGINAL_FILE" ]; then
                echo "Renaming $LARGEST_FILE to $ORIGINAL_FILE"
                cp "$LARGEST_FILE" "$ORIGINAL_FILE"
            fi
        else
            echo "No thumbnails found in $DIR."
            continue
        fi
    else
        echo "Original file found: $ORIGINAL_FILE"
        FILENAME=$(basename "$ORIGINAL_FILE")
        FILENAME_WO_EXT="${FILENAME%.*}"
    fi

    # Delete all files that do not match the original file name
    find "$DIR" -maxdepth 1 -type f ! -name "$(basename "$ORIGINAL_FILE")" -exec rm -f {} \;

    # Parse the convertTable.cfg file to create all formats
    while read -r tableline; do
        PDT_X=$(echo "$tableline" | cut -d ':' -f 1) # Format identifier (e.g., cart_default, home_default)
        FORMAT_X=$(echo "$tableline" | cut -d ':' -f 2) # Size format (e.g., 800x600)
        PDT_FILE="${DIR}/${FILENAME_WO_EXT}-${PDT_X}.webp" # Name of the generated thumbnail file (e.g., 99010-cart_default.webp)
        if [ ! -f "$PDT_FILE" ] || [ "$FORCE_REPLACE" == "--force" ]; then
            if [ -f "$PDT_FILE" ] && [ "$FORCE_REPLACE" != "--force" ]; then
                CURRENT_FORMAT=$(magick identify -ping -format '%wx%h' "$PDT_FILE")
                if [ "${FORMAT_X}" = "${CURRENT_FORMAT}" ]; then
                    continue
                fi
            fi

            # Convert to webp with a white background
            echo "Generating thumbnail from $ORIGINAL_FILE to $PDT_FILE with size $FORMAT_X"
            magick "$ORIGINAL_FILE" -resize "${FORMAT_X}" -background white -flatten -alpha off -compose Copy -gravity center -extent "${FORMAT_X}" "${DIR}/${FILENAME_WO_EXT}-${PDT_X}.png"
            cwebp -q 80 "${DIR}/${FILENAME_WO_EXT}-${PDT_X}.png" -o "$PDT_FILE" > /dev/null 2>&1
            rm "${DIR}/${FILENAME_WO_EXT}-${PDT_X}.png"
        fi
    done < "${SCRIPT_DIR}/convertTable.cfg"
done

echo -ne "\nProcessing completed\n"

Prerequisites

Ensure you have ImageMagick and cwebp installed.

Instructions

1. Make the script executable:

 chmod +x ./generate_webp_thumbnails.sh

2. Run the script

./generate_webp_thumbnails.sh path/to/img/dir [--force]

Options

-–force: Use this option to remove all previously generated thumbnails found.

Note

You must use it based on PrestaShop’s image types scopes.