©
. Document créé le 22 août 2008 , mis à jour le 12 octobre 2011.On n'est jamais heureux que dans le bonheur qu'on donne. Donner, c'est recevoir. Abbé Pierre
Accueil du site > Outils > Portfolio ImageFlow pour SPIP
Portfolio ImageFlow est un plug-in SPIP qui permet d’afficher un menu déroulant d’images et la sélection de l’une d’elles pour affichage. Les images « vignette » du menu déroulant sont accompagnées d’un effet de reflet. La navigation entre les images peut être réalisée en déplaçant le curseur sur la ligne ou via la roulette de la souris.
Portfolio ImageFlow est un programme libre, vous pouvez le redistribuer et/ou le modifier selon les termes de la Licence Publique Generale GNU publiée par la Free Software Foundation (version 2).
Portfolio ImageFlow est distribué car potentiellement utile, mais SANS AUCUNE GARANTIE, ni explicite ni implicite, y compris les garanties de commercialisation ou d’adaptation dans un but spécifique. Reportez-vous à la Licence Publique Générale GNU pour plus de détails.
Portfolio ImageFlow est sous licence GPL/GNU. Ce n’est pas le cas des scripts qui l’accompagnent (Javascript et PHP). Il convient donc de lire les scripts concernés ou consulter les sites de leurs auteurs respectifs.
Les scripts utilisés par Portfolio ImageFlow :
ImageFlow 0.9, de Finn Rudolph
Easy Reflections v3, de Richard Davey
Exemple, quelques photographies de Dijon et un symbole graphique avec son fond transparent :
Portfolio ImageFlow a vu le jour suite à une contribution de Stéphane Kus sur Spip-contrib.net. Le squelette SPIP article=0.html fourni avec Portfolio ImageFlow est à l’origine celui de Stéphane.
PHP 4.3.2 ou supérieur
Librairie GD 2.0.1 ou supérieur
Extension GD pour PHP
Téléchargez l’archive de portfolio_imageflow sur la zone.
Installez le répertoire décompressé dans votre répertoire plugins. Activez le plug-in via l’interface privée.
Dans la zone privée, cliquez sur l’icône Configuration puis sur l’onglet Portfolio ImageFlow.
Définissez la taille du reflet de votre image et les différentes couleurs et niveaux de transparence. Validez.
Dans l’onglet Fonctions avancées, sélectionnez Générer automatiquement les miniatures des images si vous désirez voir apparaître une vignette de votre image dans le menu déroulant (sinon, c’est l’icône du type de fichier qui apparaitra).
Le slider, c’est ce petit bouton qui se trouve sur la barre horizontale et qui permet de faire défiler les vignettes.
Vous pouvez, via l’interface de configuration, sélectionner un autre slider pour votre portfolio.
Si vous désirez personnaliser le slider, en créer un nouveau, placez votre création dans le répertoire images du plugin. Un slider est un fichier GIF de 14 pixels de large et de haut, dont le nom doit commencer par « slider_ » et porter l’exension « .gif ». Une fois votre slider personnel enregistré dans le dossier images du plugin, retournez sur l’interface de configuration et sélectionnez-le dans la boîte des sliders.
D’autres options sont disponibles via l’interface d’administration. Pré charger les images pendant la consultation, animation en fondu enchainé des grandes images. D’autres viendront probablement prochainement, je vous laisse les découvrir.
Rédigez votre article et ajoutez-y vos images en tant que documents joints (et non en tant qu’images). Inutile de lier ces documents dans votre article, SPIP crée automatiquement un portfolio s’il trouve des images jointes en tant que documents.
Donnez un titre à votre image. Ce titre est affiché dans la barre de défilement.
En espace privé, le portfolio apparait sous la boite texte.
L’attribut longdesc de la balise HTML img contient la description de l’image telle que vous l’enrichissez dans le champ Description de l’image concernée en espace privé de SPIP.
Depuis la version 1.05 de portfolio_imageflow, un filtre peut être appliqué sur longdesc. Vous en trouverez un exemple dans le squelette article=0.html.
En temps normal, ce champ doit contenir un lien sur une autre page, parfois dans le document lui-même.
Si cette description contient du texte au lieu d’une URL, sa valeur est corrigée pour être conforme avec la norme XHTML.
Ainsi, dans le champ description de votre image, vous pouvez placer au choix :
Une description longue ;
Une URL absolu (par ex. : « http://www.quesaco.org/index.php ») ;
Un lien relatif (par ex. : « ../../rubrique/texte.html ») ;
Une ancre (par ex. : « #ancredanslapage »).
Dans le cas d’un lien relatif, le filtre vérifie s’il s’agit d’un fichier html ou php. Si vous utilisez les urls propres ($type_urls = "propres"), l’extension est absente. Dans ce cas, vous devez utiliser un lien absolu (commençant par « http:// »).
Les lecteurs d’écran tel que Jaws (Job Access With Speech) sont capables de détecter cet attribut et lire son contenu.
Une longue description peut-être un texte, mais Jaws (ou IE, difficile à savoir) ne saura pas l’interpréter comme tel et le prendra pour une URL, mais il lira le contenu de ce champ avant de proposer la navigation sur cette description (en pressant la touche « Entrée »). En attendant que nos outils sachent reconnaitre proprement les champs CDATA dans l’attribut longdesc, et si vous désirez être pleinement compatible, l’insertion d’une description dans le champ éponyme est déconseillée.
Plus d’information à propos du schéma d’URL sur la RFC2397. Si besoin, vous pouvez également consulter la documentation en français du W3.
Pour vérifier la présence de l’attribut longdesc, sous Firefox, click droit sur l’image et demandez les propriétés. Le contenu de longdesc apparait dans le champ « Description ».
Pour les autres navigateurs, il vous faut consulter le code XHTML de la page.
Notez le numéro de la rubrique contenant votre article. Dans l’exemple ci-dessus, c’est la rubrique numéro 123.
Recopiez le squelette article=0.html qui se trouve dans le répertoire du plug-in. Placez votre copie dans votre dossier squelettes ou autre nom de répertoire si vous l’avez spécifié.
Renommez article=0.html en article=123.html. Ainsi, ce squelette sera utilisé pour tous les articles contenus dans la rubrique 123.
Vous voulez mettre en place Portfolio ImageFlow dans un seul article ? Regardez le squelette de cette page (icône squelette en pied de page). Pour cet article, le mot-clé « portfolio » a été attribué à cet article. Le squelette article.html utilisé sur Quesaco.org place automatiquement les balises et le code HTML nécessaire à tout article dont l’un des mots-clés est « portfolio ».
Si vous ne savez pas ce qu’est un squelette SPIP, ou ignorez comment mettre en place des squelettes personnalisés sur votre site, consultez la documentation en ligne sur SPIP. Net « Où placer les fichiers de squelettes ? ».
Le filtre image_avec_reflet peut être appliqué dans votre squelette SPIP à une image.
Si vous ne savez pas ce qu’est un filtre SPIP, consultez la documentation disponible sur spip.net.
Les paramètres optionnels à transmettre sont, dans l’ordre :
Texte alternatif ;
Nom de la balise ;
Titre de l’image ;
Description de l’image ou URL sur description
CSS style
Teinte du reflet, en hexadécimal
Couleur de fond ;
Hauteur en pourcentage du reflet ;
Largeur finale.
Dans l’exemple ci-dessous, seul l’attribut ‘src’ sera complété :
[(#LOGO_DOCUMENT||image_avec_reflet{})]
Dans l’exemple ci-dessous, le titre est placé dans les attributs ‘alt’ et ‘title’, la description dans ‘longdesc’, le lien permettant l’affichage interactif dans ‘name’ :
[(#LOGO_DOCUMENT||image_avec_reflet{
[(#TITRE|couper{80}|texte_backend)]
, [(#URL_DOCUMENT)]
, [(#TITRE|couper{80}|texte_backend)]
, [(#DESCRIPTIF)]
})]
Les paramètres complémentaires sont issus de vos préférences, définies via la page de configuration du plug-in.
Le squelette article=00.html présent dans le dossier d’ image_avec_reflet illustre l’utilisation de ce filtre.
Le filtre image_avec_reflet utilise la mécanique de cache de SPIP. Ce principe de gestion du cache vous permet de vider le cache des images via l’espace privé.
Le squelette article=0.html. n’utilise pas cette mécanique de cache.
Un modèle est disponible pour l’insertion d’une image dans l’article. Si vous ne savez pas ce qu’est un modèle SPIP, consulter cet article sur spip.net.
Ajoutez votre image à votre article, en tant qu’image, puis insérez dans votre article le raccourci du style :
<img417|reflet>
Voici quelques exemples :
<img417|reflet|center>
<img417|reflet|style=border:3px solid red|fade_start=0%|fade_end=100%|center>
<img417|reflet|tint=#00F|width=200|center>
<img417|reflet|width=100|bgc=#FF0|center>
N’oubliez pas que la construction des images occupe fortement la machine. Ne soyez pas trop gourmand.
Depuis la version 1.16, vous pouvez insérer un modèle à l’intérieur de votre article, comme cette page le démontre.
Marche à suivre :
1/ Insérez vos images en tant que documents
2/ ajoutez où bon vous semble, dans votre article, à l’édition en espace privé, la balise
<portfolioreflet|center>
Si besoin, précisez la couleur de fond du portfolio. Exemple pour un fond gris :
<portfolioreflet|bgcolor=#ccc|center>
Vous pouvez utiliser les couleurs nommées. Pour en savoir plus sur les couleurs nommées, consultez cet article.
Si besoin, ajouter un titre à votre portfolio. Exemple pour « Enfin des vacances » :
<portfolioreflet|bgcolor=#ccc|titre=Enfin des vacances|center>
Il vous faut ensuite modifier le squelette nécessaire.
Prenez exemple sur les squelettes
article=000.html
article=0000.html
Le premier (article=000.html) insère l’en-tête nécessaire pour l’appel des scripts. Il est basé sur article.html de la distribution. Pour appliquer l’effet sur vos portfolios, vous pouvez par exemple créer une rubrique et recopier « article=000.html » dans vos squelettes. Prenez soin de renommez article=000.html en article=123.html si votre rubrique porte le numéro « 123 ».
Le second (article=0000.html) est une variante de article=000.html. Le portfolio en base de page y est supprimé.
Portfolio ImageFlow utilise la table SQL spip_meta en y ajoutant un champ pour conserver en mémoire les préférences d’affichage.
Vous pouvez désactiver Portfolio ImageFlow en décochant simplement sa case dans la boite de sélection des plugins. Vos préférences seront conservées.
Pour désinstaller Portfolio ImageFlow, cliquez avant tout sur la petite boite présente dans le champ, puis sur Effacer tout. Vos préférences liées à Portfolio ImageFlow seront supprimées.
Testé et validé pour :
Firefox 3.0.1 / Windows Vista
Internet Explorer 7.0 / Windows Vista
Opera 9.5.1 / Windows Vista
Les forums sont fermés.