Plugin Portfolio ImageFlow

reflets et profondeur pour faire défiler vos vignettes

Portfolio ImageFlow est un plugin 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 (avec la souris ou les flèches du clavier) ou via la roulette de la souris ou encore en cliquant sur une vignette.

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

[(#REM) 
	***************************************
	Portfolio : album d'images 
]<!-- portfolio imageflow -->
<B_documents_portfolio>
	<div id="documents_portfolio">
		<h2><:info_portfolio:></h2>     
		<div id="imageflow"> 
			<div id="loading">
				<strong><:ical_methode_http:></strong><br/>
				<img src="[(#CHEMIN{imageflow/loading.gif})]" width="208" height="13" alt="loading" />
			</div>
			<div id="images"> 
				<BOUCLE_documents_portfolio(DOCUMENTS){id_article}{mode=document}{extension IN png,jpg,gif} {par num titre, date} {doublons}>
				<img 
					src="#CHEMIN{imageflow/reflect_v3.php}?img=../../../[(#LOGO_DOCUMENT||extraire_attribut{src})]#IMAGEFLOW_ARGS" 
					alt="[(#TITRE|couper{80}|texte_backend)]" 
					longdesc="#URL_DOCUMENT" /> 
				</BOUCLE_documents_portfolio>
			</div>
		
			<div id="captions"></div>
			<div id="scrollbar-box">
				<div id="scrollbar"> 
					<div id="slider"></div>
				</div>
			</div>
		</div>
		
		<div class="clear"></div>
			<img id="affichage" src="" alt="" style="max-height: 384px; max-width: 512px;" /> 
	</div> 
	<!-- fin docs portfolio -->		
</B_documents_portfolio>
[(#REM)
	***************************************
]<!-- fin portfolio imageflow -->

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

[(#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.

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.

Discussion

12 discussions

  • 1
    Gefonline

    J’ai un peu pédalé pour faire fonctionner ce plugin. Tout s’est éclairé lorsque je me suis aperçu qu’il fallait insérer la balise #IMAGEFLOW_INSERT_HEAD dans le head du squelette. Il ne me semble pas que cette information apparaisse dans la contrib. Le rendu est superbe en tout cas, bravo!

    Reply to this message

  • Excellent!
    j’aimerai utiliser l’idée pour construire un menu de type dock sur mac, j’ai donc remplacé #LOGO_DOCUMENT par #LOGO_ARTICLE toutefois il demeure trois petits soucis :
    -  au survol l’image logo ne s’agrandit pas
    -  au clic le logo dans sa taille originale de s’affiche pas
    -  et on ne peut accéder à l’article en question ...
    Une idée des modifications à faire pour remédier à tout cela ?
    Merci d’avance

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom