SPIP-Contrib

SPIP-Contrib

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

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

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

Légendes

20 août 2010 – par b_b – 49 commentaires

16 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 :

  1. [(#INCLURE{fond=modeles/image_legendes,
  2. id_document=XX,
  3. largeur=XX,
  4. hauteur=XX,
  5. class=XX,
  6. editable=XX,
  7. bouton_ajouter=XX})]

Télécharger

Dans le texte des éléments de SPIP :

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

PNG - 5.8 ko
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.

Voir en ligne : http://plugins.spip.net/legendes

Dernière modification de cette page le 17 octobre 2013

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 9 septembre 2015 à 17:08, par Thierry En réponse à : Légendes

    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

    • Le 9 septembre 2015 à 17:11, par b_b En réponse à : Légendes

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

    • Le 9 septembre 2015 à 17:18, par Thierry En réponse à : Légendes

      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 !

    • Le 9 septembre 2015 à 17:22, par b_b En réponse à : Légendes

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

    • Le 9 septembre 2015 à 17:28, par Thierry En réponse à : Légendes

      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 !

    • Le 9 septembre 2015 à 17:44, par Thierry En réponse à : Légendes

      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

    • Le 9 septembre 2015 à 18:16, par Thierry En réponse à : Légendes

      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,

    • Le 9 septembre 2015 à 19:29, par Thierry En réponse à : Légendes

      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

  • Le 24 juin 2014 à 18:21, par Pierre En réponse à : Légendes

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

    • Le 24 juin 2014 à 19:47, par b_b En réponse à : Légendes

      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

  • Le 13 mai 2013 à 09:50, par Pi r En réponse à : Légendes

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

    Répondre à ce message

  • Le 15 janvier 2012 à 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 2012 à 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 :

    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

    • 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

Répondre à cet article

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