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 :
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.
Discussions par date d’activité
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
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 :
une idée ?
P.S. : l’extension gd.so est activée dans le php.ini d’apache2
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
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
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 ?
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 !!
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.
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..
dans le article.htmll de sarkaspip 3 pour y insérer #IMAGEFLOW_INSERT_HEAD . Est ce normal ?Je ne trouve pas de balise
(Je sais je suis vraiment un noob) Mais je suis aussi très obstiné !
Merci encore
Répondre à ce message
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
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
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
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
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 :
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.
Suivre les commentaires : |