Script PHP de galerie d’images

J'ai codé ce tout petit script PHP qui permet d'afficher dans un article, une page de WordPress ou un widget HTML, une galerie d'images. Bon, je ne suis pas un expert PHP, donc il a sûrement des améliorations à faire.

Ce n'est pas un plugin et on n'utilise pas la bibliothèque de WordPress (note : je ne l'utilise pas du tout pour ma part!)

Je sais bien que cela existe déjà, mais j'aime bien créer un peu par moi-même et pas toujours utiliser les "trucs" tout fait.
Je peux dire comme dans la pub : "C'est moi qui l'ait fait!" :lol:

C'est, de plus, un peu plus paramétrable que le widget Galerie de WordPress, et surtout je peux utiliser des images qui ne sont PAS dans la bibliothèque de medias.
Et ce script est utilisable ailleurs que dans un site WordPress.

Requis

1) Les images de la galerie doivent être dans 2 dossiers précis :

  • small : Contient les miniatures des images. Les mettre de préférence directement à la bonne dimension. Elles seront toutes à la même taille.
  • big : Contient les images en taille réelle. Là, peu importe la taille.

Exemple : Si j'ai un dossier mes_images, et une image ma_photo.jpg.
On doit avoir 2 dossiers :

  • mes_images/small contenant les miniatures redimensionnées avec ma_photo.jpg.
  • mes_images/big contenant les images orginales avec ma_photo.jpg.

Donc, on crée ces dossiers small et big dans un dossier créé où on veut sur le serveur. Personnellement toutes mes images sont un dossier images (contenant divers sous-dossiers) à la racine de mon thème enfant.
Modifier en conséquence dans le script functions-galerie.php les variables suivantes : $path_small, $url_small, $url_big.

En résumé il doit y avoir un dossier (par galerie) avec dans ce dossier, 2 sous-dossiers small et big.

2) Inclure dans le fichier functions.php du thème (ou du thème enfant) le fichier functions-galerie.php.

3) Copier à la racine du thème (ou du thème enfant) le fichier galerie.css.

Comment insérer une galerie d'images

Pour afficher une galerie d'images, le script va parcourir automatiquement le dossier small et afficher les miniatures. Un clic sur une miniature va afficher l'image correspondante du dossier big.

On insère la galerie dans un article ou une page WordPress à l'aide d'un shorcode nth_galerie.

Paramètres du shortcode

  • folder : Le seul paramètre obligatoire. On indique le nom du dossier (celui donc contenant les dossiers small et big).
    L'oubli de ce paramètre ne plantera rien du tout, le script prévoit l'affichage d'un message d'erreur indiquant simplement que le dossier n'a pas été trouvé.
  • dim_img : dimension de la miniature. (les miniatures sont de forme carrée).
    valeur défaut : 100
    Donc il faut au moins que les miniatures soient d'une taille de 100px × 100px.
  • nbre_col : Nombre de miniatures affichées par ligne.
    Valeur défaut : 5
  • nbre_img : Le nombre d'images que l'on veut afficher. Mais on ne peut pas choisir les images pour l'instant! Cela ne sert pas à grand chose :lol:
    De plus contrairement la galerie de WordPress, on ne peut pas choisir l'ordre d'affichage des miniatures, ça va venir.
    Valeur défaut : '' (affiche tout)
  • space_img : Espace entre les miniatures.
    Valeur défaut : 2
  • img_ext : Extensions de fichier images que l'on veut afficher, séparées par une virgule.
    Valeur défaut : 'jpg'
  • border : (valeur booléenne) Afficher ou non la bordure autour de la galerie (bloc div entourant la galerie).
    Valeur défaut : 1
  • border_width : Epaisseur de bordure (px) si border=1.
    Valeur défaut : 1
  • border_color : Couleur de bordure (code HTML) si border=1.
    Valeur défaut : '#ccc'
  • class : Class appliquée sur la bordure.
    Valeur défaut : ''
  • margin : (valeur booléenne) Espace ou non entre la bordure et les miniatures. Cet espace est de la valeur du paramètre space_img.
    Valeur défaut : 1
  • center : (valeur booléenne) Centrage ou non de la galerie par rapport au bloc parent.
    Valeur défaut : 0 (alignement à gauche)
  • num_galerie : (valeur numérique entière) Numéro de la galerie. Sert si on insère plusieures galeries dans la même page.
    Valeur défaut : 1
  • fixed : (valeur booléenne) Si valeur à 0, les miniatures prendront toute la largeur du bloc parent. Les paramètres border, margin et center seront ignorés (tous à 0).
    Valeur défaut : 1

Paramètres floatbox

Les paramètres si dessous concerne le script floatbox si on utilise ce script pour afficher les images en grande taille.
J'utilise ce script, que je trouve parfait, sur tout le site pour afficher les grandes images.
Si on n'utilise pas ce script, les images s'afficheront simplement dans le navigateur.

  • fb_new_window : (valeur booléenne) Affiche ou non le lien "Ouvrir dans une nouvelle fenêtre" (paramètres floatbox showNewWindow & closeOnNewWindow à 0)
    Valeur défaut : 0
  • fb_img_nav : (valeur booléenne) Navigation ou non entre les images de la galerie.
    Valeur défaut : 1
  • fb_name_bottom : Gère l’affichage du nom de l’image en bas à droite pour la grande image. (paramètre caption2 du script floatbox).
    0 : pas d’affichage du nom de l’image.
    1 : affichage du nom sans l’extension.
    2 : affichage du nom avec l’extension.
    Valeur défaut : 0

Il est prévu également la possibilité d’afficher, au-dessus de chaque grande image (celle que l’on veut) une courte description (paramètre caption du script floatbox).

Il faut définir dans le dossier (celui défini dans le paramètre folder) des images de la galerie, un fichier infos.php.
Il doit être de la structure suivante :

<?php
  $infos['nom_image1']['desc'] = 'description ici';
  $infos['nom_image2']['desc'] = 'description ici';
  ...
  // nom_image1, nom_image2, ... : nom des images sans extension.
?>

Voir l'exemple utilisant ce fichier infos.php dans le widget html ci contre (ou en bas si mobile).

Après pour les autres paramètres de floatbox, voir la documentation. Et gérer cela directement dans le code de mon script.

Quelques exemples

Exemple 1

le code du shortcode :

[nth_galerie folder=cheval nbre_col=4 border_width=3]

Exemple 2

le code du shortcode :

[nth_galerie folder=cheval num_galerie=2 dim_img=80 center=1 space_img=5 border=0 margin=0 fb_new_window=1]

Exemple 3

le code du shortcode :
Dans cet exemple, les miniatures prennent tout simplement toute la largeur disponible.
[nth_galerie folder=cheval num_galerie=3 dim_img=50 fixed=0 fb_img_nav=0]

Galerie d'images dans Widget HTML

Il est tout à fait possible d'insérer la galerie dans un widget HTML.

Pour que le shortcode soit interprété, il faut ajouter dans le fichier functions.php du thème (ou du thème enfant) la ligne :

add_filter('widget_custom_html_content','do_shortcode');

Après il suffit d'insérer notre shortcode dans le code du Widget.
Regardez le Widget HTML à droite dans la barre latérale (ou en bas de page si mobile).

Code du widget :

widget-html

Comme on le remarque, j'utilise le plugin Widget logic, qui permet d'afficher des widgets suivant certaines conditions. Dans mon exemple, je veux afficher ce widget HTML uniquement sur cet article.

Téléchargement

Téléchargement : galerie.zip

Mis à jour le : 26/09/2018 11:28

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Sélection smileys

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.