Plugin Modèles media

Pour les versions de SPIP antérieures à la version 3.3, les modèles <doc>, <img> et <emb> produisent chacun un résultat différent et ce résultat, pour les images, dépend du fait qu’elle soit dans le portfolio ou non.

Ce plugin propose une nouvelle série de modèles ayant un comportement unifié et indépendant du mode des images. Les modèles existants (doc, emb, img) ne sont pas modifiés afin d’assurer la rétrocompatibilité.

Installation

Les modèles <media> nécessitent que le plugin Médiathèque soit installé et activé.

Le plugin Insérer Modèles n’est pas obligatoire mais fortement recommandé afin de fournir une aide aux rédacteurs pour l’insertion des modèles <media>.

Avertissement

La version 3.3 de SPIP a résolu la grande partie des problèmes auquel ce modèle répondaient. Le plugin est toutefois compatible 3.3 pour les raisons suivantes :
-  permettre de ne pas avoir à migrer ses modèles ;
-  continuer à disposer de certaines options non encore présente dans les modèles de SPIP.

Syntaxe générale

Syntaxe des modèles <media>
Syntaxe des modèles <media>

Trois variantes principales

Les modèles <media> reposent sur trois variantes principales : icone, vignette et embed.

<media12|icone> affichera l’icône représentant le type de document.

<media12|vignette> affichera une vignette du document. Il s’agira dans l’ordre :

  1. de la vignette personnalisée associée au document si elle existe.
  2. d’une vignette générée automatiquement à partir du document. La vignette générée est indépendante de la configuration de SPIP (que l’on ait activé ou non les vignettes automatiques dans Configuration > Fonctions avancées). Enfin, la taille de la vignette n’est pas déterminée par le paramètre de SPIP concernant les vignettes automatiques mais par le paramètre |taille transmis au modèle (voir ci-après).
  3. de l’icône du type de fichier si aucune vignette personnalisée n’est disponible et si aucune fonction de génération automatique de vignette n’est disponible pour ce type de fichier.

<media12|embed> permet d’incruster le document, l’incrustation étant fonction du type du document.

Depuis la vesion 1.2.0, on peut utiliser <media12|insert>, équivalent à <media12|embed> [1].

Alignement

L’alignement se précise comme actuellement avec |left, |center et |right.

Exemple : <media12|icone|right>

Afficher une légende

En l’absence de paramètres spécifiques, aucune légende n’est affichée.

Pour afficher une légende simple (titre + descriptif), on ajoutera simplement |legende au modèle. Par exemple : <media12|vignette|legende>.

Si l’on souhaite une légende complète (titre + descriptif + crédits + type de document + poids en octets), on indiquera |legende=complete. Par exemple : <media12|vignette|legende=complete>.

Il est également possible d’indiquer plus précisément les éléments qui devront composer la légende. Au lieu du paramètre |legende, on aura alors recours aux paramètres |titre, |descriptif, |credits, |type et |poids. Par exemple, si on souhaite afficher uniquement le titre et les crédits on fera : <media12|icone|titre|credits>. Pour afficher seulement le type de document et son poids : <media12|icone|type|poids>.

Il est possible de personnaliser le titre, le descriptif et les crédits à afficher pour utiliser d’autres valeurs que celles associées au document (utile par exemple sur un site multilingue). On précisera alors simplement à ces trois paramètres les valeurs à prendre. Par exemple :

<media12|icone
    |titre=Un autre titre
    |descriptif=Un autre descriptif avec du {{gras}}, de l'{italique} et même une note[[de bas de page]].
    |credits=d'autres crédits>

On peut utilise les deux formes d’écritures. Pour afficher le titre du document, des crédits personnalisés et le poids du document : <media12|icone|titre|credits=autres crédits|poids>. Si on souhaite afficher la légende complète en personnalisant juste le titre : <media12|icone|legende=complete|titre=Mon autre titre>.

Ajouter un lien

Pour les variantes icone et vignette, un lien pointant sur le document sera ajouté par défaut. Pour la variante embed, en l’absence de paramètre lien, aucun lien ne sera ajouté au média.

