Ajouter du multimédia

L’un des atouts de la publication sur un support numérique tel que votre carnet Hypothèses réside dans la possibilité d’ajouter des images, des enregistrements sonores, des vidéos, des liens et toute sorte de contenus multimédias à vos textes, afin de les enrichir et d’apporter davantage d’information à vos lecteurs.

Sommaire

• La médiathèque d’un carnet
• Ajouter un média dans un billet ou une page
  • Image
  • Gif animé
  • Fichier
  • Vidéo
  • Son
• Insérer un contenu hébergé ailleurs que sur le carnet
  • Comment afficher un élément multimédia externe sur un carnet Hypothèses ?
  • “Insérer à partir d’une adresse web” des images, sons et vidéos
  • Utiliser un code d’intégration pour insérer un contenu externe
  • Exemples de contenus embarqués

La médiathèque d’un carnet

Le plus souvent, c’est lors de l’édition d’un contenu (billet ou page) que vous ajouterez des médias. Tout élément multimédia ajouté à un billet ou à une page est automatiquement téléversé dans la médiathèque du carnet, accessible via le menu Médias > Médiathèque. Des médias peuvent également être téléversés sur un carnet lors de l’ajout dans des widgets, ou lors de la personnalisation du thème graphique.

Hypothèses accepte les types de fichiers suivants :

• Images : .jpg, .jpeg, .png, .gif, .webP
• Audio et vidéo : .mp3, .mp4, .mov, .avi, .wmv, .midi, .mid, .wav
• Textes : .doc, .odt, .txt, .rtf, .vtt, .srt
• Tableurs: .ods, .csv, .xls
• Divers : .pdf, .zip, .ppt

La taille maximale acceptée par fichier est actuellement de 10 Mo. Attention, si vous importez plusieurs fichiers à la fois, la taille de chaque import ne doit pas dépasser 10 Mo. Il n’y a pas de limite concernant la taille maximale cumulée des différents fichiers que vous pouvez conserver sur votre carnet.

Mais il est possible de téléverser des médias directement dans la médiathèque (Médias > Médiathèque), sans passer par l’édition d’un billet, d’une page, d’un widget ou d’un thème graphique. Pour cela, cliquer sur le bouton Ajouter en haut de la page web, ou depuis Médias > Ajouter.

Un aperçu du document vous est proposé lorsque cela est possible (si celui-ci est une image ou un document PDF par exemple).

Dans le cas d’une image, l’interface propose un bouton Modifier l’image permettant quelques manipulations simples comme pivoter l’image, la recadrer ou la redimensionner.

Il est cependant conseillé de téléverser des images déjà recadrées aux bonnes dimensions. Ces dernières varient en fonction du rôle de votre image (image mise en avant ou illustration dans le corps du texte par exemple) et du thème graphique. Des informations sont disponibles à ce sujet dans les billets de la Maison des carnets dédiés aux thèmes graphiques.

Sur la droite de l’interface, les informations sur le média peuvent être renseignées ou éditées. Pour une image :

• Titre : par défaut, c’est celui que le média avait sur votre ordinateur ;
  
• Légende : seul champ affiché à côté de l’image dans le billet ou la page, il doit a minima contenir les crédits de l’image, c’est à dire le nom de l’auteur de l’image, et si possible ce qui vous donne le droit de la réutiliser (par exemple la mention d’une licence particulière, voir le billet “Droit d’auteur : insérer des contenus que vous n’avez pas créés sur votre carnet” de cette formation). Si l’image n’est pas qu’esthétique (s’il s’agit par exemple d’un graphique) ce champ peut aussi contenir son explication ;
  
• Texte alternatif : renseigner ce champ permet d’améliorer l’accessibilité d’un contenu, en fournissant une description de l’image aux utilisateurs qui ne peuvent pas la consulter (pour plus d’informations sur les bonnes pratiques à suivre sur cette question voir le billet Améliorer l’accessibilité de votre carnet). Il s’agit notamment des personnes ayant des connexions à débit très limité ou des personnes utilisant des lecteurs d’écran. Le texte alternatif est aussi lu par les robots qui indexent les contenus dans les moteurs de recherche. Il participe donc au référencement de votre carnet ;
  
• Description : la description n’est pas affichée aux côtés de l’image dans un contenu. Elle peut en revanche servir à retrouver un média dans la médiathèque en recherchant des termes présents dans cette description. Elle peut également vous servir, toujours dans la médiathèque, à différencier plusieurs images présentant des ressemblances visuelles.

L’interface “Détails du fichier joint” rappelle également les dimensions (pour une image), la taille du fichier média et, le cas échéant, dans quel billet ou page le média est utilisé.

Depuis cette interface, le média peut être définitivement supprimé de la médiathèque et donc du carnet. Depuis la page Médias > Médiathèque, il est possible de supprimer définitivement un lot de médias en cliquant sur Sélection en masse puis Supprimer la sélection. Les médias supprimés d’un carnet sont définitivement supprimés des serveurs d’Hypothèses dans les 24h suivantes.

Ajouter un média dans un billet ou une page

Dans l’interface d’édition d’un billet ou d’une page, plusieurs types de blocs permettent d’ajouter des médias à votre texte. Voici les plus communs :

Image

Ce bloc permet d’ajouter une image unique, en téléversant une image depuis un ordinateur (bouton Téléverser), en choisissant une image déjà téléversée dans la médiathèque (bouton Médiathèque de médias), ou en insérant une image externe depuis le web (bouton Insérer à partir d’une URL).

Si votre image est déjà présente dans votre médiathèque, vous avez la possibilité de l’insérer dans votre article via une seconde méthode. La liste des blocs affichée (en colonne de gauche) permet d’accéder également aux compositions et aux médias. Cliquez sur Médias. Vous retrouverez tous vos médias classés par types.

Ce chemin n’est pas forcément plus rapide mais il vous donne un accès plus simple à Openverse, bibliothèque d’images et d’audios relevant du domaine public ou sous une licence Creative Commons, proposée par la fondation Creative Commons et WordPress.

Une fois insérée, l’image s’affiche en pleine largeur. Il est possible d’ajouter une légende ou d’éditer une légende existante directement sous l’image.

Dans la barre d’édition du bloc “Image”, le bouton Réglages de lien (icône “chaîne”) permet de choisir quelle action suit un clic sur l’image :

• Par défaut, rien ne se passe, l’image n’est pas cliquable.
• URL personnalisée : ouvre la page Internet de votre choix, dont l’adresse aura été renseignée dans le champ “Collez ou saisissez l’URL à rechercher”.
• Fichier média : ouvre l’image dans sa dimension originale dans une visionneuse, avec sa légende (c’est l’option la plus intéressante).
• Page du fichier joint : ouvre une page Internet ne contenant que l’image, dans l’environnement du carnet, avec sa description et son titre tels que renseignés dans les “Détails du fichier joint”).

La barre d’édition permet également de modifier l’alignement de l’image : lorsqu’elle est alignée à gauche ou à droite, il est possible de réduire la taille de l’image grâce aux poignées bleues situées de part et d’autre de l’image.

Avec un bloc média et texte, il est possible de placer à côté de l’image.

Utilisation du bloc Média et texte

Dans l’onglet bloc de la colonne de réglages, il est possible d’ajouter ou de modifier le texte alternatif de l’image. Il est également possible de choisir une taille d’image parmi les formats prédéfinis ou de définir des dimensions personnalisées.

Le bloc “Image” est transformable, depuis sa barre d’édition, en bloc “Fichier” (n’affiche alors pas l’image mais un lien pour l’afficher ou la télécharger), “Galerie” (permet alors d’ajouter d’autres images et de les organiser entre elles), “Bannière” (offre un affichage différent à l’image et permet d’écrire du texte par-dessus) ou “Média et texte” (permet d’ajouter du texte à côté de l’image).

Gif animé

Il est tout d’abord à noter que le Gif animé est un format d’image, il s’intégrera donc dans un billet en utilisant le bloc image.

Il y a deux manières d’ajouter un Gif animé, via le téléversement de celui-ci sur votre carnet ou en utilisant son URL provenant d’un autre site web.

• Téléversez un Gif sur votre carnet : comme WordPress retaille automatiquement les images, votre Gif ne sera par défaut pas animé. Pour contourner ce problème, lorsque vous ajoutez votre Gif dans un bloc image, il faut sélectionner « Taille de l’image » → « Taille originale » dans les paramètres du bloc (colonne de droite). 
• Ajouter le Gif en utilisant l’URL d’un autre site web : pour cela il suffit de copier l’URL dans le bloc image.

Fichier

Ce bloc permet de rendre accessible un document – par exemple un fichier PDF – au lectorat d’un carnet, sous la forme d’un lien cliquable. Le fichier est alors affiché ou téléchargé, selon la configuration du navigateur Internet du lecteur. L’ajout se fait en téléversant un fichier depuis un ordinateur (bouton Téléverser) ou en choisissant un fichier déjà téléversé dans la médiathèque (bouton Médiathèque de médias).

Le texte du lien peut être modifié au sein du bloc.

Dans l’onglet bloc de la colonne de réglages, il est possible de choisir quelle action suit un clic sur le lien :

• Fichier média : ouvre le fichier dans le navigateur Internet si possible ;
• Page du fichier joint : ouvre un aperçu du document sur une page Internet dans l’environnement du carnet.

Il est également possible de choisir d’afficher ou non un bouton Télécharger à côté du lien.

Pour afficher un document ou fichier PDF dans une visionneuse, il s’agira de se tourner vers un service externe pour l’hébergement du fichier, puis d’afficher ce contenu externe dans le billet ou la page (voir plus loin dans ce billet).

Vidéo

Ce bloc permet de créer un lecteur simple pour afficher, dans un billet ou une page, une vidéo en téléversant un fichier depuis un ordinateur (bouton Téléverser), en choisissant un fichier déjà téléversé dans la médiathèque (bouton Médiathèque), ou en insérant une vidéo externe depuis le web (bouton Insérer à partir d’une URL).

La légende de la vidéo peut être éditée au sein du bloc.

Le bloc “Vidéo” peut être transformé en blocs tels que “Fichier” (offre un lien de téléchargement de la vidéo) ou “Bannière” (la vidéo est alors transformée en image, sur laquelle il est possible d’écrire un texte).

Son

Ce bloc permet d’afficher un lecteur audio simple pour inclure, dans un billet ou une page, un fichier son en téléversant un fichier depuis un ordinateur (bouton Téléverser) ou en choisissant un fichier déjà téléversé dans la médiathèque (bouton Médiathèque), ou en insérant un fichier externe depuis le web (bouton Insérer à partir d’une URL).

La légende du lecteur audio peut être éditée au sein du bloc.

Un bloc “Son” peut être transformé en bloc “Fichier” (offre un lien de téléchargement de l’enregistrement sonore).

Insérer un contenu hébergé ailleurs que sur le carnet

Lorsque le fichier média est trop volumineux pour être téléversé sur un carnet ou que l’affichage souhaité pour le média n’est pas pris en charge par Hypothèses, il est possible d’héberger le media en question ailleurs que sur Hypothèses, puis d’insérer ce contenu externe dans un billet ou une page sous la forme d’un contenu embarqué.

Les blocs “Image”, “Son” et “Vidéo” vous permettent d’insérer le lien direct d’un média hébergé hors du carnet, et nombreux sont les services externes qui vous permettent d’afficher certaines publications de manière satisfaisante dans vos billets : vidéos, documents feuilletables, cartes interactives, etc. Ces médias ne sont alors pas hébergés sur le carnet, ils le sont seulement sur le site d’origine, mais affichés de manière parfois élaborée sur le carnet.

Comment afficher un élément multimédia externe sur un carnet Hypothèses ?

Certains services externes connus permettent une intégration très facilitée en collant simplement l’URL de la ressource dans un bloc “Paragraphe” vide d’un billet.

Une autre manière d’arriver au même résultat est d’insérer un bloc “Contenu embarqué” et d’y coller la même URL ou, dans la catégorie de blocs “Contenu embarqué”, de choisir le service adéquat et de coller l’URL dans le champ prévu à cet effet.

Astuce : la liste des services externes présentée dans la catégorie de blocs de type “Contenus embarqués”, permet de connaître les hébergeurs tiers pour lesquels le seul fait de copier l’URL dans un bloc de nature indéterminée suffit à afficher un contenu externe sur votre carnet.

“Insérer à partir d’une URL” des images, sons et vidéos

Les blocs “Image”, “Son” et “Vidéo” permettent d’insérer dans un billet ou une page un élément multimédia hébergé hors du carnet à partir de son adresse web. Il doit bien s’agir de l’URL directe de l’image, du son ou de la vidéo hébergée ailleurs sur internet ; ces URLs se terminent par l’extension de fichier qui détermine sa nature, par exemple : https://freemium.openedition.org/media/logos/openedition-logo_Uj4ka59.png

Vous pouvez insérer dans un bloc “Image” des médias à partir d’une URL se terminant par .jpg, .jpeg, .png ou .gif, dans un bloc “Son” des médias à partir d’une URL se terminant par .mp3, .midi ou .mid, et dans un bloc “Vidéo” des médias à partir d’une URL se terminant par .mp4, .mov ou .avi.

Le cas de WikiCommons

Dans un bloc “Image” ou “Galerie” et liées à “Fichier média” (pour les afficher en visionneuse), les images de Wikipédia et WikiCommons ne s’affichent pas, car l’URL en .jpg n’est pas le lien de l’image mais d’une page contenant d’autres éléments HTML, par exemple : https://commons.wikimedia.org/wiki/Accueil#/media/File:Seehof_Phoenicurus_ochruros_female_5264746.jpg

Sur la page de l’image, cliquez sur “Use this file on the web” à gauche de l’image, puis copiez l’URL correspondant à “File URL”. Cette adresse web est l’URL directe de l’image, et peut être utilisée dans un bloc “Image” ou “Galerie”, liée à “Fichier média”.

Utiliser un code d’intégration pour insérer un contenu externe

Il existe une multitude de services externes permettant d’afficher une partie de leur contenu sur un carnet sans que ce contenu soit hébergé sur les serveurs d’Hypothèses.

C’est par exemple le cas de certains outils de cartographie (ex : Google Maps, OpenStreetMap), de plateformes de vidéos académiques (ex : Canal U), ainsi que de nombreux services d’hébergement et de diffusion de documents accessibles librement (ex : OpenEdition Books, Internet Archive, HAL, Gallica).

Ces services fournissent un code HTML permettant d’intégrer/embarquer (embed en anglais) un élément multimédia dans un carnet (dans un billet, une page, voire un widget). Pour obtenir ce code, il s’agit souvent de cliquer sur une icône de partage ou un lien Partager se trouvant à proximité de l’élément multimédia en question. Le code HTML recherché est souvent indiqué par le terme “embed” ou “Intégrer” et se présente le plus souvent sous la forme : <iframe src="..."></iframe>

Le code récupéré doit être collé dans un bloc “HTML personnalisé” (qui se trouve dans la catégorie de blocs “Mise en forme”). Cliquer sur Aperçu dans la barre d’outils de ce bloc permet de prévisualiser l’affichage de l’élément multimédia.

Exemples de contenus embarqués

Notez qu’il n’est plus possible en l’état d’ajouter des contenus embarqués Instagram et Facebook depuis le changement de politique de Facebook sur les contenus embarqués le 24 octobre 2020.

Afficher le fil d’actualité d’un compte Twitter sur un carnet

