Ce n’est pas un autre album de photos que je vous propose là. Il y en a pratiquement autant de sortes que de sites. Mais plutôt des boucles et quelques fonctions PHP pour en faire un. L’habillage de l’album n’est pas traité ici : la décoration n’est pas le sujet.
Ajouter des images à un article avec génération de vignettes
Pour faire un album il faut d’abord des photos. Au cas où vous désirez utiliser des vignettes [1], voici quelques précautions :
La génération des vignettes, SPIP peut le faire, mais il faut lui demander. Dans l’interface privée, cliquez sur Configuration du site, puis Fonctions avancées. Cochez "Générer automatiquement les miniatures des images" et modifiez, si vous le voulez, la taille maximale des vignettes. Puis validez.
Ajoutez vos images dans votre article en tant que document joint, avec le bouton "joindre un document" et non pas "ajouter une image". Sinon SPIP ne créera pas de vignettes. Ce que vous pouvez faire en dehors du mode édition de l’article.
Les différentes variantes
4 cas d’albums photos
J’ai imaginé 4 sortes d’albums photos :
Les "outils" nécessaires
une boucle sur les documents image de l’article pour en déterminer le nombre total (dans tous les cas)
une boucle des photos (dans tous les cas)
une boucle des vignettes (cas 3 et 4)
des liens de pagination [4] pour les photos : fonction PHP paginationImage() (dans tous les cas)
des liens de pagination pour les vignettes : fonction PHP paginationVignettes() (cas 3 et 4)
un petit script Javascript pour ouvrir une fenêtre flottante, qui chargera une page album_image.html (cas 3 et 4).
Vous trouverez en bas de page un squelette pour chaque cas, plus un fichier à télécharger pour l’ensemble.
1er cas : une seule photo par page
Quelques valeurs à initialiser
Cette boucle principale est supposée entourer la plupart des autres boucles du squelette. En fait, vous pouvez mettre cette instruction PHP n’importe où (en dehors de toute autre boucle), mais avant la pagination.
Boucle nb_images
Cette boucle calcule le nombre de photos de l’article et affecte la valeur à la variable PHP $nb_images, qui servira à la pagination des photos et/ou des vignettes. On en aura besoin dans les 4 cas. Cette boucle doit précéder tout ce qu’on va voir par la suite.
Remarque sur les critères de la boucle :
"extension==jpg|png|gif" limite les documents aux images JPG, PNG et GIF (utile, si d’autres documents joints sont liés à la page)
"mode=document", car vos images sont des documents, pour profiter de la "vignettisation" de SPIP.
La boucle affichant la photo
Son rôle est d’afficher l’image dont le rang [5] est indiqué par le paramètre d’url debut_image.
critère {debut_image,1}
C’est le critère qui permet de récupérer l’image de rang debut_image. L’url de la page doit se présenter ainsi : article.php3?id_article=XX&debut_image=YY.
La pagination
Elle permet de naviguer d’image en image.
Ce code écrit "précédente image suivante", où "précédente" et "suivante" sont des liens permettant de recharger la page respectivement avec l’image précédente ou l’image suivante. Si l’image n’a pas de précédent, il n’y aura pas de lien précédent. Idem si l’image n’a pas de suivant.
Exemple
2e cas : plusieurs photos par page
Vos images ne sont pas trop grandes et pas trop lourdes. Vous pouvez donc en afficher plusieurs par page.
Valeurs à initialiser
En plus de la variable $id_article, une constante IMAGES_PAGE définit le nombre d’images à afficher par page. Cette constante servira dans la fonction paginationPage() modifiée. Si vous voulez modifier cette valeur, vous n’aurez à le faire que dans cette déclaration de constante (ainsi que dans la boucle correspondante, voir ci-dessous). L’organisation des images dans la page, c’est-à-dire le nombre d’images par lignes et le nombre de lignes, pourra être traité en HTML et/ou avec des CSS.
Boucle nb_images
Idem que le cas 1.
Boucle d’affichage des photos
On a pratiquement la même boucle que dans l’exemple précédent, à ces différences près :
Le critère {debut_image,6} permet d’afficher 6 images à partir de l’image de rang "debut_image" (si vous devez modifier le nombre d’images par page, vous devrez modifier aussi ce critère, en plus de la constante IMAGES_PAGE).
La fonction afficherImage() permet d’afficher chaque image avec un maximum de 500 pixels en largeur et de 400 pixels en hauteur (tout en conservant ses proportions). Les paramètres $max_larg et $max_haut sont facultatifs, et si vous les omettez : afficherImage("#URL_DOCUMENT", "#LARGEUR", "#HAUTEUR");, l’image sera affichée à sa taille réelle. Si vous omettez $max_haut (afficherImage("#URL_DOCUMENT", "#LARGEUR", "#HAUTEUR", 500);, la largeur sera limitée à 500 pixels, la hauteur s’adaptera pour conserver les proportions. Vous ne pouvez pas omettre $max_larg seul, mais indiquer ’0’ ou ’null’ (afficherImage("#URL_DOCUMENT", "#LARGEUR", "#HAUTEUR", 0, 400);) : la hauteur sera limitée à 400 pixels et la largeur s’adaptera pour conserver les proportions.
Pagination des images
Contrairement à l’exemple précédent, il faut faire défiler les images 6 par 6.
Si le nombre de vos images n’excède pas IMAGES_PAGE, la pagination ne s’affichera pas.
Exemple
3e cas : vignettes avec image en taille réelle dans une fenêtre flottante
Vos images sont trop grandes et/ou trop lourdes, ou vous voulez en afficher plus par page. Vous préfèrerez utiliser des vignettes, plus petites et plus légères. Quitte à afficher l’image en taille réelle dans une fenêtre flottante.
Valeurs à initialiser
Pas de changement par rapport à l’exemple 2. Seulement le nom de la constante change (VIGNETTES_PAGE), ainsi que la valeur (12).
Boucle nb_images
Idem que le cas 1.
Boucle d’affichage des vignettes
Au lieu d’afficher 6 photos dans la page, on affichera 12 vignettes. Le principe est le même.
Mais à la différence du cas précédent, un clic sur une vignette déclenche l’ouverture d’une fenêtre flottante, qui affichera l’image en grandeur réelle. Cet effet est permis grâce à un petit script Javascript classique d’ouverture de fenêtre, à écrire entre les balises <head> et </head> de votre squelette article.html, et dont voici le code :
Ce petit script ouvre une nouvelle fenêtre aux dimensions de l’image. Cette fenêtre charge une page album_image.html, dont voici le code intégral :
Pagination des vignettes
C’est exactement le même système que la fonction paginationImages() du cas 2.
Exemple
4e cas : affichage de vignettes et d’une image de taille intermédiaire
Ce cas est une variante du 3e cas. Mais il y a quelques différences. Voici comment ça fonctionne :
comme indiqué dans le schéma plus haut, la page comprend 2 parties : les vignettes à gauche et une image en taille intermédiaire à droite,
un clic sur une vignette, affiche l’image correspondante en taille intermédiaire (donc à droite de la page),
un clic sur cette image intermédiaire ouvre une fenêtre flottante avec l’image en taille réelle,
des liens de pagination permettent de passer d’un lot de vignettes à l’autre,
des liens de pagination permettent de passer d’une image en taille intermédiaire à l’autre (avec un suivi des vignettes si on change de lot)
Comme il y a double pagination (vignettes et image en taille intermédiaire), on aura besoin de 2 paramètres dans l’url (en plus de id_article) : debut_vignette et debut_image.
Il y a une alternative, ce serait d’afficher l’image en taille réelle sous les vignettes. Ca permettrait de s’affranchir de la fenêtre flottante et de laisser plus de place en largeur aux vignettes. Mais ça oblige à faire un défilement vertical, au risque que certains utilisateurs ne sachent pas qu’il y a une image en-dessous.
Valeurs à initialiser
Pas de changement par rapport à l’exemple 3. Seulement la valeur, 8 au lieu de 12, car il y a moins de place.
Boucle nb_images
Idem que le cas 1.
Boucle d’affichage des vignettes
Chaque vignette de la boucle vignettes est entouré d’un lien, qui rechargera la page avec les 2 paramètres debut_vignette et debut_image :
debut_vignette est le rang de la 1ère vignette du lot : au rechargement de la page, on affichera VIGNETTES_PAGE vignettes à partir de ce rang
debut_image est le rang de la vignette en cours : au rechargement de la page, c’est l’image correspondante à cette vignette qui sera affichée en taille intermédiaire.
Pagination des vignettes
Cette fonction de pagination permet de passer d’un lot de 8 vignettes à l’autre. Le paramètre d’url debut_image est le même que le paramètre debut_vignette, car en cas de changement de page, par défaut l’image intermédiaire correspond à la première vignette du lot.
Affichage de l’image intermédiaire
Cette boucle affiche l’image intermédiaire dont le rang est indiqué par le paramètre d’url debut_image. D’où le critère {debut_image,1}. Cette image est limitée à 500 pixels en largeur et 400 pixels en hauteur. Comme dans le cas précédent pour les vignettes, l’image est entourée d’un lien qui provoquera l’ouverture d’une fenêtre avec l’image en taille réelle. On aura donc besoin du même script Javascript que dans le 3e cas, ainsi que de la page album_photo.html.
Pagination de l’image intermédiaire
La pagination de l’image intermédiaire fonctionne comme celle du 1er cas (une seule image affichée avec 2 liens "précédent" et "suivant"). Mais il y a une différence. L’image intermédiaire est une image agrandie de l’une des vignettes affichées. Si, par le biais des liens "précédent" et "suivant", on passe à une image qui ne correspond pas à une des vignettes affichées, il faudra aussi changer de lot de vignettes et donc modifier la valeur du paramètre d’url debut_vignette.
Par exemple, vous avez 8 vignettes par page. Vous faîtes défiler les images en taille intermédiaire jusqu’à la 8e. Maintenant si vous cliquez sur "suivante", vous allez afficher la 9e image. Mais elle correspond à la 1ère vignette du lot suivant. Donc il faudra aussi afficher les 8 vignettes suivantes.
Exemple
je bidouille en local (easyphp 1.8 + spip 1.8.3)
RSS 2.0