Pour que le média pointe sur lui-même, on ajoutera simplement |lien. Il est possible de préciser un lien spécifique, par exemple <media12|icone|lien=http://www.monsite.net>. On peut utiliser les raccourcis SPIP pour les liens internes. Par exemple, pour pointer sur la rubrique 3 : <media12|icone|lien=rub3>.

Il est également possible d’utiliser la syntaxe suivante [<media12|icone>->rub3].

L’attribut title du lien est déterminé automatiquement par SPIP en fonction du lien. Cependant, il est possible de spécifier explicitement l’attribut title avec le paramètre |titre_lien. Par exemple : <media12|icone|lien=http://www.monsite.net|titre_lien=Un super site à visiter>.

Spécifier la taille

En l’absence de paramètres spécifiques, la taille du document sera utilisée (modifiable selon le type de fichier), notamment pour les vignettes.

Les modèles <media> proposent 4 tailles standards : icone, petit, moyen et grand. Ces quatre tailles peuvent être personnalisées dans la Configuration de SPIP, sous l’onglet Fonctions avancées.

On spécifiera la taille souhaitée en utilisant le paramètre |taille, par exemple : <media12|vignette|taille=petit>. Il est également possible de spécifier une taille précise en pixels de la manière suivante : <media12|vignette|taille=150>.

Les médias sont redimensionnés en respectant le ratio hauteur/largeur. Ainsi, |taille=150 redimensionnera le média de telle manière que son plus grand côté soit égal à 150 pixels.

Si on souhaite simplement spécifier une hauteur maximum de 150 pixels, on utilisera |hauteur=150. Pour une largeur maximum de 300 pixels, |largeur=300. On peut utiliser les deux paramètres en même temps : <media12|vignette|hauteur=150|largeur=300>.

Personnaliser le texte alternatif

Il est possible de personnaliser le texte alternatif ajouté aux images et autres médias avec le paramètre |alt. Par exemple : <media12|icone|alt=Texte alternatif sur l'icône>.

Cas du modèle appelé sans variante

Il peut arriver que le modèle soit appelé sans spécifier de variante (exemple : <media12>).

Le modèle n’est pas censé être appelé sans variante. Si cela arrive, la variante vignette sera utilisée. Mais cela n’est pas recommandé.

Aide à l’insertion des modèles

Afin de faciliter l’insertion des nouveaux modèles, ce plugin fournit un formulaire d’insertion utilisable avec le plugin Insérer Modèles. Si celui-ci est actif, alors une aide à l’insertion des modèles media sera disponible dans le porte-plume.

Plugins étendant les modèles media

Footnotes

updated on 18 February 2021

Discussion

