Accueil du site > Affichage multimédia > Images > Images réactives > Légendes > Légendes

Légendes

20 août 2010 – par b_b – 35

13 votes

Un plugin pour ajouter des légendes à ses images comme sur Flickr.

Inspiré de Fotonotes et basé sur le script jQuery Image Annotation.

Accéder à la page de démonstration sur Géodiversité.NET.

Démonstration

Voir la vidéo originale sur Vidéos SPIP.

Fonctionnalités

Que peut-on faire avec ce plugin ?

ajouter, modifier et supprimer des légendes sur des images
utiliser les raccourcis typographiques de SPIP et du html dans les légendes
tourner une image avec ses légendes (en utilisant la fonctionnalité de rotation de SPIP)
afficher l’image et ses légendes dans n’importe quelle taille (les proportions sont conservées)
gérer des droits d’édition des légendes

Installation et pré-requis

Installation et activation comme tous les plugins.

Ce plugin nécessite les plugins :

Utilisation du modèle

Dans les squelettes :

[(#INCLURE{fond=modeles/image_legendes,
id_document=XX,
largeur=XX,
hauteur=XX,
class=XX,
editable=XX,
bouton_ajouter=XX})]

Télécharger

Dans le texte des éléments de SPIP :

<image_legendes|id_document=356|largeur=500>

Paramètres du modèle :

id_document : numéro de l’image à afficher
largeur : largeur de l’image (largeur max de l’image si pas de hauteur spécifiée)
hauteur : hauteur de l’image (hauteur max de l’image si pas de largeur spécifiée)
class : classe CSS à ajouter au conteneur du modèle
editable : si oui les notes de l’image sont éditables (sous réserve des autorisations nécessaires), si non les notes ne sont pas éditables, si vide les notes sont éditables sous réserve d’autorisation
bouton_ajouter : sélecteur CSS pour cibler un bouton de création de note personnalisée

Configuration des autorisations

Les autorisations des légendes dépendent des autorisations des documents.

En tant qu’auteur vous pouvez :

ajouter des légendes aux documents sur lesquels vous avez des droits
modifier les légendes dont vous êtes l’auteur

En tant qu’administrateur vous pouvez :

ajouter, modifier et supprimer les légendes de tout le monde sur tous les documents

Il est possible de personnaliser ces autorisations depuis la page de configuration du plugin. Notez que la personnalisation des autorisations ne permet pas à un auteur de modifier d’autres légendes que celles dont il est l’auteur s’il n’est pas administrateur.


Configuration du plugin Légendes

Les bidouilleurs peuvent outrepasser ces limites en surchargeant les fonctions d’autorisation du plugin dans le fichier config/mes_options.php de leur site.

Vos commentaires

# Le 15 janvier à 11:45, par Stéphane En réponse à : Légendes

Bonjour,
J’ai activé le plugin légende puis je l’ai configuré par cfg. Dans ma page article je note : image_legendes|id_document=356|largeur=50 entre <>
Mais après comment mettre des légendes dans ma photo ?
Merci.
- # ^ Le 15 janvier à 18:35, par b_b En réponse à : Légendes
  
  Salut, le modèle ajoute automatiquement un bouton d’ajout de note sous l’image affichée. Peut être est-il masqué sur ton site à cause d’un css perso ou tout simplement car tu n’as pas configuré les autorisations du plugin pour l’ajout des légendes aux images ?
Répondre à ce message
# Le 28 juillet 2011 à 13:26, par tÖf En réponse à : Légendes

Bonjour,

Le plugin fonctionne c’est cool.

Quel est le(s) fichier(s) permettant de personnaliser les légendes (supprimer l’affichage de l’auteur), et les bordures dans l’image légendée...

Merci
- # ^ Le 28 juillet 2011 à 13:29, par b_b En réponse à : Légendes
  
  Salut,
  
  Quel est le(s) fichier(s) permettant de personnaliser les légendes
  
  La réponse à ta question se trouve quelques pixels plus bas dans cette page :
  
  http://www.spip-contrib.net/Legendes#forum446440
  
  ++
- # ^ Le 28 juillet 2011 à 14:01, par tÖf En réponse à : Légendes
  
  Ok merci bien.
  
  ++
Répondre à ce message
# Le 3 juillet 2011 à 12:14, par ? En réponse à : Légendes

Est-il possible de déclarer dans le pipeline declarer_tables_objets_sql le modèle image-legendes ? Afin d’éviter les doublons entre des modèles passés dans #TEXTE et <BOUCLE(documents)...

