Légendes

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})]

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.

Discussion

14 discussions

  • 6
    liberte

    Bonjour,

    Est-ce que Légendes est compatible avec Spip 3.2 ?

    • Salut, j’ai de gros doutes sur ce point vu les changements de version de jQuery et jQuery UI dans le core. Je n’ai pas encore pris le temps de tester, mais n’hésite pas à le faire en modifiant le paquet.xml du plugin pour voir...

    • liberte

      Bonjour,

      Merci pour ton aide ici (et mise a jour ailleurs)

      Je suis passe en Spip 3.2.1. Et la gestion des plugins ne permet pas de rechercher les plugins incompatibles avec la version de Spip installe. C’est bien d’un cote mais ca a supprime des plugins inactifs pour le moment et que je souhaitais installer le moment venu.

      Dommage !

    • Pour votre info un autre plugin plus récent permet d’afficher automatiquement les légendes et tous les autres crédits éventuels, avec mise à l’échelle automatique et centrage par rapport à l’image : media_responsive (qui va de pair avec image_responsive ). En bonus des fonctionnalités amusantes (telles que le zoom automatique, l’animation 360°), très simples d’utilisation et robustes !

    • Bonjour,

      Merci pour l’info.

      media_responsive et Légendes font-ils doublon ?

    • Je répondais sur la question de la compatibilité qui semblait poser problème pour Légendes. media_responsive et image_responsive sont compatibles SPIP 3.2*. Je ne dispose pas de Légendes mais media_responsive assure la prise en charge des légendes donc sur ce point précis, les deux plugins font double emploi. Par contre media_responsive possède d’autres fonctionnalités supplémentaires que les légendes concernant la gestion des images. A voir donc en fonction de vos besoins.

    • Salut, de ce que j’ai pu en lire dans la doc de media_responsive celui-ci ne propose pas la fonctionnalité apportée par Légendes, pas de doublon en vue donc.

    Répondre à ce message

  • 7

    Bonjour,

    Je dois être très nul, mais je ne comprends pas comment utiliser ce plugin.
    Je l’ai téléchargé, installé et activé... mais il ne se passe rien sur une image téléchargée dans un article.
    Faut-il ajouter ce code dans le squelette article ? :

    [(#INCLUREfond=modeles/image_legendes,
    id_document=XX,
    largeur=XX,
    hauteur=XX,
    class=XX,
    editable=XX,
    bouton_ajouter=XX
    )]

    Merci de m’expliquer comment mettre en place ce plugin.

    Bien cordialement,

    Thierry

    • Salut, tout est expliqué dans la partie « Utilisation du modèle » de l’article ci-dessus...

    • Euh ! Merci j’avais déjà lu, mais cela ne me dis ce que je dois faire de ce bout de code :

      [(#INCLUREfond=modeles/image_legendes,
      id_document=XX,
      largeur=XX,
      hauteur=XX,
      class=XX,
      editable=XX,
      bouton_ajouter=XX)]

      Visiblement il faut être initié ou deviner par soi-même ce qu’il faut faire !

    • Visiblement il faut être initié ou deviner par soi-même ce qu’il faut faire !

      Tranquille...

      Alors, essaye par exemple de coller ceci dans un article :

      <image_legendes|id_document=XXX|largeur=500>

      En prenant bien soin de remplacer XXX par le n° d’un document d’une de tes images.

      Cordialement aussi :)

    • Merci,

      Ok, c’est fait, je viens de coller dans un article :

      <image_legendes|id_document=8973|largeur=500>

      qui correspond à la photo 8973

      La photo s’affiche mais rien de plus.

      Je ne vois pas comment éditer une note !

    • ok, je viens de comprendre qu’il faut que l’article soit déjà en ligne pour pouvoir ajouter une note.
      Autrement dit on ne peut pas ajouter une note depuis l’espace privé lorsque l’article est encore en cours de rédaction.
      C’est dommage !
      Est-ce bien exact ?

      Merci

    • Bon, je viens de voir qu’en mode prévisualisation on peut aussi préparer les notes avant que l’article soit validé et mis en ligne. Voilà qui est bien pratique !

      Par contre, je n’arrive pas à centrer mon image dans la page.
      Le code suivant ne la centre pas :

      <image_legendes|id_document=356|center>

      Pourquoi ?

      Merci,

      Salutations,

    • Je n’ai trouvé que la solution du code html center pour centrer une image.

      y en a-t-il une autre ?

      Par ailleurs, faut-il pour chaque image se souvenir de cette ligne de code à insérer :
      <image_legendes|id_document=XXX>

      où y a-t-il un moyen que cette ligne s’affiche comme modèle quelque part dans l’espace privé comme c’est le cas pour le code d’insertion des images ?

      Merci,

    Répondre à ce message

  • 1

    Super plugin !

    La seul chose regrettable c’est qu’il n’est pas évident à trouver.
    Je savais qu’il existait mais je ne connaissais pas son nom. Avec les mot clefs « tag, photo tags, etc » dans le moteur de recherche de spip sa ne remonte pas :(.

    C’est vraiment dommage !!

    • Merci pour le commentaire :)

      Concernant le « référencement » du plugin, cela sera certainement amélioré quand on pourra utiliser des tags dans les fichiers de description des plugins.

      ++

    Répondre à ce message

  • 3

    bonjour, le critère vu=non ne fonctionne pas avec le modèle image_legendes, est-ce contournable ?
    merci

    Répondre à ce message

  • 1
    Stéphane

    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.

    • 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

  • 2

    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

    Répondre à ce message

  • 1

    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

    • 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

  • 1

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

    • 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

  • 7

    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 ?

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

      ++

    • 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($){ 
    • Hmmm TB_show( c’est du Thickbox ça. Toujours le même bug en désactivant ce plugin ?

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

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

    • moué je sais bien. Mais il est en production. Je passerai sur l’IRC ce soir quand ce sera un poil plus calme. :)

    • 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

  • 1

    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 :

    1. Zoom
    2. Télécharger le média
    3. Ajouter une note

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

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

    • 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

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