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>

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

Discussion

57 discussions

  • 1

    Bonjour,

    Je n’arrive pas à installer le plugin sur un SPIP 3.1.1. J’ai toujours l’erreur « Oups. Une erreur inattendue a empêché de soumettre le formulaire. Vous pouvez essayer à nouveau. » qui est une erreur ajax sur le formulaire.
    C’est le seul plugin que je n’arrive pas à activer.

    Les logs ne m’indique strictement rien… Quelqu’un a déjà rencontré le problème ?

    Ybbet

    • C’est bon, j’ai trouvé… Il manque les numéros de version des plugins en nécessite et utilise…
      Je corrige cela sur le SVN.

    Répondre à ce message

  • Bonjour,

    En passant en mode débug j’ai ceci
    Notice : Undefined index : hauteur in /modeles_media/media_fonctions.php on line 149

    Idem pour les 4 ligne qui suive.

    Quelle correction apporter ?

    Répondre à ce message

  • Salut

    j’ai un souci avec l’insertion des titres dans l’attribut alt des images
    quand le titre contient des enrichissements réalisés à l’aide de balise, ça nous fait un alt assez sale et ambigû

    d’où ma question pourquoi la variable $alternative n’est pas nettoyer avec le filtre attriibut_html dans la fonction calculer_balise_MEDIA_IMAGE_RETAILLEE, ligne 213, comme c’est le cas dans la fonction calculer_balise_MEDIA_LIEN ligne 259 ?

    Répondre à ce message

  • 3

    Bonjour

    Est ce logique que : <media1093|vignette|left|lien=art529> Rajoute un (fr) ?

    • Plus précisément, c’est un hreflang ajouté au lien et ce sont les CSS de l’espace privé qui affichent ce (fr).

      Cependant, on précise normalement le hreflang seulement si c’est différent de la langue du contexte.

      Normalement, c’est corrigé avec la version 1.2.17.

    • Je te tient informer une fois mis à jour.

      Je le voyais aussi dans le public d’où ma question.

    • Merci pour la correction, cela fonctionne.

    Répondre à ce message

  • 3

    Bonjour,
    Je viens de faire une migration SPIP 2.1.26 vers 3.0.17 et j’observe un certain nombre de petits trucs à droite à gauche qui ne fonctionnent plus correctement, ou disons, pas comme avant !

    Par exemple :
    [<media4004|embed|left>->media4007]
    ne fonctionne plus : le document 4004 n’est plus cliquable alors que c’était le cas avant… et le lien vers le doc 4007 n’est plus généré. Quelque chose a-t-il changé ?

    • Bonjour Manu,

      désolé de ne pas avoir vu ton message plus tôt. Je n’avais pas remarqué ce changement de comportement.

      J’essaie d’en trouver l’origine.

    • Peux-tu essayer la version 1.2.16 ? Le problème est-il corrigé ?

    • OK… les liens sont renouveau générés.
      Merci beaucoup !

    Répondre à ce message

  • 4

    Bonjour,

    Je viens de passer à Modèles média 1.2.14. et j’obtiens le résultat suivant :

    Est-ce qu’il y a une solution prochaine ou comment puis-je faire pour utiliser la version précédente ?

    Merci par avance.

    SPIP 3.0.17 [21515]

    Répondre à ce message

  • Bonjour,

    Je sais que cela peut ouvrir une discussion à l’infini sur le bien-fondé des liens qui ouvrent un nouvel onglet (ou une nouvelle fenêtre), mais même si je comprend (et pratiquement approuve) les arguments de ceux qui disent que c’est mal, il y a de nombreux cas ou cela me parait souhaitable (par ex ouvrir une page vers un autre site), ne serait-ce que parce que les internautes (lire 80% des internautes que je connais) ne savent pas vraiment se servir d’un navigateur et que de toutes les façons il me semble pire de forcer l’internaute à revenir en arrière pour retrouver un site qu’il a quitté ... (sans parler des sites qui maintenant effacent l’historique pour que vous ne reveniez pas en arrière ...) ... Bref ce long préambule pour dire que c’est dommage que ce plugin n’autorise pas le choix d’une cible d’ouverture des liens.

    J’ai contourné le problème en modifiant media_fonctions.php à la ligne 263 en $a .= ' target="_blank">'; mais c’est dommage que l’on n’ait pas, soit un paramètre à positionner lors de l’ajout d’un média dans le back-office, soit la possibilité d’agir en créant un modèle dans nos squelettes ...

    Je me posais la question de savoir s’il était possible de surcharger une fonction d’un plugin en créant une fonction de nom équivalent dans mes_fonctions.php ?
    Et bien sûr, s’il était éventuellement possible que le plugin évolue dans ce sens avec un paramètre |cible= par ex.

    PS : à noter que HTML5 est revenu sur cet attribut qui est maintenant valide alors qu’il ne l’était plus en XHTML strict.

    Merci !
    Pierre.

    Répondre à ce message

  • 1

    Problème Responsive Web Design et modèle média sans paramètre de taille
    Je encontre un souci sur un site que je suis en train de passer en RWD. Dans cette logique-là, les balises img sont dotées des déclarions max-width:100% et height:auto.

    Lorsque des médias sont insérés dans le texte sans paramètres de taille genre <mediaXXX|left|insert>, dans le code html, outre les attribut standard de width et height, l’image se voit attribuer un attribut style="width:xxxx";height:zzzz" ce qui contrarie le bon affichage (l’image est déformée)

    Si l’insertion se fait en insérant un paramètre de taille genre <mediaXXX|left|insert|taille=grand>, alors, l’image ne se voit pas dotée d’attribut de style, donc c’est OK, les CSS font leur travail.

    À part fouetter les rédacteurs pour qu’ils pensent à indiquer systématiquement un paramètre de taille, comment peut-on contourner l’obstacle et faire en sorte que l’affichage soit toujours correct en proportion ?

    Mais c’’est peut-être moi qui ai loupé quelque chose...

    • OK,

      il semble que images_reduire (qui est appliqué quand on précise une taille) peuple bien les tags HTML width et height mais sans ajouter leur valeur avec le tag style. Or, en l’absence de redimensionnement, l’information était donné à la fois en style CSS inline et avec les tags HTML.

      C’est modifié en version 1.2.14. Seuls les tags HTML sont gardés.

    Répondre à ce message

  • 9

    Bonjour,

    Quand j’affiche les légendes sur les medias, la largeur de la légende est limité a 350px max.
    Quand j’affiche dans le modèle media image le width de l’image passé en paramètre , il m’affiche la taille original du document et non la taille du document inséré dans l’article.

    est ce un comportement normal ? pour la limite a 350 je suppose que oui, c’est le cas du modèle document de base fournis avec spip, et je n’ai d’ailleurs jamais trop compris le pourquoi de cette limitation, je pense que des css suffisent amplement a gérer ces cas de figure...

    comment contourner ce(s) problèmes ? j’utilise les dernières version publiés ...

    Merci de vos réponses

    • Par défaut, les modèles media reproduisent le fonctionnement du modèle standard, à savoir une largeur minimum de 120 pixels et maximum de 350 pixels pour les légendes.

      Cependant, ces paramètres sont modifiables dans le formulaire de configuration du plugin.

    • Enfin, il est toujours possible de créer ses propres modèles de légende ou de surcharger modeles/legende_complete.html

    • Bonjour Joseph,

      Merci de ta réponse, effectivement j’ai surchargé, le modèle standard de spip pour contourner la limitation (d’ailleurs je surcharge ce modèle sur tous mes sites).

      Cependant, ces paramètres sont modifiables dans le formulaire de configuration du plugin.

      j’ai pas accès a une configuration quelconque, ... en version 1.2.13, le formulaire est bien présent dans le dossier mais aucun bouton de config. L’appel de l’url exec=media ne donne rien

      en fait en regardant dans /prive/ c’est dans un dossier /configurer et pas squelette/contenu/

      bref c’est infonctionel forcément ...

    • Ok donc après test c’est bien ça le problème. En créant les dossiers dans /privé, ça fonctionne correctement, on peut configurer le plugin.

      bon hormis qu’on ne peut spécifier la taille des légendes que en px et pas en % ou auto et je ne vois vraimment pas le pourquoi de ce fonctionnement par défaut, le légendes s’adapte a l largeur et si besoin on fait le reste en css avec un padding => c’est anti-responsive ce truc des pixels ;-).

    • Quand j’affiche dans le modèle media image le width de l’image passé en paramètre , il m’affiche la taille original du document et non la taille du document inséré dans l’article.

      Donc en fait c’est les images recadrés par [(#TEXTE|image_reduire{})] dans le squelette de l’article qui ne renvoie pa la bonne taille.

    • Comme indiqué dans la documentation,le formulaire de configuration se situe

      dans la Configuration de SPIP, sous l’onglet Fonctions avancées.

      , soit via la page ecrire/?exec=configurer_avancees.

      La manière dont la largeur des légendes fonctionne suit le fonctionnement des modèles par dféaut de Spip et permet la gestion de cette largeur sans qu’il y ait besoin de rajouter une couche de CSS, soit out of the box.

      Le width transmis à la balise #MEDIA_LEGENDE est celui calculé avec #MEDIA_IMAGE_RETAILLEE. Il n’y a pas de paramètre ’width’ qui peut être passé à un modèle media. Par contre tu peux passer un paramètre ’largeur’.

    • Ok, merci pour toutes ces explications et patience habituelle ;-), effectivement j’avais pas vu/lu que la configuration du plugin était dans les paramètres avancés : c’est plutôt rare ... mea culpa ;-)

      La pour que mes documents inssérés sans taille/largeur spécifiés dans le modèle, et remis a la taille max de la largeur de l’article par TEXTE|image_reduire{560}, s’ajuste correctement, j’ai paramétré la largeur_max a 560px. Dans ce contexte ça fonctionne.

      Par contre renseigner en dur une balise style=« width:XXpx », si je ne m’abuse, empêche toute surcharge via les css, donc si je suis sur un périphérique qui fait 320px, et que ma largeur max est a 560 on sort de la page, que ce soit avec le markup classic ou avec figure ...

      Il est pourtant possible de faire ça différemment sans compliquer le markup (tout du moins pour les navigateurs dignes de ce nom) en utilisant la propriété display:table : une petite demo ici

      A voir ...

    • Tu peux toujours utiliser la propriété CSS max-width pour limiter la largeur de la légende, par exemple à 100%. Même si tu as un width : 560px ;, sur un écran de 320 pixels, la légende ne dépassera pas les 100%, puisque c’est le souci que tu évoques.

      Il en est d’ailleurs de même avec l’image qui est juste au-dessus.

      Et sinon, tu devrais pouvoir outrepasser la valeur indiquée en dure avec la propriété !important.

    • Certes, max-width le fera, mais faut le coller partout, !important je suis pas fan du tout, ça tiens plus du hack que du réel css ... je l’utilise en dernier recours dans un perso.css, a la fin de la cascade, quand je n’ai pas le choix, mais jamais dans mes composants.

      Enfin c’est surchargé « grâce à SPIP », je préfère un display : table a un !important , le plus étant de présenter si besoin la description a droite ou en dessous suivant le viewport, la grille ou le thème.

      Le support navigateur est très correct, de plus = http://caniuse.com/#feat=css-table

      Merci de tes conseils.

    Répondre à ce message

  • 2

    Problème avec document googledoc
    Je me demande si je ne viens pas de tomber sur un petit bug, ou plutôt sur un cas de figure un peu particulier qui cause un problème.
    Je travaille sur un site sur lequel je souhaite insérer un graphique googledoc. L’url de l’image dans ce cas précis est de la forme https://docs.google.com/spreadsheet/oimg?key=xxxxxxxxxxxxxxxxx
    L’acquisition par SPIP de l’image (<<ajouter un document>> option <<depuis internet>) se passe très bien et la vignette de l’image apparait bien à gauche dans la colonne des documents.

    Insertion dans l’article
    <imgxx> est OK : l’image est bien affichée
    <docxx> est OK : une vignette est bien affichée mais l’agrandissement médiabox ne fonctionne pas (au lieu de l’image, c’est du code informatique qui s’affiche dans la mediabox)
    <mediaxx> pas OK (=pas d’image). L’examen du code source de la page montre que la valeur de l’attribut src dans la balise img générée est tronquée https://docs.google.com/spreadsheet/oimg lorsque le «  ? » de l’url du doc google est rencontré.

     ??? C’est grave docteur ?

    • Euhhh un site de démo ? Ou l’URL du graphique ? (en message privé au besoin)

      Est-ce que le plugin Google Viewer est activé ?

      Comment SPIP comprend ce lien ? Il détecte que c’est une image ?

    • Réglé avec la version 2.1.13

    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