Ce tutoriel vous guidera à travers le processus complet pour créer une galerie moderne et optimisée sur votre site web basé sur Grav. Vous apprendrez à installer les outils nécessaires, à automatiser l'optimisation des images et à configurer le plugin approprié pour afficher vos photos de manière professionnelle.
Pour optimiser et traiter automatiquement les images, nous utiliserons ImageMagick et cwebp (de libwebp). Ces outils sont essentiels pour redimensionner, compresser et convertir les images au format WebP.
Ouvrez un terminal et exécutez les commandes suivantes :
```bash
# Mettez à jour les paquets disponibles
sudo apt update
# Installez ImageMagick
sudo apt install imagemagick
# Installez cwebp (outil pour convertir en WebP)
sudo apt install webp
```Note : Si vous utilisez une autre distribution Linux, consultez son gestionnaire de paquets correspondant.
Le script Bash suivant automatisera le processus d'optimisation et de conversion des images. Il réduit leur taille tout en maintenant la qualité, génère des versions pour les grands écrans et les appareils mobiles, et renomme les images avec un préfixe personnalisé et une numérotation séquentielle.
Enregistrez le code suivant dans un fichier appelé optimize_and_rename.sh :
```bash
#!/bin/bash
# Variables configurables
INPUT_DIR="./input" # Dossier où se trouvent les images originales
OUTPUT_DIR="./output" # Dossier où seront sauvegardées les images traitées
MAX_WIDTH_GRANDE=1600 # Largeur maximale pour les grandes images
MAX_HEIGHT_GRANDE=1600 # Hauteur maximale pour les grandes images
MAX_WIDTH_MOVIL=800 # Largeur maximale pour les images mobiles
MAX_HEIGHT_MOVIL=800 # Hauteur maximale pour les images mobiles
QUALITY=80 # Qualité du format WebP (0-100)
PREFIX="" # Préfixe pour les noms de fichiers (exemple : "baleares")
# Vérifier si un préfixe a été fourni
if [ -z "$1" ]; then
echo "Utilisation : $0 <préfixe> [qualité]"
echo "Exemple : $0 baleares 80"
exit 1
else
PREFIX="$1"
fi
# Si une qualité personnalisée est fournie, l'utiliser
if [ ! -z "$2" ]; then
QUALITY=$2
fi
# Créer le dossier de sortie s'il n'existe pas
mkdir -p "$OUTPUT_DIR"
# Compteur pour numéroter les images
counter=1
# Traiter chaque image dans le dossier d'entrée
for file in "$INPUT_DIR"/*; do
if [[ -f "$file" ]]; then
# Obtenir le nom de base et l'extension du fichier
filename=$(basename -- "$file")
extension="${filename##*.}"
base="${filename%.*}"
echo "Traitement de $filename..."
# Générer un nom unique avec préfixe et numéro
new_name="${PREFIX}-$(printf "%03d" $counter)"
# Corriger l'orientation avant de redimensionner
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"
# Corriger l'orientation avant de redimensionner pour la version mobile
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 "Converti en ${new_name}-grande.webp et ${new_name}-mobile.webp"
# Incrémenter le compteur
((counter++))
fi
done
echo "Processus terminé. Toutes les images ont été traitées."
```Attribuez les Permissions d'Exécution :
chmod +x optimize_and_rename.shCréez les Dossiers input et output :
mkdir input outputPlacez Vos Images dans input :
input.Exécutez le Script :
./optimize_and_rename.sh baleares 80baleares : Préfixe pour les images.80 : Qualité du format WebP (optionnel, valeur par défaut : 80).Résultats :
output avec des noms comme :
baleares-001-grande.webpbaleares-001-mobile.webpPour afficher les images sur votre site web Grav, nous utiliserons le plugin Shortcode Gallery PlusPlus, qui permet de créer des galeries modernes et personnalisables facilement.
bin/gpm install shortcode-gallery-plusplusDans votre page Markdown, utilisez le shortcode suivant pour créer une galerie :
```markdown
```Note : Assurez-vous que les images générées par le script sont dans le dossier correspondant dans
user/pages/votre-galerie.
Optimisation Automatique :
Noms Structurés :
Compatibilité Responsive :
Intégration Facile avec Grav :
user/pages/galerie/baleares/input et output).srcset : Dans vos modèles Twig, envisagez d'utiliser des attributs comme srcset pour offrir des versions adaptatives des images.Avec ce workflow, vous avez automatisé entièrement le processus d'optimisation et de préparation des images pour votre galerie Grav. En combinant des outils comme ImageMagick, cwebp et le plugin Shortcode Gallery PlusPlus, vous pouvez désormais créer des galeries modernes, rapides et faciles à maintenir.
Ce processus ne vous fera pas seulement gagner du temps, mais garantira également que vos visiteurs profitent d'une expérience visuelle fluide et rapide sur tous les appareils.