http://zone.spip.org/trac/spip-zone/changeset/48146
- # ^ Le 3 juillet 2011 à 13:01, par b_b En réponse à : Légendes
  
  Salut, oui ça me semble être une bonne idée. Dans ce cas, il faudrait créer une branche du pluin pour SPIP 3. Je m’en occupe dès que j’ai un moment pour ça.
  
  ++
Répondre à ce message
# Le 27 juin 2011 à 11:28, par Artlogic En réponse à : Légendes

Salut,

Comment legendes se comporte-t-il sur les différents androïd et autres smart-phone ? Et du coté de l’impression ? Est-ce qu’on peut ajouter une media print ?

Stéphan cross-médiatiseur pour ce coup. :)
- # ^ Le 30 juin 2011 à 10:46, par Artlogic En réponse à : Légendes
  
  Hello b_b
  
  L’ajout de la balise <image_legendes|id_document=XXX|class=gauche> dans l’article a fait frémir mes administrateurs. Je cite : « Faudra taper tout ça pour chaque image ? » J’ai pas osé leur dire que l’on pouvait aussi ajouter une image ou une vidéo dans les légendes. ^^
  
  Je vais regarder du coté du plugin modèle (si celui-ci veut bien fonctionner) pour voir si je peux améliorer la chose. Peut-être une barre typo dans les légendes aussi... Quoi qu’il en soit, on va revisiter toutes les Légendes des Savoies. Oyé Oyé ! L’histoire dira que le plugin légendes mettra les légendes de la Yaute sans dessus dessous. ^^
  
  ++ et encore merci pour ce plugin.
  
  PS : Et si j’ai un problème avec les historiens du coin, je dirais que c’est de ta faute. :P ;)
Répondre à ce message
# Le 13 juin 2011 à 15:47, par Artlogic En réponse à : Légendes

Yo BB

J’ai essayé d’ajouter le plugin sur http://www.art-logic.info. Toutefois il me plante un de mes script jquery. Alors que sans le plugin, je n’ai pas de soucis, si je demande une compression javascript à SPIP cela devient pire. Tout les scripts plantent. Quelle est la solution pour ajouter cette compression ? Une version particulière de JQUERY UI ?
- # ^ Le 13 juin 2011 à 15:55, par b_b En réponse à : Légendes
  
  Salut Stéphan, sans plus d’infos sur l’erreur js provoquée ou sans un lien vers une page où le bug est observable, je vais pas pouvoir t’aider à résoudre ton problème...
  
  C’est peut être un bug de compat d’un de tes scripts avec jquery-ui, est-ce que le bug est présent si tu actives seulement jqueryui sans le plugin légendes ?
  
  Pour la compression il n’y a aucun problème avec ce plugin, qui tourne parfaitement sur geodiversite.net ou la compression est active.
  
  ++
