SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 229 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > ImageFlow > Plugin Portfolio ImageFlow

Plugin Portfolio ImageFlow

reflets et profondeur pour faire défiler vos vignettes

26 août 2008 – par Paladin, StephK – 30 commentaires

8 votes

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 :

Zip - 87.1 ko
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.

Voir en ligne : article original

Dernière modification de cette page le 28 août 2008

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 7 juin 2011 à 00:09, par gauste En réponse à : Plugin Portfolio ImageFlow

    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

  • Le 12 mars 2009 à 16:34, par AlainF En réponse à : Plugin Portfolio ImageFlow

    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 !!!

    • Le 23 septembre 2009 à 10:40, par Albert34 En réponse à : Plugin Portfolio ImageFlow

      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

    • Le 23 septembre 2009 à 11:10, par Paladin En réponse à : Version GD [Plugin 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.

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

    • Le 24 septembre 2009 à 10:24, par Albert34 En réponse à : Version GD [Plugin Portfolio ImageFlow]

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

    • Le 20 novembre 2010 à 20:19, par DD En réponse à : Plugin Portfolio ImageFlow

      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

    • Le 1er mars 2011 à 14:35, par ateys En réponse à : Plugin Portfolio ImageFlow

      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

    • Le 1er mars 2011 à 14:38, par Paladin En réponse à : Plugin Portfolio ImageFlow

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

      Bon courage.

    Répondre à ce message

  • Le 18 février 2011 à 21:36, par blablabart En réponse à : Plugin Portfolio ImageFlow

    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 !

    JPEG - 56.4 ko

    Répondre à ce message

  • Le 16 février 2011 à 21:35, par melkior34 En réponse à : Plugin Portfolio ImageFlow

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

    • Le 16 février 2011 à 22:01, par Paladin En réponse à : Plugin Portfolio ImageFlow

      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 ?

    • Le 16 février 2011 à 22:33, par melkior34 En réponse à : Plugin Portfolio ImageFlow

      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 !!

    • Le 17 février 2011 à 13:10, par melkior34 En réponse à : Plugin Portfolio ImageFlow

      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 !

    • Le 17 février 2011 à 13:14, par Paladin En réponse à : Plugin Portfolio ImageFlow

      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.

    • Le 17 février 2011 à 13:30, par melkior34 En réponse à : Plugin Portfolio ImageFlow

      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

  • Le 19 décembre 2010 à 15:05, par Ludo En réponse à : Plugin Portfolio ImageFlow

    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

    • Le 20 décembre 2010 à 15:23, par Paladin En réponse à : Plugin Portfolio ImageFlow

      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

  • Le 19 février 2010 à 17:04, par webbud En réponse à : Plugin Portfolio ImageFlow

    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

    • Le 22 février 2010 à 18:06, par Paladin En réponse à : Plugin Portfolio ImageFlow

      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

  • Le 9 mars 2009 à 23:43, par ? En réponse à : Plugin Portfolio ImageFlow

    est-il dispo pour SPIP 2

    merci

    • Le 10 mars 2009 à 00:09, par StephK En réponse à : Plugin Portfolio ImageFlow

      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

  • Le 22 janvier 2009 à 08:37, par PBU En réponse à : Plugin Portfolio ImageFlow

    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

  • Le 15 janvier 2009 à 09:34, par Julien En réponse à : Plugin Portfolio ImageFlow

    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

  • Le 6 janvier 2009 à 23:07, par PBU En réponse à : Plugin Portfolio ImageFlow

    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

    • Le 7 janvier 2009 à 08:17, par Paladin En réponse à : Plugin Portfolio ImageFlow

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

    • Le 11 janvier 2009 à 19:10, par gigi En réponse à : Image fantôme

      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

    • Le 11 janvier 2009 à 19:16, par gigi En réponse à : Image fantôme saisie au vol

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

      PNG - 400.9 ko

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

Ça spipe par là