Portfolio ImageFlow pour SPIP
© . Document créé le 22 août 2008 , mis à jour le 12 octobre 2011.
Si les faits ne correspondent pas à la théorie, changez les faits. Albert Einstein
Accueil du site > Outils > Portfolio ImageFlow pour SPIP
Plugin / SPIP 1.9.2d, 2.1.99
- Inventaire des articles SPIP
- Formulaire de suppression d’auteurs
- Archive de site (Website archiver)
- Informations SPIP - Get Info (GInS)
- Renommer les fichiers en tout ascii par lot
- Polices de caractères pour site web
- Localiser le pays du visiteur
- Optimiser ses PNG
- Transcoder MediaWiki en SPIP
- Convertir UTF en entités HTML décimales
- Exporter les auteurs
- Mon diplôme SPIP
- Citation aléatoire
- Surcharger les raccourcis texte
- Illustration sonore mp3
- Portfolio ImageFlow pour SPIP
- Spiplistes, les états du courrier
- Barre d’accessibilité pour SPIP
- Livre d’or en rubrique
- Lister les auteurs avec date de connexion
- Page de login et boite statut pour SPIP
- Menu de navigation dépliant pour SPIP
- Administrer les mots-clés SPIP
- SPIP-Listes, documentation technique (II)
- SPIP-Listes-V, doc technique (I)
- SPIP-Listes-V, plugin SPIP de messagerie
- Convertisseur HTML JavaScript
- CSS Button Editor
Portfolio ImageFlow est un plug-in 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 ou via la roulette de la souris.
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
Exemple, quelques photographies de Dijon et un symbole graphique avec son fond transparent :
Portfolio Demo portfolio_imageflow
Téléchargement
Historique
Portfolio ImageFlow a vu le jour suite à une contribution de Stéphane Kus sur Spip-contrib.net. Le squelette SPIP article=0.html fourni avec Portfolio ImageFlow est à l’origine celui de Stéphane.
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 de portfolio_imageflow sur la zone.
Installez le répertoire décompressé dans votre répertoire plugins. Activez le plug-in via l’interface privée.
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 propre slider
Le slider, c’est ce petit bouton qui se trouve sur la barre horizontale et qui permet de faire défiler les vignettes.
Vous pouvez, via l’interface de configuration, sélectionner un autre slider pour votre portfolio.
Si vous désirez personnaliser le slider, en créer un nouveau, placez votre création dans le répertoire images du plugin. Un slider est un fichier GIF de 14 pixels de large et de haut, dont le nom doit commencer par « slider_ » et porter l’exension « .gif ». Une fois votre slider personnel enregistré dans le dossier images du plugin, retournez sur l’interface de configuration et sélectionnez-le dans la boîte des sliders.
Options complémentaires
D’autres options sont disponibles via l’interface d’administration. Pré charger les images pendant la consultation, animation en fondu enchainé des grandes images. D’autres viendront probablement prochainement, je vous laisse les découvrir.
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.
En 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:// »).
Les lecteurs d’écran tel que Jaws (Job Access With Speech) sont capables de détecter cet attribut et lire son contenu.
Une longue description peut-être un texte, mais Jaws (ou IE, difficile à savoir) ne saura pas l’interpréter comme tel et le prendra pour une URL, mais il lira le contenu de ce champ avant de proposer la navigation sur cette description (en pressant la touche « Entrée »). En attendant que nos outils sachent reconnaitre proprement les champs CDATA dans l’attribut longdesc, et si vous désirez être pleinement compatible, l’insertion d’une description dans le champ éponyme est déconseillée.
Plus d’information à propos du schéma d’URL sur la RFC2397. Si besoin, vous pouvez également consulter la documentation en français du W3.
Vérifier la présence de longdesc
Pour vérifier la présence de l’attribut longdesc, sous Firefox, click droit sur l’image et demandez les propriétés. Le contenu de longdesc apparait dans le champ « Description ».
Pour les autres navigateurs, il vous faut consulter le code XHTML de la page.
Installer votre squelette
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.
Vous voulez mettre en place Portfolio ImageFlow dans un seul article ? Regardez le squelette de cette page (icône squelette en pied de page). Pour cet article, le mot-clé « portfolio » a été attribué à cet article. Le squelette article.html utilisé sur Quesaco.org place automatiquement les balises et le code HTML nécessaire à tout article dont l’un des mots-clés est « portfolio ».
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.
Modèle pour insertion d’une image dans l’article
Un modèle est disponible pour l’insertion d’une image dans l’article. Si vous ne savez pas ce qu’est un modèle SPIP, consulter cet article sur spip.net.
Ajoutez votre image à votre article, en tant qu’image, puis insérez dans votre article le raccourci du style :
<img417|reflet>Voici quelques exemples :
Insertion classique, centrée dans le texte
<img417|reflet|center>Bordure rouge de 3 pixels d’épaisseur, dégradé inversé
<img417|reflet|style=border:3px solid red|fade_start=0%|fade_end=100%|center>Image agrandie à 200 pixels de large, avec dégradé teinté de bleu
<img417|reflet|tint=#00F|width=200|center>Image réduite à 100 pixels de large, dégradé sur fond jaune
<img417|reflet|width=100|bgc=#FF0|center>Conseil
N’oubliez pas que la construction des images occupe fortement la machine. Ne soyez pas trop gourmand.
Modèle pour insertion d’un portfolio dans l’article
Depuis la version 1.16, vous pouvez insérer un modèle à l’intérieur de votre article, comme cette page le démontre.
Marche à suivre :
1/ Insérez vos images en tant que documents
2/ ajoutez où bon vous semble, dans votre article, à l’édition en espace privé, la balise
<portfolioreflet|center>Si besoin, précisez la couleur de fond du portfolio. Exemple pour un fond gris :
<portfolioreflet|bgcolor=#ccc|center>Vous pouvez utiliser les couleurs nommées. Pour en savoir plus sur les couleurs nommées, consultez cet article.
Si besoin, ajouter un titre à votre portfolio. Exemple pour « Enfin des vacances » :
<portfolioreflet|bgcolor=#ccc|titre=Enfin des vacances|center>Il vous faut ensuite modifier le squelette nécessaire.
Prenez exemple sur les squelettes
article=000.html
article=0000.html
Le premier (article=000.html) insère l’en-tête nécessaire pour l’appel des scripts. Il est basé sur article.html de la distribution. Pour appliquer l’effet sur vos portfolios, vous pouvez par exemple créer une rubrique et recopier « article=000.html » dans vos squelettes. Prenez soin de renommez article=000.html en article=123.html si votre rubrique porte le numéro « 123 ».
Le second (article=0000.html) est une variante de article=000.html. Le portfolio en base de page y est supprimé.
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.
Test et validation
Testé et validé pour :
Firefox 3.0.1 / Windows Vista
Internet Explorer 7.0 / Windows Vista
Opera 9.5.1 / Windows Vista
Portfolio
Documents joints
-
Portfolio ImageFlow 1.20 (Zip - 98.7 ko)
-
Portfolio ImageFlow 1.22 (Zip - 98.7 ko)
Plussoyez !
Les forums sont fermés.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Info css 7 septembre 2008 15:10
Bon apparemment ma question n’était pas fondamentale.
Ok, cela marche super bien. Maintenant je souhaite changer la couleur du texte des vignettes qui elles sont en blanc, donc pas très lisibles.
D’autre part, peut-on configurer la taille des vignettes afin qu’elles soient vraiment beaucoup plus petites que dans mon exemple. Car le rapport vignettes / img n’est pas très important.Lisangadeveloppement.
Voir en ligne : site web
Les forums sont fermés.
-
-
Info css 7 septembre 2008 22:51
OK et merci d’y répondre car ce plugin est vraiment excellent.
Mais que je comprenne bien... L’appel de la largeur ce fait par le width, d’accord mais dans quel répertoire et fichier. J’ai bien trouvé que la couleur de la font de la légende des vignettes est dans le css imageflow/screen.
Mais pour gérer la taille des vignettes indépendamment de la taille des images, mais aussi la largeur totale du portfolio, là je patine. Vous pourrez constater sur mon site que le portfolio est trop large. Le rapport Image / vignette n’est pas très significatif.Donc si vous pouvez me passer l’info ?
Merci d’avance.
Lisangadeveloppement
Les forums sont fermés.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Portfolio ImageFlow pour SPIP 19 septembre 2008 18:49, par corinneExcellent !
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
(posté aussi dans spip-contrib)Les forums sont fermés.
-
-
Largeur et position 27 septembre 2008 20:41, par rcaron
Je n’arrive pas à régler l’affichage :
trop d’espace entre les vignettes
Le portfolio dépasse le bloc de mon article à droite
je voudrais réduire l’espace en haut du portfolioEt je ne sais pas, je ne trouve pas...
En tout cas, bravo !
Les forums sont fermés.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
RSS 2.0