- # ^ Le 13 juin 2011 à 16:39, par Artlogic En réponse à : Légendes
  
  Au dernier test effectué (en local) plus de soucis avec le script jquery dont je viens de parler et que je croyais planté.
  
  - Avec UI activé seul, je n’ai pas de souci. Si j’active la compression pas de souci non plus. Pas de bug renvoyé par la console.
  
  - Quand j’ajoute légende, tout va bien. Installation du plugin Légendes OK ; Les légendes fonctionnent sur les images ; Le modèle se comporte bien. Dès que j’active la compression avec legende j’obtiens deux bug dans la console :
  
  ({itere:(function () {this.cptj = Math.round(Math.random() * this.max) % this.max;if (this.cptj == this.last) {this.cptj = (this.last + this.cols) % this.max;}this.last = this.cptj;$("#statusMsg").html("it" + this.cptj + "=?" + this.max);}), init:(function () {$(this.elt).find("img").css({display: "block", width: this.cote / 2 + "px", height: this.cote / 2 + "px", height: this.cote / 2 + "px", border: 0});$(this.c).css({width: this.cote + "px", height: this.cote + "px"});this.start();}), start:(function () {setTimeout(getObjectMethodClosure(this, "doyourstuff"), Math.random() * 2 * 1000);}), postpone:(function () {$(this.c).css("background-color", "transparent");this.itere();$(this.c).empty();this.start();}), doyourstuff:(function () {var or = $(this.elt).find("img").get(this.cptj);var image = or.cloneNode(true);image.style.width = "100%";image.style.height = "100%";var href = or.parentNode.href;$(image).css("cursor", "pointer").click(function () {if (typeof imageArray != "undefined" && href.match(/\.(jpeg|jpg|png|gif)$/i)) {TB_show("", href, "image");} else {window.document.location = href;}});$(this.c).append(image);$(this.c).css({width: this.cote + "px", height: this.cote + "px"});var colonne = this.cptj % this.cols;this.left = colonne * this.cote / 2;l = colonne - colonne % 2;if (colonne == this.cols - 1 && this.cols % 2 > 0) {l = l - 1;}l = l * this.cote / 2;$(this.c).css("left", l + "px");var ligne = (this.cptj - this.cptj % this.cols) / this.cols;this.top = ligne * this.cote / 2;t = ligne - ligne % 2;if (ligne == this.rows - 1 && this.rows % 2 > 0) {t = t - 1;}t = t * this.cote / 2;$(this.c).css("top", t + "px");var back = $(this.elt.parentNode).css("background-color");$(this.c).fadeIn(2000);setTimeout(getObjectMethodClosure(this, "resize"), 4000);setTimeout(getObjectMethodClosure(this, "postpone"), 7000);}), resize:(function () {var t = new Number(this.top);var l = new Number(this.left);jQuery(this.c).animate({top: t, left: l, width: this.cote / 2, height: this.cote / 2}, 1500);})}) is not a function /* plugins/auto/legendes/javascript/jquery.annotate.js */ 7349
  
  Puis :
  
  this.init is not a function this.init() 7350(function($){
- # ^ Le 13 juin 2011 à 16:45, par b_b En réponse à : Légendes
  
  Hmmm TB_show( c’est du Thickbox ça. Toujours le même bug en désactivant ce plugin ?
- # ^ Le 13 juin 2011 à 16:56, par Artlogic En réponse à : Légendes
  
  J’ai pas thickbox. J’ai cherché à désactiver la médiabox ce qui n’a pas réglé le problème. Toutefois en désactivant la splickerbox ça a solutionné la chose : plus rien dans la console.
  Incompatibilité entre les deux plugin ?
- # ^ Le 13 juin 2011 à 16:58, par b_b En réponse à : Légendes
  
  Aucune idée pour l’incompatibilité avec splickrbox que je n’utilise pas. Et comme je te disais sans lien vers un site où le bug est visible je ne pourrais pas t’aider beaucoup plus ;)
- # ^ Le 13 juin 2011 à 17:03, par Artlogic En réponse à : Légendes
  
  moué je sais bien. Mais il est en production. Je passerai sur l’IRC ce soir quand ce sera un poil plus calme. :)
- # ^ Le 15 juin 2011 à 14:08, par Artlogic En réponse à : Légendes
  
  Après recherche, il sagit bien du plugin splickerbox qui mettait le dawa. Ca tombe bien je voulais le virer. Donc TOUT FONCTIONNE IMPEC. :)
Répondre à ce message
# Le 6 juin 2011 à 14:06, par François Daniel Giezendanner En réponse à : Légendes
Bonjour,

Bravo, excellent plugin pour lequel j’entrevois plusieurs applications pédagogiques.

Deux questions :

Dans l’exemple http://beta.geodiversite.net/media1 apparaissent 3 boutons :

Zoom
Télécharger le média
Ajouter une note

Or dans mon essai http://www.sem-experimentation.ch/~fdg/spip-test/spip.php?article1183 seul le bouton :

Ajouter une note

est affiché. Comment faire afficher les 2 autres boutons.

D’autre part, le nom de l’auteur des notes apparaît, pourrait-on l’avoir en option (oui, non) ?

Cordialement

FDG
- # ^ Le 6 juin 2011 à 14:12, par b_b En réponse à : Légendes
  
  Salut, oui les trois boutons en question ne sont pas intégrés au plugin mais au squelette de geodiversite.net. C’est assez simple à reproduire dans ses squelettes : le zoom est un lien qui déclenche le lancement d’une fancybox et le lien télécharger est tout simplement un lien vers le document.
  
  Le contenu des notes est généré par des squelettes personnalisables, on peut donc y afficher ce que l’on souhaite en surchargeant le fichier suivant pour la partie auteur :
  
  http://zone.spip.org/trac/spip-zone/browser/_plugins_/legendes/modeles/legende_auteur.html
  
  ++
Répondre à ce message
# Le 10 septembre 2010 à 12:41, par Pi r En réponse à : Légendes

je ne parviens pas à ouvrir les droits pour les visiteurs
- # ^ Le 10 septembre 2010 à 13:52, par b_b En réponse à : Légendes
  
  J’espère que tu ne te méprends pas sur la notion de visiteur. On parle bien de visiteur au sens de SPIP, donc une personne qui a un compte sur le site. Le plugin n’ouvre pas les droits d’édition aux personnes non enregistrées pour éviter toute pollution « spammesque ».
  
  Je viens de mettre à jour la doc sur ce point. Si tu souhaites modifier les autorisations tu peux les surcharger dans ton fichier config/mes_options.php.
  
  ++
- # ^ Le 14 septembre 2010 à 08:33, par Pi r En réponse à : Légendes
  
  anéfé je m’est mépris, je vais voir du côté de mes options merci pour les précision
Répondre à ce message
# Le 7 septembre 2010 à 18:44, par Pi r En réponse à : Légendes

hello b_b super nouveauté ! mais les notes ne s’affichent pas sur les images alors que tout le reste semble ok, on peut remplir les notes et elles sont bien enregistrées.. Je suis en 2.1.2. Nécéssite php5 ?
- # ^ Le 7 septembre 2010 à 19:07, par b_b En réponse à : Légendes
  
  Salut,
  
  Nécéssite php5 ?
  
  Hmm peut être, je n’ai pas de php4 sous la main pour tester. Essaye de passer le site sur un serveur en php5 pour voir. Et si tu avais un lien vers le site en question à nous filer bla bla bla... ;)
  
  ++
- # ^ Le 7 septembre 2010 à 19:17, par Pi r En réponse à : Légendes
  
  je n’ai pas de php5 sous la main pour l’instant... je fais rien en local en plus...
  http://www.dionysos.org/Sans-titre,1928
  merci
- # ^ Le 7 septembre 2010 à 19:46, par b_b En réponse à : Légendes
  
  Je ne vois pas d’erreur js dans la page et les données sont bien passées au scripts en XHR. Essaye de faire une page de test basée sur un squelette de la dist et colle le code du modèle pour aficher l’image à légender dedans. Cela nous permettra au moins de voir si ça fonctionne « hors contexte »...
  
  ++
- # ^ Le 7 septembre 2010 à 20:42, par Pi r En réponse à : Légendes
  
  yop ça doit être php5 testé sur même serveur spip tout neuf->idem
  http://spip.dionysos.org/spip.php?article23
  remarque : j’ai du mettre affiche_un_ou_plusieurs dans mes_fonctions car elle n’était pas définie, c’est dans un plug ?
  bonne soirée :-)
- # ^ Le 8 septembre 2010 à 09:34, par Pi r En réponse à : Légendes
  
  je suis marabouté, install sut serveur php5—>même chose que sur le spip neuf php4 : les notes ne semblent pas s’incrémenter
  4 plug : cfg jqueryui saisies bonux
  http://dionysos.toile-libre.org/spip.php?article1
- # ^ Le 8 septembre 2010 à 23:19, par Pi r En réponse à : Légendes
  
  bon ça tourne sur le spip neuf en php4 ;-) jqueryui était mal installé je vais voir du côté des plugins
- # ^ Le 10 septembre 2010 à 08:47, par Pi r En réponse à : Légendes
  
  trouvé : define(’_SPIP_SCRIPT’, ’xx.php’) ; de mes options qui bloquait, 5u
- # ^ Le 12 septembre 2010 à 23:21, par ? En réponse à : Légendes
  
  personne a des soucis avec la cohabitation crayons ?
  j’ai les plugs minimum cfg jqueryui saisie bonux sur 2.1.2 et dès que j’active crayons les notes ne s’affichent plus. Tout up ;-(
Répondre à ce message
# Le 31 août 2010 à 08:50, par Jean-Jacques En réponse à : Légendes

Bonjour,

Bravo pour ce plugin bien pratique !
Je voudrais savoir comment supprimer le lien sur l’auteur qui apparait dans la note.

Merci !
- # ^ Le 31 août 2010 à 10:28, par b_b En réponse à : Légendes
  
  Salut, pour modifier ou supprimer le lien de l’auteur de la légende cela se passe dans le fichier mdoeles/legende_auteur.html :
  
  http://zone.spip.org/trac/spip-zone/browser/_plugins_/legendes/modeles/legende_auteur.html
  
  Si tu ne veux pas de lien, tu vide ce fichier et hop ;)
- # ^ Le 31 août 2010 à 13:57, par Jean-Jacques En réponse à : Légendes
  
  Merci pour la réponse !
  C’est bien ce que je pensais.
  Cela fonctionne.
Répondre à ce message
# Le 21 août 2010 à 01:07, par StrangeBlackHole En réponse à : Légendes

Bravo superbe !

Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

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

Texte de votre message

Ajouter un document

gif, jpg, png

SPIP-Contrib

Légendes

Démonstration

Fonctionnalités

Installation et pré-requis

Utilisation du modèle

Configuration des autorisations

Rubriques

Derniers commentaires

Compatibilité

Téléchargement(s)

Sur le Web

Vos commentaires

Répondre à cet article

Ça discute par ici

Navigation AJAX

Squelettes « Chez nous »

Formidable, le générateur de formulaires

Transaction : créer des formulaires avec paiement en ligne

Plugin SPIP-Géoportail

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN