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

  • Bonjour,

    Comment ajouter de l’espace entre le slider et la vignette en grand ? Il y a un chevauchement...
    http://www.jce-saintes.org colonne gauche

    Répondre à ce message

  • 6

    Bonjour

    merci pour ce plugin très sympa qui propose un effet très esthétique.

    J’aimerai présenter les vignettes de sites obtenues avec un autre plugin : Thumbsites

    Quelqu’un a déjà essayé ???

    Par avance, merci de vos réponses !!!

    • bonjour

      je rencontre un problème bizarre
      sous debian lenny php5 gd2

      le plugin ne semble pas reconnaitre la version de gd installée :

      Portfolio ImageFlow
      Avertissement Erreur...
      La librairie GD installée est trop ancienne. La version 2.0.1 ou supérieure est nécessaire, et 2.0.28 est fortement recommandée.

      une idée ?

      P.S. : l’extension gd.so est activée dans le php.ini d’apache2

    • Avertissement Erreur... La librairie GD installée est trop ancienne. La version 2.0.1 ou supérieure est nécessaire, et 2.0.28 est fortement recommandée.

      J’ai le même soucis sur un debian/lenny. La version GD est trop ancienne.

      phpinfo indique : GD Version 2.0 or higher

      Chez un autre hébergeur : GD Version bundled (2.0.28 compatible)

      et là, dans ce dernier cas, ça passe (effets de reflets, etc.)

    • ben justement non

      sur lenny la version de gd2 est la 2.0.36

      d’ou une certaine incompréhension...
      il est bien sur possible de modifier le plugin
      mais bon ;)

    • Moi aussi j’ai un problème de version sur un Ubuntu 10.10 avec GD2
      ( GD2 Installé : 2.0.36 rc1 dfsg-3.2ubuntu1)

      j’ai le message :
      Portfolio ImageFlow
      Avertissement Erreur...
      La librairie GD installée est trop ancienne. La version 2.0.1 ou supérieure est nécessaire, et 2.0.28 est fortement recommandée

      et je ne vois pas d’entrée pour configurer le plugin avec CFG même si dans la liste des plugins il semble avoir été installé.

      dd

    • meme probleme sous mandriva 2010

      et plus fort encore
      j’ai 2 site spip
      le premier fonctionne trés bien
      pas l’autre
      la librairie GD installée est trop ancienne. La version 2.0.1 ou supérieure est nécessaire, et 2.0.28 est fortement recommandée
      le pire c’est un copier collé du premier

      de l’aide nous serait bien utile merci

    • Il faut recompiler GD, la dernière version.
      C’est dans la config d’installation de PHP.

      Bon courage.

    Répondre à ce message

  • blablabart

    Bonsoir,

    Je me demande comment changer la taille de l’image projetée sous le portfolio imageflow ?

    Est ce possible ? Car pour ma part, l’image projetée est aussi petite (150px par défaut réglé dans réglage avancé) que la vignette du portfolio !

    Merci par avance !

    Répondre à ce message

  • 5
    melkior34

    Bonsoir !

    Et tout d’abord bravo pour le boulot !

    Je suis débutant en spip (et oui désolé) voici mon site http://profpc.fr

    J’ai un souci avec le plugin même en intégrant la balise #IMAGEFLOW_INSERT_HEAD
    voila ce que cela donne http://profpc.fr/spip.php?article27&var_mode=calcul
    Ce qui est moche par rapport au reste de mon site. En fait j’ai créer un dossier squelettes ou j’y ai intégrer article.html modifié par mes soins et selon expliquer plus haut.

    Je ne comprends pas...Cela fait une journée que j’y suis !
    Merci par avance !
    (Peut etre un pb de copmpatibilité avec spip 2.1 ? Ou conflit de squelette ?)

    • Si j’ai bien compris, tu ne comprends pas pourquoi la mise en page de ton site n’est pas pris en compte dans la page de ton portfolio ?

      SI c’est ça, c’est juste un problème de squelettes. Pas du plugin.
      Dans ton exemple, c’est le squelette article.html, quoi doit se trouver dans ton répertoire de squelettes, avec l’INSERT_HEAD pour charger les feuilles de styles (ou autre solution).

      si le fichier article.html n’est pas trouvé dans ton dossier de squelettes, SPIP va le chercher dans le répertoire « squelettes », puis dans les répertoires des plugins, puis à la racine, puis dans la dist. Et donc, s’il n’est pas personnalisé, ça donne une page toute bête.

      Solution : recopier article.html dans ton réperoire de squelettes et le personnaliser en s’inspirant d’un autre squelette qui s’y trouve.

      Mais est-ce bien le problème ?

    • melkior34

      Merci pour la rapidité ! C’est formidable ! :-))

      « Si j’ai bien compris, tu ne comprends pas pourquoi la mise en page de ton site n’est pas pris en compte dans la page de ton portfolio ? »
      -  >C’est bien cela !

      Je viens de faire quelques manips suite à tes explications.

      1)J’ai chargé article.html(modifié) dans /squelettes = aucun résultat (page moche comme ci dessus)

      2)J’ai chargé dans le répertoire /squelettes un copier coller de tous ce qu’il y a dans /squelettes-dist SAUF article.html qui y était déjà. (version contenant le code dans portfolio et la balise dans head) = après recalcul aucun résultat les css ne sont toujours pas chargé...visiblement !

      3)J’ai vidé le dossier /squelettes et j’ai directement modifié article.html dans /squelettes-dist et la le plug in ne semble plus fonctionner ! Il apparait un port folio classique... Même après vidage du cache et recalcul !

      A n’y rien comprendre...En tout cas merci de me lire aussi vite !!

    • melkior34

      En fait j’utilise le squelette sarka-spip 3..Je dois donc , je suppose, modifier article.html dans /plugins/sarkaspip3 ?

      Dans ce cas ou est la ligne du portfolio à remplacer ?

      Merci par avance !

    • Il faut comparer les deux fichiers article.html.

      Sinon, comme expliqué plus haut dans ce billet, il y a un mode d’emploi/d’installation complémentaire pour le portfolio sur Quesaco.

    • melkior34

      OK merci je vais voir cela de suite. Mais on progresse ! En effet, après avoir inséré le code dans le article.html de sarkaspip j’ai enfin une page propre !
      Mais ce n’est pas encore ça...

      cf ici

      Barre de téléchargement infinie...Slider qui n’apparait pas..
      Je ne trouve pas de balise

      dans le article.htmll de sarkaspip 3 pour y insérer #IMAGEFLOW_INSERT_HEAD . Est ce normal ?

      (Je sais je suis vraiment un noob) Mais je suis aussi très obstiné !
      Merci encore

    Répondre à ce message

  • 1

    Bonjour
    J’utilise ce plugin (portfolio 1.31) avec le squelette Escal et le plugin thickbox.
    J’ai une anomalie que je n’explique pas. L’affichage en « diaporama » fonctionne dans mon espace privé, mais je n’ai aucun portfolio dans l’espace public. Je ne vois pas où ça cloche.
    Est-ce que quelqu’un peut m’aiguiller ?

    Merci

    • Conflit de squelette ? Vérifier sa prise en charge par SPIP. Ou peut-être un conflit de JS. Mettre des traces à gauche à droite pour vérifier. Activer Firebug sous Firefox (outil redoutable). Et garder courage !

    Répondre à ce message

  • 1

    Bonjour,
    Je ne comprends pas : pas de slider de défilement et toutes les images s’affichent d’emblée, malgré ma bonne configuration du module en espace privé.
    Que faire ?
    Merci d’avance

    • Bonjour, Je ne comprends pas : pas de slider de défilement et toutes les images s’affichent d’emblée,

      Ressemble à un problème Javascript. Balise IMAGEFLOW_INSERT_HEAD manquante ? (consulter les squelettes donnés en exemple dans le répertoire du plugin).

      Prendre plutôt la version disponible sur la zone. La dernière version est la 1.29.

      Pour l’éventuel conflit javascript, prendre FireFox équipé de Firebug, ouvrir la console Firebug et charger la page.

      Bon courage.

    Répondre à ce message

  • 1

    est-il dispo pour SPIP 2

    merci

    • Oui,

      tu peux même l’installer via l’interface privé en utilisant l’interface d’installation automatique des plugins de SPIP 2

    Répondre à ce message

  • Bonjour,

    Désolé de ne pas répondre plus tôt, je n’étais pas dispo ces derniers jours.

    Pour l’instant, toujours le même problème, je voulais simplement confirmer que c’était bien le même phénomène que celui illustré par Gigi.

    Bonne journée à tous !

    Philippe

    Répondre à ce message

  • Bravo pour ce plugin
    Je ne connais pas grand chose en programmation, mais il me semblke très proche de ce que je voudrais. Peut-être quelqu’un pourrait m’aider dans mes tatonnements.
    Je voudrais faire une page d’accueil de mon site entuèrement blanche excepté une série d’images sous forme de « coverflow » (pour cela imageflow est parfait) en milieu de page. Seulement, je ne voudrais pas de l’image en grand dessous. Je préférerais que ce soit l’image centrale au dusse de la barre de défilement avec le curseur qui soit la plus grosse. Les images immédiatement de part et d’autre de cette image centrale seraient plus petites, celles du niveau suivant encore plus petite etc... Un peu comme les roses blanches de cette page, avec encore plus de différence entre l’image centrale et les autres.
    Je ne voudrais pas de l’image de grande taille en dessous car du coup elle ferait double emploi avec l’image centrale.

    Par ailleurs, il faudrait qu’il puisse y avoir des liens vers des articles de mon site spip dans certaines légendes de photos. Ca, j’ai cru comprendre que c’était possible en remplissant le champ de nom de chaque photo lors de l’import dans spip, mais je n’y parviens pas.
    De plus, je veux un fond blanc à mon site et j’ai remarqué que les légendes étaient forcément en blanc, peut-on modifier leur couleur ?

    Merci beaucoup pour votre aide future

    Répondre à ce message

  • 3

    Bonjour, J’ai découvert aujourd’hui ce plugin très intéressant et je l’ai installé.

    J’obtiens l’effet cover flow à la iTunes, et l’image est affichée en dessous, mais à chaque fois, apparaît fugitivement l’image dans sa taille normale. L’effet n’est pas très heureux. Comment l’éviter ? Faut-il que je recharge une version moins grande des images ?

    Merci

    • Elle apparaît où l’image fugitive dans sa taille normale ? A la place de la vignette ?

    • Bonjour !
      J’ai le même souci : apparition fugitive de l’image en grand format avant apparition en taille « spipienne », sous le portfolio.

      Phénomène apparu avec spip 2.0.2, avec spip 2.0.0 rien ne s’affichait sous le « manège »...
      Plutôt joli, tout ça ! Merci

    • Pour être mieux comprise, saisie au vol de mes roses de test...

    Répondre à ce message

Ajouter un commentaire

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
  • 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 apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom