logo site
SpipFactory.fr
Slogan du site

C’est une plateforme d’hébergement autogéré en association de loi 1901.
Propulsée par la mutualisation de Spip. Habillage Escal .

Affichage multimédia dans votre site
Article mis en ligne le 25 septembre 2019
dernière modification le 13 octobre 2019

L’Affichage multimédia dans son site est toujours délicat, car il existe une foultitude de produit.

SpipFactory afin de faciliter l’interface utilisateur et la maintenance par la Team a retenu :

Cycle 2

  • Avantage : l’affichage est adapté aux différentes largeurs d’écrans (responsive design) selon l’interface du site.
  • Inconvénient : pas de visibilité global des vignettes
  • Pour une utilisation courante, le diaporama (slider pour les anglophones) s’insère dans les textes par le modèle <articleN|cycle> où « N » est le numéro de l’article dont on veut afficher les images.

<article258|cycle>

Titre de l'image ©les Crédits de l'image

On peut insérer ce modèle dans n’importe quel autre article que l’article N lui-même
Chaque paramètre de la configuration générale est actif et en même temps corrigeable lors de l’inclusion.

- En dehors de ces paramètres généraux, voici quelques paramètres optionnels pour ce modèle

  • Alignement dans le texte
    Comme un autre document, on peut aligner le diaporama : |left, |right ou |center comme ceci <article258|cycle|left>
    Titre de l'image ©les Crédits de l'image

    S’il n’est pas précisé, l’alignement est « centré ».

  • Choisir les images
    <articleN|cycle|docs=1,5> fait tourner les images 1 et 5 de l’article « N » en diaporama, dans l’ordre du titre des images.
    « N » n’est pas obligatoire. On peut maintenant écrire

    pour demander les images 1,2,3,6,9 même si elles sont liées à des articles différents, voir des rubriques ou d’autres objets.

  • Plusieurs diaporamas par page
    On peut inclure plusieurs diaporamas par page de la même façon :
    <articleX|cycle>
    <articleY|cycle>
    <articleZ|cycle>

Dans ce cas, si les boutons « suivant/précédent » sont activés dans la configuration générale, ils actionneront tous les diaporamas en même temps. Pour corriger cet effet, il est préférable de personnaliser chaque diaporama

  • Paramètre « lien_parent »
    |lien_parent=oui
    Crée un lien sur chaque image vers l’objet auquel elle est liée, que ce soit les images d’un seul article, ou bien sélectionnées individuellement |docs=1,2,3,6,9. Si une image est liée à plusieurs objets, ce sera le dernier en date qui sera utilisé.
  • Paramètres « lien_article » et « forcer_lien_reference »
    <articleN|cycle|lien_article=XXX|forcer_lien_reference=oui>

Permet de poser un lien sur le diaporama vers un article, celui qui contient les images ou un autre. Dans le cas d’un site multilingue, fournir l’id de l’article de référence, le modèle se charge de trouver l’id de l’article correspondant à la langue du visiteur.

  • Paramètres « liens_individuels »
    <articleN|cycle|liens_individuels=article>
    Permet de poser un lien sur chaque image du diaporama vers un article, une rubrique ou un site externe suivant la valeur du paramètre (article, rubrique, externe). Si la valeur vaut article ou rubrique, l’identifiant de l’objet est pris dans le champ descriptif de chaque image. Si la valeur vaut externe, le champ descriptif de chaque image doit contenir un lien http.
  • Paramètre « limite » :
    <articleN|cycle|limite=3>
    Sortira les trois premières images de l’article « N » dans le diaporama.
  • Diaporama des images d’une rubrique
    Le modèle rubrique_cycle.html est fait pour ça.
    <rubriqueN|cycle> où « N » est l’identifiant de la rubrique concernée.
  • Diaporama des albums
    Le plugins Albums permet de regrouper des documents.
    L’inclusion de <albumN|cycle> affiche un diaporama des images de l’album
  • Paramétrage général des diaporamas du site.
    Chaque paramètre peut être corrigé à la rédaction lors de l’inclusion d’un diaporama
  • Largeur maximum
    Toutes les images seront retaillées en largeur à cette valeur, en pixels. Les diaporamas étant en taille proportionnelle, ils s’adapteront à la largeur définie par l’interface du site, mais dans la limite définie ici.
    <article258|cycle|largeurmax=150>
    Titre de l'image ©les Crédits de l'image
  • Hauteur maximum
    En laissant le champ vide, les images seront toujours à la largeur maximum possible. Sinon toutes les images seront retaillées en hauteur à cette valeur, en pixels. Si la largeur de l’image n’est pas suffisante, la couleur de fond configurée sera visible. La valeur de couleur de fond "transparent" rendra par contre un fond blanc.
    <articleN|cycle|hauteurmax=80>
    Titre de l'image ©les Crédits de l'image

et bien d’autre réglage que je vous laisse découvrir via URL DE VOTRE SITE/ecrire/ ?exec=configurer_sjcycle

  • Pour mettre un bandeau en place, on va :
    • faire une copie de inc-bandeau.html de /escal/inclusions vers /squelettes/inclusions et dans ce fichier, effacer tout le code et mettre juste
   <div id="bandeau">
   [(#MODELE{article_cycle,id_article=N,docs=21|22|24})]
   </div>

ou

   <div id="bandeau">
[(#MODELE{article_cycle,docs=21|22|24})]
   </div>

Choisir les images
<articleN|cycle|docs=1,5> fait tourner les images 1 et 5 de l’article « N » en diaporama, dans l’ordre du titre des images.

« N » n’est pas obligatoire.

On peut maintenant écrire

pour demander les images 1,2,3,6,9 même si elles sont liées à des articles différents, voir des rubriques ou d’autres objets.

Nivoslider

  • Avantage : Parfait pour l’affichage d’un bandeau en slider
  • Inconvénient : les images doivent être retaillées en amont (largeur = celle du site, hauteur au choix mais identique pour toutes les images)

Pour mettre un tel bandeau en place, on va :

  • créer un article dans une rubrique invisible dans les menus grâce aux mots clés adéquats
  • joindre à cet article les images que l’on veut en les ayant retaillées en amont (largeur = celle du site, hauteur au choix mais identique pour toutes les images)
  • publier l’article
  • dans la configuration de nivoslider, régler la largeur et la hauteur en fonction de vos images et indiquer l’article créé comme réservoir d’images (les autres réglages sont à votre convenance)
  • reste à faire une copie de inc-bandeau.html de /escal/inclusions vers /squelettes/inclusions et dans ce fichier, effacer tout le code et mettre juste
       <div id="bandeau">
       [(#MODELE{nivoslider})]
       </div>

Ça pourrais donner ceci :

Galleria

  • Avantage : permet d’ajouter des galeries d’images "responsive" si on l’indique dans le raccourci à vos articles. Vous pouvez configurer les transitions , le mode plein écran ou la présentation de la galerie
  • Inconvénient : Affiche des vignettes

Mise en place
Pour créer une galerie avec ce plugin, il suffit de créer un article avec dans la zone texte un raccourci comme celui-ci :

<galleriaXX|width=500|lightbox=true|transition=fade|pagesize=5>

  • XX correspond au N° de l’article
  • width=500 définit la largeur de la galerie en pixels
  • lightbox=true permet d’ouvrir l’image avec ses dimensions d’origine dans une lightbox
  • transition=fade pour des transition en "fondu enchainé". Autres options : flash, pulse, slide, fadeslide, doorslide
  • pagesize : le nombre d’image par page

Autres options intéressantes

  • responsive=true permet de rendre la galerie responsive ; inutile dans ce cas_là de préciser une largeur donc car celle-ci ne sera pas prise en compte !
  • autoplay=true qui permet de faire défiler les images de façon automatique. Ce défilement s’arrête dès qu’on clique sur une des vignettes.

Métadonnées
Une petite adaptation du modèle permet d’afficher les métadonnées de l’image

  • si l’image n’a pas de titre et si le plugin Métadonnées Photos n’est pas activé
    • on n’affiche rien
  • si l’image a un titre et si le plugin Métadonnées Photos n’est pas activé
    • on affiche le titre de l’image
  • si le plugin Métadonnées Photos est activé
    • on affiche les métadonnées de l’image

Voici un exemple avec

0 | 10

 <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />  <br />

0 | 10

Trucs et Astuces

  • Ajouter une galerie avec les images d’un autre article.
    Il est possible de publier une galerie dans un article qui contiendra les images d’un autre article.
    ex : Si un article10 contient les images :img20 ,img21 ,img22 , en publiant dans un article13 ,la balise , cette galerie contiendra les images :img20 ,img21 ,img22 , même si article13 ne contient pas ces images.
  • Ajouter un titre et une description
    Vous pouvez renseigner le titre et la description d’une image liée à un article , qui apparaîtront en haut à gauche la galerie
  • Ajouter les images du portfolio
    Utilisez l’option mode=document pour choisir le portfolio comme source de vos images

Insertion avancée d’images + Image responsive

  • Avantage : modernise le raccourci et le rend beaucoup plus moderne, cohérent et responsive. Il ajoute au raccourci une collection de variantes qui permettent d’animer la page.
  • Inconvénient : il faut modifier :
    • le fichier .htaccess pour y ajouter le contenu du fichier ajouter_a_htaccess.txt livré avec le plugin.
    • le squelettes pour l’utiliser
    • la newsletter n’embarque pas les images

Ça ajoute au raccourci

  • un balisage moderne, une collection de paramètres (largeur=xxx, rond, flip, etc.).
  • des raccourcis supplémentaires : destiné à afficher des images côte à côte et destiné à afficher des images dans un slider horizontal.
  • un Filtres ‘image_responsive’ et ‘image_proportions’ pour vos squelettes
    • Le filtre ‘image_responsive’ (et ses paramètres) permet à vos images de s’adapter automatiquement à la taille et à la définition de l’écran du visiteur.
    • Le filtre ‘image_proportions’, permet, par exemple, d’obtenir une image 16/9 responsive. L’option “_IMAGE_WEBP” automatise la fabrication d’images au format WebP pour les navigateurs compatibles.
le raccourci de base est toujours : <img434|center> Titre de l'image

Métadonnées Photo

  • Avantage : afficher l’histogramme ainsi que les informations EXIF, GPS et IPTC d’un fichier JPEG.
  • Inconvénient : n’affiche plus le titre des photos avec le plugin "Galleria"

Le plugin Métadonnées Photo permet d’afficher différents types de métadonnées stockées dans les fichiers graphiques :

  • les données IPTC (commentaires insérés « manuellement » par le photographe),
  • les données EXIF (données techniques insérées automatiquement lors de la prise de vue),
  • les données GPS (situation géographique tirée d’un positionnement GPS).

Pour l’affichage des métadonnées sur votre site public , on a concocté un modèles, le raccourci à utilisé : <image_exifXX> où XX est le numéro de l’image

La fonction histogramme requiert GD2.

Exemple :

Le plugin CIWIDGET

  • Avantage :Afficher facilement, dans le texte d’un article d’un site SPIP, des contenus autres que du texte, des images et des pièces jointes.
  • Inconvénient :
  • Quels sont les apports du widget vidéo ?
    le widget vidéo :
    • Indique, par sa présence, la possibilité de téléverser des vidéos.
    • Permet de limiter les formats autorisés.
    • Permet d’imposer un débit vidéo maximal avec audio.
    • Informe l’utilisateur sur le poids maximal, les formats autorisés et, le cas échéant, le débit maximal autorisé.
    • Permet de saisir une "Transcription textuelle" (stockée dans le descriptif), qui s’affichera sur le site public lorsque l’on cliquera sur le bouton "Voir la version texte".
    • Offre deux options supplémentaires : tourne en boucle, démarre automatiquement.

Remarque :
le plugin offre un lecteur vidéo accessible et compatible avec des écrans de faible largeur (responsive). La configuration générale offre trois choix d’apparence, c’est-à-dire 3 skins, pour le lecteur vidéo

Une petite vidéo explicative

Adaptive Images

  • Avantage : Il suffit d’installer et activer le plugin pour qu’il prenne immédiatement en charge toutes les images du site.
  • Inconvénient : Le plugin ne fournit pas d’image adaptée dans Internet Explorer<10.
    La qualité de connexion n’est pas détectée sur les périphériques iOS à ce jour (mais sera presque certainement automatiquement prise en charge dans une prochaine mise à jour de iOS).
    Les périphériques Androïd 2.x sans JavaScript risquent de charger plusieurs versions de la même image. Mais ce devrait être un cas très rare.

le plugin va intercepter toutes les pages HTML, et agir sur toutes les images plus larges que 320px et les adapter à l’utilisateur :

  • adaptation à la largeur de l’écran, en supposant une largeur maximale affichée de 640px dans tous les cas ;
  • adaptation à la résolution de l’écran en envoyant une image 1.5x ou 2x ;
  • adaptation à la qualité de la connexion : rendu progressif avec une prévisualisation de basse qualité, et pas d’image 1.5x ou 2x si mauvaise connexion ;
  • adaptation du contenu : possibilité de fournir une version recadrée de l’image pour les petits écrans mobiles.
qrcode:https://spipfactory.fr/affichage-multimedia-dans-votre-site



puceMentions légales puce

2017-2019 © SpipFactory.fr - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.3.20
Hébergeur : SpipFactory
Soutenir par un don