49 discussions

  • 6

    Salut à tous,

    Pour ceux qui utilisent le plugin oembed et qui sont frustrés de ne pas voir s’intégrer des videos distantes de la Médiathèque, j’ai créé un petit modèle dans squelettes/modeles/media_text_html.html avec ça :

    <BOUCLE_doc (DOCUMENTS) {id_document=#ENV{id}} {tout}>
     [(#PLUGIN{oembed}|?{
       #INCLURE{fond=modeles/text_oembed, id=#ID_DOCUMENT, env, connect}
       ,
       Plugin oembed manquant pour <a href="#URL_DOCUMENT">#TITRE</a>
     })]
    </BOUCLE_doc>

    Ca évite d’avoir ce genre de résultat avec l’appel du modèle média : <media1|insert> ou <media1|emb> ou <media1|embed> (spip 3.2)

    <pre><iframe…></pre>

    Voilà c’est sûrement pas top mais ca a le mérite de rien casser ;)

    • L’idée est bonne mais il serait peut-être plus pertinent d’ajouter ce modèle media dans le plugin oembed plutôt que dans le plugin medias. Ainsi, il ne serait activé qu’en cas de présence de oembed.

      C’est ce que fait par exemple le plugin Google Viewer qui embarque ces propres modèles media.

    • Tu peux aussi t’inspirer du code de https://zone.spip.org/trac/spip-zone/browser/_plugins_/google-viewer/modeles/media_google.html?rev=109504
      pour adapter le modèle text_oembed.html afin de prendre en compte l’affichage de la légende (ou non), les paramètres de larguer/hauteur etc.

    • Merci pour ces précisions, je ne suis pas sûr de réussir à faire aussi bien (légendes par exemple) :) Je me défausse «lâchement» sur oembed ;)

      Cela étant je garde ça hors plugin, et si je vois que je dois aller plus loin je me pencherai sur cette question…

    • Bonjour Joseph
      le modèle
      <media219|insert|left>
      n’affiche pas le média
      dans la page
      http://amidesk.com/pdea/spip.php?article97

      Une idée ? Merci !
      Spip 321

    • Euh c’est gentil de donner la page, mais c’est censé s’afficher où dans cette page ?

      Pour essayer de débugger un peu, tu peux essayer ?var_mode=inclure pour voir qu’est-ce qui est appelé

      Par ailleurs, c’est quoi comme objet le document 219 ?

    • le modèle est inséré en début du champ texte, juste avant le mot synopsis.
      C’est une image.

    Reply to this message

  • 1

    Bonsoir,

    Alors d’abord merci pour cet excellent plugin. J’ai un petit bug néanmoins sur SPIP 3.2.0 : si j’appelle <media41|vignette|left|lien=doc43> tout marche impeccable, mais si j’y ajoute le filtre taille, hauteur ou largeur, le chemin d’accès à l’image change et je me retrouve avec un appel du type : /home/repertoire/public_html/dev/IMG/jpg/image.jpg?1516377161 au lieu de /dev/IMG/jpg/image.jpg?1516377161

    Je développe dans le sous-répertoire dev, mais le rewrite base est configuré et le site marche nickel. Suggestion bienvenue...

    Merci ! Luc

    • Rebonjour, petit up et solution temporaire. N’ayant pas la compétence de tout éplucher, j’ai commenté 2 lignes de la fonction calculer_balise_MEDIA_IMAGE_RETAILLEE(), ce qui règle le pb :

      if(!preg_match(’`^https?://`i’,$src,$matches))
      $src = realpath($src);

      Mais à l’occasion, j’aimerais bien avoir le fin mot de l’histoire.

      Encore merci pour tout ce boulot,
      Luc

    Reply to this message

  • Cela ne vaudra-t-il pas la peine d’ajouter une option pour passer une classe clear?

    Reply to this message

  • 2

    Je suis toujours coincé...

    J’insère les docs avec mais lorsque je clique sur une image, mediabox ne l’ouvre pas.

    Fais des essais avec les Images en portfolio ou en dehors avec le même résultat, la boîte multimédia ne s’ouvre pas.

    Dans ma configuration “Boîte multimédia” j’ai : #documents_portfolio a[type=’image/jpeg’],#documents_portfolio a[type=’image/png’],#documents_portfolio a[type=’image/gif’]

    Faut-il rajouter quelque chose ?

    Merci

    Robert

    Reply to this message

  • 9

    Bonjour,

    Je viens de faire la mise à jour de 3.1.3 vers 3.1.6 et au passage j’ai supprimé puis réinstaller tous mes plugins dont le plugin Modèles Media. Depuis les liens ne marche plus !

    Dans le champ “texte” d’un de mes articles j’avais ça :
    <a href="spip.php?page=article&id_article=7"><media886|vignette|largeur=158></a> qui pointait naturellement vers l’article 7.

    Depuis, quelle que soit la syntaxe que j’utilise :

    • en utilisant |lien=art7 dans le modèle
    • en utilisant le formulaire d’insertion d’un modèle

    Le seul lien qui existe sur mon image est un lien vers l’image elle même, impossible de faire pointer le lien ailleurs !

    Qu’ai-je oublié ?

    • Edit :
      Dans le champ « texte » d’un de mes articles j’avais ça :
      [<media886|vignette|largeur=158>->7] Qui pointait naturellement vers l’article 7

      Depuis, quelque soit la syntaxe :
      [<media886|vignette|largeur=158>->7]
      OU <media886|vignette|lien=art7|largeur=158> le lien pointe systématiquement vers le media 886 et non plus vers l’article 7 !

    • Je viens de faire le test avec la dernière version du plugin sous SPIP 3.0 et je n’ai pas le problème rencontré. Le lien est correct. Mais je n’ai pas d’espace de test sous SPIP 3.1 sous la main.

      Quelle est votre version de SPIP ? Quels sont les autres plugins actifs ?

    • Bonjour et merci de votre réponse.

      Ma version de SPIP : SPIP 3.1.6 [23598]

      Le bug est consultable ici par exemple : http://www.cemearhonealpes.org/vaca... (J’ai provisoirement ajouté des tableaux pour pouvoir ajouter mes liens...

      La liste des plugins actifs sur le site :

      • Agenda 3.18.4 - stable
        Agenda Evénementiel
      • API de vérification 1.6.13 - stable
        Une API générique pour vérifier une valeur
      • Article PDF 0.4.16 - stable
        Convertir l’article affiché au format pdf
      • Articles d’accueil 1.1.4 - stable
        Attribuer un article d’accueil aux rubriques
      • Champs Extras 3.11.4 - stable
        API de gestion de nouveaux champs dans les objets éditoriaux.
      • Champs Extras (Interface) 3.5.2 - stable
        Offre une interface graphique pour gérer des champs extras
      • Couleur de rubrique 2.3.6 - stable
        Une couleur pour chaque rubrique
      • Facebook Models 0.21.2 - stable
        Modèles pour inclure les modules sociaux Facebook
      • Facteur 3.4.11 - stable
        Il distribue vos courriels
      • Flux RSS configurable 2.0.2 - stable
        Personnaliser le flux RSS des articles du site
      • Formidable 3.5.3 - stable
        Générateur de formulaires
      • Galleria plugin pour SPIP 1.3.5 - stable
      • Google +1 0.4.2 - stable
        Ajoute un bouton Google +1
      • Insérer Modèles 1.3.1 - stable
        Une aide à l’insertion des modèles dans vos textes
      • Le Couteau Suisse 1.9.12 - stable
        Plein de petites fonctionnalités nouvelles et utiles à votre site (...)
      • Menus 1.6.9 - stable
        Créez vos menus personnalisés.
      • Mini Calendrier 2.4.1 - stable
        Permet l’utilisation d’une balise #CALENDRIER_MINI
      • Modèles media 1.4.2 - stable
        Modèles alternatifs pour l’insertion des documents
      • Pages 1.3.7 - stable
        Des pages sans rubrique
      • pdf.js 0.6.3 - stable
      • Saisies pour formulaires 2.18.22 - stable
        Écrire facilement des champs de formulaires.
      • Social tags 1.1.0 - stable
        Activer des boutons de partage de liens sur les réseaux sociaux.
      • SPIP Bonux 3.4.6 - stable
        Le plugin qui lave plus SPIP que SPIP.
      • SPIP reset 3.0.1 - stable
        Evitez les diffusions involontaires !
      • Squelette par mot clef 3.1.1 - stable
        Permet de choisir le squelette en fonction d’un mot clef
      • Vidéo(s) 0.12.8 - dev
        Interface de gestion et modèles d’insertion de vidéos
      • YAML 1.5.3 - stable
        Un format de fichier simple pour éditer des listes de données

      Merci de votre aide ;)

    • Bonjour,

      Passez en dernière version et dites moi ce que cela donne.

      merci

    • Bonjour Pierre,

      Quelle dernière version ?
      Sauf erreur de ma part, ma version de SPIP est déjà la dernière.

      Seul plugin qui n’était pas à jour dans la liste ci-dessus : Couteau Suisse, dont la mise à jour est sortie dans le we et que j’ai mis à jour ce matin. Le problème reste le même.

      Merci

    • Pierre a mis à jour le plugin modeles media. version 1.4.3 du plugin
      .

    • Elle devrait être proposé dans les heures à venir en effet.

    • Pour info, je viens de faire l’essai sur une mutu SPIP 3.1.6 + modèles medias 1.4.2 et tout est OK chez moi. Je n’observe pas le comportement défaillant décrit par Jérémy

    • Etrange...

      Je ne sais pas ce qu’à corrigé Pierre, mais ça a été efficace dans mon cas en tout cas.

    Reply to this message

  • 4

    Attention, suite à la mise à jour de cette nuit, site bloqué : Parse error: syntax error, unexpected ’if’ (T_IF) in /home/laccrete/www/plugins/auto/media/v1.4.0/media_fonctions.php on line 183

    • Désolé je suis allé trop vite. Je viens de procéder à un retour en arrière.

    • Attention, la seule version dispo en téléchargement auto est la version1.4.0

    • Il faut être un peu patient, le temps que le zip de la nouvelle version soit généré

    • OK et en plus la variable de pourcentage « % » fonctionne!
      FANTASCHTICK ou plus simplement super!
      Merci.
      Michel
      http://laccreteil.fr

    Reply to this message

  • 7

    Bonjour Joseph,
    Dans les variables, serait-il possible d’avoir une variable de pourcentage “%” car cela permet une adaptation à la taille de la fenêtre du navigateur utilisé?
    Pour exemple, la carte et le lecteur PDF sur cette page : http://laccreteil.fr/spip.php?article242
    Il serait ainsi possible d’avoir cinq images en “left” à 20% qui ferait une serie de photos sur 100%...
    Merci pour tout le travail!
    Michel

    • Je ne comprends pas très bien.

      Il est déjà possible de faire <media123|embed|largeur=20%>

    • Ne fonctionne pas, que ce soit avec “embed” ou “insert”... sur le site http://laccreteil.fr

    • REMI CLAVIER

      Ne fonctionne pas chez moi non plus

    • Ne fonctionne toujours pas, que ce soit avec « embed » ou « insert »... sur le site http://laccreteil.fr
      Pourtant j’ai effectué un copié collé de <media123|embed|largeur=20%> en changeant uniquement le numéro de l’image.

    • Peux-tu essayer la version 1.4.0 ?

    • Désolé pour le bug introduit hier. Peux tu faire un essai avec la version 1.4.2 ?

    • Seule la 1.4.0 est dispo en téléchargement auto

    Reply to this message

  • REMI CLAVIER

    «Bonjour» et merci pour ce super plugin qui me simplifie la vie.

    Comment faire pour donner au <mediaxxx|embed|....
    les paramètres du lecteur de média au chhargement de la page si le fichier est de type mp3 ou mp4?
    Par exemple

    <... |autostart=non>

    Le lecteur est bien chargé, mais la lecture démarre automatiquement au chargement de la page ce qui l’est pas désiré, surtout si il y a d’autre lecteurs dans la page.

    D’autre part

    ...|hauteur=xxx|largeur=yyy

    ne semble pas influer sur la taille du lecteur mp3
    Merci beaucoup

    Rémi

    Reply to this message

  • Bonjour,

    Je trouve le modèle média plus simple et intuitif que les modèles par défaut.

    J’espère qu’un jour ça sera inclus dans le core :)

    Raphaël

    Reply to this message

  • 2
    Christophe Noisette

    Bonjour
    merci pour ce plugin.
    J’aimerais savoir s’il est possible d’avoir l’effet “agrandissement sur clic” avec le modèle MEDIA comme nous l’avons avec les modèles DOC ou IMG si nous déposons l’image dans le porte-folio.
    Actuellement je n’ai pas trouvé la solution pour afficher une image en utilisant modèle MEDIA et en réduisant sa taille à 400 px et l’agrandir à sa taille réelle si on clique dessus.
    J’ai donc pour le moment mis les deux : cf. http://www.infogm.org/article6078
    En vous remerciant
    Cordialement
    Christophe Noisette

    • Normalement, il suffit d’un lien sur l’image vers elle même, ce qui s’obtient en ajoutant |lien à l’appel du modèle.

    • Christophe Noisette

      Merci. Ca marche parfaitement bien ainsi. Bonne journée.

    Reply to this message

Ajouter un commentaire

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom