Thème WordPress Amazing Grace et ImageMagick

Il faut savoir jouer le jeu de la Liberté en informatique. Il n’y a pas qu’en développant du code à outrance que l’on fait progresser un logiciel ou qu’on arrive à le faire massivement utiliser.

Par exemple, j’ai utilisé pour ce blog le thème WordPress Amazing Grace, qui est sous licence GPL. C’est du libre, donc le dommage co-latéral, c’est la gratuité.

Ma façon à moi de participer en retour est de vous fournir un petit tutoriel sur la réalisation en masse des images qui s’affichent de manière aléatoire en haut à droite du navigateur (les “carte-postales”). Vladimir Prelovac donne sur son site la marche à suivre pour le code PHP, mais je vous donne ici une astuce pour la création de ces carte-postales avec un minimum d’effort.

Cette astuce s’appuie évidemment sur The Gimp (un peu), le pack ImageMagick (qui fera l’assemblage des morceaux) et la réalisation d’un petit script BASH.

Si vous n’avez pas encore installé le pack ImageMagick, vous avez manqué quelquechose… remédiez-y immédiatement avec un sudo apt-get install imagemagick.

Les opérations à automatiser

Les opérations graphiques

Pour commencer il faut découper la zone des “carte-postales”, en haut à droite de l’interface. Dans mon cas, ça donnait au début cette image de 319×221 pixels. Le but est, à partir d’une série de photos, de les intégrer exactement de la même façon dont est intégrée la photos de départ (dans mon exemple : le coucher de soleil sur la mer).

Les nom des fichiers

Pour l’affichage aléatoire des fichiers, ceux-ci doivent avoir un nom spécial. L’affichage aléatoire, comme décrit par Vladimir Prelovac sur la page du thème, est basé sur un script PHP facile à modifier et qui s’apuie sur une structure de noms de fichiers bien précise.

Aussi, on devra nommer les images “bg-portrait<numéro>.jpg”.

Par exemple, si on a 180 images à afficher de manière aléatoire, on aura :
bg-portrait0.jpg; bg-portrait1.jpg; bg-portrait2.jpg; bg-portrait3.jpg; bg-portrait4.jpg; bg-portrait5.jpg; (…); bg-portrait179.jpg

Tant qu’à faire, autant que les noms de fichiers soient créés automatiquement plutôt que manuellement, non ? D’autre part, si plus tard je souhaite ajouter 28 image, il faudrait reprendre le nommage de fichiers là où je l’ai arrêté facilement.

Voila pour les contraintes.

Ce que l’on va faire

Si je mesure la photo à intégrer, elle doit avoir les dimensions suivantes : 283×175 pixels. Par rapport à ma mon image de découpe-modèle de carte-postale, j’observe que ma photos qui fera 283×175 pixels devra être décalée du coin haut-gauche de 14 pixels sur la droite et de 28 pixels vers le bas.

Voila pour l’aspect graphique.

Pour le côté logiciel, il est hors de question de tout se farcir à la main : les ordinateurs sont fait pour ça. Nous utiliserons la commande composite pour assembler notre modèle (qui fera office de fond) à nos photos.

En particulier, si :

• ma photo à intégrer se nomme FICHIER
• le fichier modèle (le fond avec les carte-postales) se nomme MODELE
• mon nouveau fichier avec le fond + ma photo correctement décallée se nommera bg-portraitX.jpg

Voici par exemple la carte-postale modèle que j’ai utilisé, un fichier bg-portraitX.jpg pris au hasard dans le répertoire des images du thème :

Alors j’aurais une commande du genre :
composite -compose src-over -geometry 283x175+14+28 FICHIER MODELE bg-portraitX.jpg

Les ruses consisteront :

• a préparer les photos avec The Gimp pour choisir les bonnes zones et les mettre dans des dimensions permettant un traitement automatisé pour un résultat parfait
• réaliser un tout petit peu de scripting en BASH pour automatiser les traitement et nommer intelligemment les nouveaux fichiers

Préparation des photos

Il faut d’abord utiliser The Gimp par exemple pour avoir une photo qui soit en quelque sorte un multiple de 283×175 pixels.

Ouvrez un fichier photo. Dans la fenêtre d’outils de Gimp, double-cliquez sur l’outil “cutter”
dans la fenêtre d’options, cochez la case “fixe” et entrez “283:175″, comme ci-dessous :

Ainsi, ça permettra que la photo soit redimensionnée plus tard en respectant ses proportions.
sélectionnez une zone à découper dans la photo, puis enregistrez.

C’est tout. On obtient une image “multiple de” 283×175 pixels qu’il faudra redimensionner et déplacer dans l’image modèle.

Refaites-ça 200 fois pour 200 photos ! C’est la seule opération manuelle nécessaire, tout le reste est automatisé…

Placez toutes vos photos dans un répertoire, que nous appellerons
Vous vous souvenez de l’endroit où vous avez placé le fichier modèle de carte-postale : on nommera ce fichier

Adaptez le script bash ci-dessous :

#! /bin/bash
DESTDIR="VOTRE_REPERTOIRE_DE_DESTINATION"
SRCPORTRAIT="MODELE"
# démarrage de l'incrémentation - la dernière image fabriquée
# se nomme br-portrait86.jpg
typeset -i INDEX=86
mkdir -p $DESTDIR
for FICHIER in $(ls)
do
composite -compose src-over -geometry 283x175+14+28 -quality 90 $FICHIER SRCPORTRAIT $DESTDIR/bg-portrait$INDEX.jpg
INDEX=$INDEX+1
done


Maintenant, rien de plus facile : placez-vous dans le répertoire contenant vos photos à intégrer, puis executez votre script. Quand tout sera terminé, vous contaterez (et selon l’exemple du script) que dans votre répertoire de destination il se sera créé autant de nouvelles “carte-postales” que d’images, et qu’elle porteront les noms :

bg-portrait87.jpg; bg-portrait88.jpg; bg-portrait89.jpg; etc.

Si je conserve ma photo d’exemple, ça me donnera cette nouvelle carte-postale :

Il ne vous reste plus qu’à suivre les indications décrites dans http://www.prelovac.com/vladimir/wordpress-themes/amazing-grace pour l’upload dans le bon répertoire ainsi que la minuscule modification de code PHP dans le bon fichier,  et c’est tout !

Faire des images pour le thème devient par la suite très simple, puisque presque tout est déjà fait…