Site personnel de Xavier BUROT alias Xébiaut.

http://xebiaut.free.fr/
Le site de Xeb
Accueil du site > Monsieur Xavier > Mes oeuvres > Mes bidouilles informatiques > SPIP > SPIP-Album
Les auteurs Xébiaut
Date de création 5 mars 2008
Date de dernière mise à jour 11 janvier 2009
Nombre de commentaires commentaire
Pour publier un lien de cette article sur Facebook

Mes bidouilles informatiques

SPIP-Album

Nouvelle mouture du plugin d’affichage d’une galerie de photos


Voici une nouvelle évolution du plugin permettant l’affichage d’une galerie de photo [1] le rendant compatible avec SPIP 1.9.2.

Outre cette compatibilité, le plugin se voit ajouter un certain nombres de fonctionnalités supplémentaires de deux ordres :
- Les premières concernent de nouvelles méthodes d’affichage de vos images (A).
- Les secondes offrent la possibilité de protéger vos images ou du moins d’en rendre plus difficile le vol (B).

Je vous invite donc à découvrir le contenu de celui-ci.


Voir en ligne : Retrouver le source de ce plugin sur SPIP-Zone

Fonctionnalité du plugin

En raison de l’incompatibilité entre le module JQUERY, intégré dans SPIP depuis la version 1.9.2a, avec PROTOCOLE utilisé par Lightbox, j’ai abandonné celui-ci au profit de Imagebox [2].

Outre que ce programme offre les mêmes fonctionnalités que LightBox, il ajoute un certain nombre de fonctionnalités supplémentaires dont certaines sont implémentées (Diaporama, Carousel 3D, etc.) dans la présent plugin.

ATTENTION !!! Du fait de l’utilisation du module ImageBox, ce plugin peut présenter une certaine incompatibilité avec le plugin THICKBOX.
Il semble qu’il pose aussi des soucis avec la lame Ancres douces du plugin Couteau Suisse.

Autres nouveautés incorporées dans ce plugin, la possibilité de :

Modèles d’affichage des images

Pour simplifier le paramétrage des modèles et donc leur utilisation par des novices, le plupart des paramètres transmissibles aux modèles sont configurables via le formulaire de configuration CFG. Toutefois, ils peuvent être ponctuellement modifiés dans l’appel au modèle.

Les modèles ci-dessous utilisent les paramètres standards du modèle IMG.HTML de la distribution (align, class, lien, etc.). En conséquence, il ne sera traité ici que des paramètres supplémentaires.

img.html

Il surcharge le modèle de la dist en lui apportant quelques petites améliorations, notamment de l’utilisation pour les images des fonctions ImageBox et du filtre WaterMark.

Code d’appel :

<imgXX||taille=WW|largeur=YY|longueur=ZZ|lien=URL>

Paramètres :
  • XX : N° du document à afficher.
  • taille : WW correspond à la taille maximale en pixels de la vignette de l’image à afficher dans l’article. Cette taille maximale est appliquée à la fois à la largeur et à la longueur de l’image.
  • largeur : YY correspond à la largeur maximale en pixels de la vignette de l’image à afficher dans l’article. Sans spécification particulière la longueur de l’image se calculera toute seule.
    ATTENTION !!! Ce paramètre n’est pas utile si vous avez renseigné le paramètre taille. Il est là pour assurer la compatibilité avec l’ancien plugin.
  • longueur : ZZ correspond à la longueur maximale en pixels de la vignette de l’image à afficher dans l’article. Sans spécification particulière la largeur de l’image se calculera toute seule.
    ATTENTION !!! Ce paramètre n’est pas utile si vous avez renseigné le paramètre taille. Il est là pour assurer la compatibilité avec l’ancien plugin.
  • lien : URL doit être égale à no pour empêcher l’affichage agrandi de l’image originelle. Très pratique pour les images de décorations.
A noter :

Si vous intégrer plusieurs photos dans un même article [3], vous verrez apparaître près du titre de la photo, lors de l’affichage de la photo au format original, le texte Image numéro x sur y (x = position de la photo affichée ; y = nombre totale de photo de l’article). Vous pouvez passer d’une photo à l’autre en utilisant les touches N (Next => pour la photo suivante) et P (Previous => pour la photo précédente) sans pour autant revenir à l’article.

doc.html

Il surcharge le modèle de la dist en lui apportant les mêmes améliorations que pour le modèle IMG.HTML.

Code d’appel :

<docXX|taille=WW>

Paramètres :
  • XX : N° du document à afficher.
  • taille : WW correspond à la taille maximale en pixels de la vignette du document à afficher dans l’article. Cette taille maximale est appliquée à la fois à la largeur et à la longueur de la vignette.
A noter :

Ce modèle intègre le même système de visualisation des images agrandies que pour le modèle IMG.HTML.

img_gallery.html

Voici la version un petit peu remaniée de la galerie photo qui permet l’affichage des images contenues par un article. Une nouvelle fonction a été ajouté : la possibilité d’affichage d’un diaporama des photos comprises par la galerie.

Code d’appel :
<imgXX|gallery|taille=WW|nbre_vignette=YY|senstri=Z
|partri=NNNN>
Paramètres :
  • XX : Cela correspond au numéro d’une des photos contenues dans la galerie. Ceui-ci n’est qu’indicatif car l’image affichée par défaut est celle résultant du tri en fonction du num titre et de la date.
  • taille : WW correspond à la taille maximale en pixels de l’image exposée dans la galerie. Cette taille maximale est appliquée à la fois à la largeur et à la longueur de la vignette.
  • nbre_vignette : YY correspond au nombre de vignettes affichées en bas pouvant aller de 1 à 10. En cas d’absence de ce dernier paramètre, le nombre de vignettes par défaut est 10.
  • senstri : Z correspond au sens du tri. 0 = par ordre croissant ; 1 = par ordre décroissant. Par défaut, le tri s’effectue par ordre croissant.
  • partri : NNNN correspond au nom du champ sur lequel s’effectue le tri des photos. Par défaut, le tri s’effectue par num titre et date.
A noter :

Pour l’essentiel, vous pouvez vous rapporter à l’article : Mini galerie de photos en plugin.

img_diapo.html

Ce modèle permet l’affichage d’un diaporama d’images contenues par un article, une brève, une rubrique ou un secteur.

Code d’appel :

Insérer dans un article :
<imgXX|diapo|taille=WW|nbre_vignette=YY|senstri=Z>
Insérer dans un squelette :
[(#MODELE{img_diapo}{id_document ou id_secteur ou id_rubrique=XX}{taille=WW}{nbre_vignette=YY}{senstri=Z}])]

Paramètres :
  • XX : N° du document à afficher quand ceux-ci sont contenus dans des articles, des brèves ou des rubriques.
  • taille : WW correspond à la taille maximale en pixels de la vignette du document à afficher dans l’article. Cette taille maximale est appliquée à la fois à la largeur et à la longueur de la vignette.
  • nbre_vignette : YY correspond au nombre de vignettes affichées en bas pouvant aller de 1 à 10. En cas d’absence de ce dernier paramètre, le nombre de vignettes par défaut est 10.
    ATTENTION !!! Ce paramètre n’est utilisé qu’en cas de recherche par id_rubrique ou id_secteur.
  • senstri : Z correspond au sens du tri. 0 = par ordre croissant ; 1 = par ordre décroissant. Par défaut, le tri s’effectue par ordre croissant.
A noter :

Dans le cas où ce modèle est appelé dans un squelette via la balise #MODELE, il peut être fait appel à ce modèle soit en indiquant l’id_document ou l’id_secteur ou l’id_rubrique (en passant comme paramètre : id_secteur=1). Dans les deux derniers cas, se sont toutes les photos contenues par les articles du secteur ou de la rubrique concernée qui seront pris en compte. D’ailleurs, en cas d’absence d’information sur l’identifiant utilisé (id_document, id_rubrique ou id_secteur), c’est l’intégralité des images contenues par les articles du sites qui seront prises en compte.

img_carousel.html

Ce modèle affiche des images sous la forme d’un carousel 3D tournant sur lui même. Si vous cliquez sur l’une des images, celle-ci s’agrandit grâce à ImageBox.

Code d’appel :

Insérer dans un article :

<imgXX|carousel||taille=WW|nbre_vignette=YY
|senstri=Z>

Insérer dans un squelette :
[(#MODELE{img_carousel}{id_document ou id_secteur ou id_rubrique=XX}{taille=WW}{nbre_vignette=YY}{senstri=Z}])]

Paramètres :
  • XX : N° du document à afficher.
  • taille : WW correspond à la longueur maximale en pixels de la zone d’affichage du carousselle.
  • nbre_vignette : YY correspond au nombre de vignettes affichées en bas pouvant aller de 1 à 10. En cas d’absence de ce dernier paramètre, le nombre de vignettes par défaut est 10.
    ATTENTION !!! Ce paramètre n’est utilisé qu’en cas de recherche par id_rubrique ou id_secteur.
  • senstri : Z correspond au sens du tri. 0 = par ordre croissant ; 1 = par ordre décroissant. Par défaut, le tri s’effectue par ordre croissant.

img_puzzle.html

Ce modèle met en œuvre un applet Java développé par Self-access.com. Il permet de créer des puzzle à partir de photographies contenues sur votre site.

Code d’appel :

<imgXX|puzzle|taille=WW>

Paramètres :
  • XX : N° du document à afficher.
  • taille : WW correspond à la taille maximale en pixels de la vignette du document à afficher dans l’article. Cette taille maximale est appliquée à la fois à la largeur et à la longueur de la vignette.

doc_download.html

Ce modèle offre la possibilité de forcer le téléchargement d’un document en cliquant simplement sur sa photo/icone avec l’apparition de la fenêtre demandant si vous souhaitez le sauvegarder ou non.
Ce modèle fait appel au filtre doc_download. Ce filtre est réutilisable à l’intérieur de vos propres squelettes.

ATTENTION !!! Cette filtre ne fonctionne qu’avec des documents présents sur le serveur de votre site et non sur des documents distants.
Il pose un soucis avec les films trop longs, mais ceci est en cours d’étude.
Code d’appel :

<docXX|download|taille=WW>

Paramètres :
  • XX : N° du document à afficher.
  • taille : WW correspond à la taille maximale en pixels de la vignette du document à afficher dans l’article. Cette taille maximale est appliquée à la fois à la largeur et à la longueur de la vignette.

Système de protection des images

Le plugin incorpore deux systèmes complémentaires de protection des images. L’un permettant le blocage menu contextuel (A) qui permet souvent de limiter la copie des images à la volé. L’autre affiche en surimpression de l’image soit un logo soit un texte de copyright, ce qui rend inutilisable toutes photos prises sur le site (B).

Blocage du menu contextuel

Ce plugin intègre le petit code développé par http://www.cgiscript.net permettant de bloquer le menu contextuel qui s’ouvre lorsque l’on clique sur le bouton droit de la souris. En cela, elle limite la copie des textes et des images contenus par votre site.

ATTENTION !!! Cette option ne garantit pas qu’aucune copie ne puisse se faire par des professionnels du piratage, mais elle arrête relativement bien le amateurs.
Watermark

La création d’un filtre WaterMark a déjà été traitée dans un précédent article [4]. Son intégration dans le présent plugin allait donc de soit.

Il est à noter que par rapport au précédent article, quelques modifications ont été apportées à ce filtre :

  • La première étant le paramétrage totale du filtre à partir du formulaire de configuration CFG.
  • La deuxième concerne le redimensionnement du logo de copyright en fonction de la taille de l’image à protéger.

Pour compléter ces protections, nous vons invitons à lire l’article Protéger le répertoire IMG.

Configuration du plugin

Comme indiquer plus haut, un certain nombre de paramètres utilisés par ce plugin sont configurable afin d’homogénéiser l’affichage des images.

ATTENTION !!! Ce plugin nécessite l’activation du plugin CFG pour configurer. Dans le cas contraire, des valeurs par défaut ont été définies pour chaque paramètre.

Configuration des paramètres d’affichage des images :

Pour une meilleur compréhension, la valeur par défaut de chaque paramètre est mises en évidence.

  • Taille par défaut des images : 0 à 450 px.
  • Nombre de vignettes par défaut : 1 à 10.
  • Sens du tri par défaut : Croissant / Décroissant

Configuration de l’option WaterMark :

  • Type de marquage de copyright : Aucun / Texte / Image.
  • Alignement horizontal : Gauche / Centre / Droite.
  • Alignement vertical : Haut / Centre / Bas.
  • Excentrage à partir du bord : 0 à 450 px. Par défaut, la bordure est de 10.
  • Fichier image de copyright : L’adresse url du fichier à intégrer. Par défaut, c’est /img_pack/copyright.png.
  • Opacité de l’image de copyright : 10 à 100 px. Par défaut, l’opacité est de 20.
  • Texte utilisé pour le copyright : N’importe quel texte défini par l’administrateur. Par défaut, le texte correspond à Copyright © - ANNEE - NOM DU SITE.
  • Taille de la police du texte : 1 à 5. Par défaut, la taille de police est 3.
  • Ombrage du texte : Oui / Non.
  • Couleur du texte : La code hexadécimal de la couleur de la police du copyright. Par défaut, cette valeur est FFFFFF représentant le blanc.
    ATTENTION !!! Le code hexadécimal ne doit pas être précédé du symbol "#".

Configuration du blocage du clic droit :

  • Activation du blocage du clic droit : Désactivé / Activé.
  • Blocage non applicable à : Aucune / Les administrateurs / Les rédacteurs et les administrateurs.

Autres filtres et balises ajoutés

#IMGLOCAL

Cette balise permet l’utilisation des filtres d’images de SPIP sur un fichier local non lié à un article (un fichier que vous auriez téléchargé par FTP).

Je remercie Triton-pointcentral pour ce code très pratique.

Code d’appel :

[(#IMGLOCAL{nom_du_fichier_image})]

|image_watermark

Ce filtre s’ajoute à ceux déjà implémentés dans SPIP. C’est lui qui permet l’intégration du copyright dans les images du site.

Code d’appel :

[(#BALISE|image_watermark)]

|doc_download

Ce filtre s’ajoute à ceux déjà implémentés dans SPIP. Il permet de forcer le téléchargement du fichier passé en paramètre.

Code d’appel :

[(#URL|doc_download)]

Todo

- Mettre en option config le fait d’activer ou non l’élargissement par Imagebox.
- Permettre de télécharger, dans CFG, son propre logo de copyright.
- Implémenter img_train.html.
- Implémenter img_livre.html.
- Rendre compatible SPIP 2.


Zip - 71.7 ko
Le Plugin Spip-Album
Version 2.05

P.-S.

Nous vous conseillons l’utilisation du plugin JQuery pour 192x qui améliore grandement les effets visuels de ImageBox.

Dernière mise à jour du site : 4 août 2013 | Suivre la vie du site RSS 2.0 | Plan du site | SPIP | squelette | Habillage : Rouge sang | © 2006-2017 – Xébiaut