Avertissement

 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

Démonstration

Exemples :
 http://quesaco.org/Portfolio-ImageF...
 http://skus1.free.fr/spip.php?artic...

Historique

L’écriture du plugin Portfolio ImageFlow a été réalisé par Christian PAULUS, suite à une contribution de Stéphane Kus sur ce site.

Pré-requis

- PHP 4.3.2 ou supérieur - Librairie GD 2.0.1 ou supérieur - Extension GD pour PHP

Installation

Téléchargez l’archive :

Portfolio ImageFlow 1.12

ou récupérez la dernière version présente sur la zone par svn :

svn export svn ://zone.spip.org/spip-zone/_plugins_/_stable_/portfolio_imageflow

Configuration

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).

Créer son portfolio

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.

Dans l’espace privé, le portfolio apparait sous la boite texte.

Longue description

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:// »).

Installer votre squelette

Pour que le Portfolio ImageFlow s’applique à tous les articles de votre site :

copier le code ci-dessous pour qu’il remplace le bloc "portfolio" de votre squelette "article.html" :

Pour que le portfolio s’applique à tous les articles d’une rubrique :

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.

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 ? ».

Filtre image_avec_reflet

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é :

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’ :

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.

Désactiver le plug-in

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.

Utiliser le script sans le plugin

L’installation du plugin n’est pas nécessaire si on met le script en place dans le squelette (en rajoutant l’appel du javascript dans le <head>). Voir l’article "Le script ImageFlow pour SPIP" pour savoir comment procéder.