Personnalisation du plug-in Nextgen Gallery…

Pour afficher des photos, nous avons choisi le plug-in NextGEN Gallery.

Installation de NextGEN Gallery

L’installation se fait facilement (comme tout bon plug-in qui se respecte ), il suffit de copier tous les fichiers dans le répertoire « plugins » de votre installation wordpress et de l’activer via la console d’administration.

Ensuite vient la phase de réglage des différentes options qui permettent d’utiliser toutes les fonctionnalités de cette extension.
Pour finir, on rajoute les images afin de créer des galeries, puis on remplit des albums avec ces galeries.

Seulement, voilà, quand on observe le résultat sur son site que l’on a peaufiné avec amour, les affichages d’albums, de galeries ou de photos ne sont pas forcément en harmonie avec le design de votre site.
C’est bien sûr ce qui est arrivé sur ce site comme vous pouvez le voir sur cette image tirée de la page qui montre le contenu d’un album (en fait, la page « photo » de notre site).

Alors que l’esprit du site serait plutôt d’avoir ça :

Personnalisation

Bien que livré avec plusieurs feuilles de styles différentes, il y a peu de chance qu’elles s’accordent avec un thème cousu main comme le notre.
Heureusement, cette extension est très bien écrite, et permet une personnalisation très poussée.

Les feuilles de styles

L’utilisation des feuilles de styles nous permet de modifier tout ce qui a trait à l’apparence des informations sur la page.

En modifiant certaines valeurs, on arrive à avoir ce résultat, qui est plus proche du design du site.

Le code HTML

Bon, c’est pas encore parfait, on veut obtenir la même chose que sur les autres pages.
Pour cela, on va devoir aller modifier le code qui permet d’afficher un album. Et encore une fois, merci à l’auteur de cette extension d’avoir si bien séparé les différentes fonctions car il suffit de se diriger vers le répertoire « view » pour avoir accès aux différents codes qui affichent les galeries et les albums.
Pour nous, la modification devra se faire dans le fichier « album-extend.php ».
On veut déplacer le titre de la galerie pour qu’il soit à droite de l’image, et retrouver la bande bleu derrière les images. Une fois le code modifié, le résultat est enfin satisfaisant.

Vous pouvez admirer le résultat final sur la page photo.