Pour afficher un fil Twitter sur un carnet, par exemple au niveau d’une zone de widgets afin qu’il soit toujours visible, collez l’URL du compte Twitter (ex : https://twitter.com/hypothesesorg) dans un widget “Texte” et celle-ci sera automatiquement interprétée et se transformera en une intégration du fil Twitter de ce compte.

Bibliographie Zotero ou Mendeley

Zotero ou Mendeley ne permettent pas directement d’afficher une bibliographie sous forme de contenu embarqué. Il existe néanmoins une solution : le service BibBase, développé par un ingénieur de l’Université de Toronto, qui permet de transformer un fichier BibTex ou une base sous DBLP, Zotero, BibSonomy, ou Mendeley en page HTML.

Pour Zotero par exemple, utilisez l’outil en ligne plutôt que la version bureau. Ouvrez votre bibliothèque dans votre navigateur, puis dans un autre onglet l’outil BibBase. Dans ce dernier, choisissez “Générer une page BibBase à partir d’une « bibliothèque Zotero », d’une collection ou d’un groupe” pour créer la page. Cette page fournit une adresse url que vous pouvez intégrer dans un bloc Html personnalisé avec un code Iframe comme suit :

<p><iframe src="VOTRE URL BIBBASE" width="100%" height="1000"></iframe></p>
Remplacez VOTRE URL BIBBASE par l’url obtenue sur BibBase, par exemple : https://bibbase.org/show?bib=https%3A%2F%2Fapi.zotero.org%2Fusers%2F7779485%2Fcollections%2F4X9QDZE5%2Fitems%3Fkey%3DcxL5P3zmgX8Hd9n7AZRlVt5Y%26format%3Dbibtex%26limit%3D100&msg=embed

Ce qui donnera par exemple

Plateformes multimédia

Internet Archive : Internet Archive est un organisme à but non-lucratif américain qui a pour objectif de créer une bibliothèque en ligne donnant un accès permanent à une collection de documents numériques (fichiers textuels, images, enregistrements sonores, vidéos et programmes informatiques notamment). Un bouton “Share this item” au niveau d’une ressource permet d’obtenir un code iframe.

Nakala : plateforme développée par Huma-Num, qui permet de déposer, documenter et diffuser des données issues de la recherche et ce, sous différents formats (fichiers textuels, images, enregistrements sonores et vidéos). Pour en savoir plus sur l’affichage de contenus embarqués hébergés sur Nakala, voir ce billet sur le carnet d’Huma-Num ;

Gallica : bibliothèque numérique en libre accès de la Bibliothèque Nationale de France, dont la plupart des contenus multimédia sont dans le domaine public. Un bouton “Partage et envoi par couriel” au niveau d’une ressource permet de récupérer un code iframe.
A noter : le code iframe fourni par Gallica contient des balises HTML effacées par notre installation de WordPress. Pour que le document provenant de Gallica s’affiche correctement, vous pouvez utiliser un code iframe de cette forme : <iframe src="URL" width="X" height="Y"></iframe>. Remplacez URL par l’URL de la ressource, par exemple https://gallica.bnf.fr/ark:/12148/btv1b105162971/f1.item.mini, X par la largeur en pixel souhaitée, par exemple 400, et Y par la hauteur en pixels souhaitée, par exemple 500.

Fichiers PDF et diaporamas de présentations

Plusieurs plateformes commerciales connues vous permettent d’héberger et de partager gratuitement vos présentations et vos textes, avec une large palette de formats acceptés. La plupart de ces plateformes proposent également une offre commerciale payante, mise en avant lorsque l’on se rend sur leur site web. Il faut donc parfois aller plus loin que la page d’accueil pour accéder aux offres gratuite

Scribd et Calaméo : plateformes commerciales permettant le dépôt et la lecture en ligne de documents dans des formats variés (PDF, .doc, .odt, .xls…) ;

SlideShare : plateforme commerciale appartenant à LinkedIn et permettant le dépôt et la lecture en ligne de documents textuels (PDF, .doc, .odt…) et de diaporamas de présentations professionnelles (.ppt, .odp, .key…). Dans le même esprit : Issuu et Youscribe.

Certaines de ces plateformes permettent d’intégrer une visionneuse du document en ajoutant simplement son URL dans un bloc “Paragraphe” vide. D’autres fournissent un code iframe.

Nota bene : il existe un bloc “PDF viewer” (dans le type de blocs “Contenu embarqué”) sur Hypothèses pour afficher un fichier PDF de moins de 10Mo sous forme de visionneuse dans un billet.

Vidéos

• Canal U : projet de vidéothèque numérique de l’enseignement supérieur, porté par la Fondation Maison des sciences de l’homme (FMSH). Le service permet le dépôt et la consultation de vidéos en accès libre et gratuit, produites par les universités et les établissements d’enseignement supérieur et de recherche français.

Et bien sûr, vous pouvez choisir d’intégrer des vidéos qui se trouvent sur les plateformes commerciales de diffusion de vidéos en ligne telles que YouTube, Vimeo ou Dailymotion.

Certaines de ces plateformes permettent d’intégrer un lecteur vidéo en ajoutant simplement l’URL de la ressource dans un bloc “Paragraphe” vide. D’autres fournissent un code iframe.

Cartes

• Google Maps : Google propose une possibilité d’intégrer les Google Maps que vous réalisez en utilisant son service de cartographie en ligne ;
• OpenStreetMap : projet alternatif de cartographie interactive utilisant des données ouvertes.

Ces plateformes fournissent des codes iframe pour leurs cartes.

Objets 3D

3DHOP (3D Heritage Online Presenter) est une visionneuse de fichiers 3D qui propose une alternative open-source au service propriétaire et payant Sketchfab. Si Sketchfab propose directement depuis son site, sur la page d’une ressource, un code d’intégration embed (=iframe), ce n’est pas le cas de 3DHOP. Il peut cependant être complété par Visual Media Service, proposé par 3DHOP, et qui permet d’héberger les fichiers de 3DHOP et les afficher dans une interface web. Une alternative à Visual Media Service semble être Archeology Data Service (à visée d’archive). Pour afficher l’élément 3D, insérez le code suivant dans un bloc HTML personnalisé : <iframe src="URL-ELEMENT-3D" width="X" height="Y"></iframe> avec URL-ELEMENT-3D l’URL de la ressource, par exemple https://visual.ariadne-infrastructure.eu/3d/fragment-de-ramplage_iso461?standalone, X la largeur en pixels souhaitée et Y la hauteur en pixels souhaitée.

---

Outre ces exemples de services, les organismes de recherche et les universités auxquelles vous êtes rattaché·e·s en tant que chercheur·e·s peuvent proposer des solutions d’hébergement et de diffusion de fichiers dans des formats variés, permettant également leur intégration par code embed dans des billets Hypothèses. N’hésitez pas à vous renseigner directement auprès de ces structures.

Si vous connaissez certains services qui n’apparaissent pas dans cette liste et qui vous sembleraient pertinents pour Hypothèses, n’hésitez pas à nous en faire part !

---

---

Image mise en avant et de la bannière : Photo par Soragrit Wongsa, licence Unsplash

---

---