Images & Omeka

Vous vous demandez peut-être pourquoi je parle beaucoup d’Omeka ces temps-ci… Et bien car nous avons deux projets utilisant Omeka et très actifs ! De plus, comme je sais que le logiciel est très utilisé par la communauté, je suis plus enclin à publier des astuces à ce sujet que sur des choses très spécifiques…

Question : Comment ajouter des images au sien d’une Simple Page, du bandeau de bas de page ?

Réponse : Par défaut, la barre d’édition (celle avec plein de boutons) qui s’affiche lorsque l’on coche « Utiliser le HTML » d’une métadonnées ne permet pas d’ajouter d’image. Lorsque l’on créé une page (extension « Simple Page ») et que l’on a coché « « , c’est un peu mieux, mais la fenêtre qui s’affiche nous demande une url… Et votre extension, si elle vous permet de personnaliser le bandeau de bas de page (footer) n’est pas forcément très accueillant pour ajouter votre série de logo.

Alors comment s’y prendre ?

Voici des pistes pour vous permettre de faire tout ce dont vous rêvez.

Comment ajouter des images dans le bas de page de mon site ?

Conseils en quelques étapes :

  1. Se résoudre à apprendre un tout petit peu de html. C’est pour votre bien car, dans ce cas, ça va vous simplifier considérablement la vie. Si, si !
  2. Activer les balises et attributs HTML utiles (si ce n’est pas déjà le cas)
  3. Apprendre à répérer l’url (adresse web) d’une image
  4. Rédiger le code HTML utile
  5. Insérer le code là où nécessaire

Étape 1 – Apprendre le code HTML pour insérer une image

<img src="mettre ici l'url de l'image à insérer"/>

Comme vous pouvez le voir, il y a une unique balise nommée « img » et elle contient un attribut nommé « src » (on écrit souvent un attribut sous la forme @src). D’autres attributs pourront vous être utiles dont :

  • @width : permet de spécifier la largeur pour l’affichage de l’image,
  • @height : idem pour la hauteur
  • @alt : permet de spécifier un texte alternatif au cas où l’image n’est pas accessible (on ne sait jamais)
  • @title : permet de spécifier le texte qui s’affiche au survol de l’image

Voici un exemple de code HTML utilisant tous ces attributs :

<img src="http://litt-arts.univ-grenoble-alpes.fr/images/littearts/logo.png" alt="Logo de l'UMR 5316 Litt&Art" title="Joli logo, non ?" width="30px" height="30px"/>

Étape 2 – Activer les balises et attributs HTML utiles (si ce n’est pas déjà le cas)

Par défaut, Omeka n’autorise pas toutes les balises et attributs HTML existant. Pour des raisons de sécurité. Il va donc falloir vérifier si la balise imget les attributs utiles sont bien autorisés, et les autorisés le cas échéant.

Cela se passe dans « Paramètre » > onlget « Sécurité » > section « filtrage HTML » :

  1. Vérifier que « Activer le filtrage du HTML » est bien coché : c’est quand même mieux !
  2. Dans la liste « Éléments HTML autorisés », si « img » n’est pas présent, ajouter « ,img » à la fin. j’ai bien écris : une virgule puis tout collé img. La nouvelle liste doit ressembler à « p,br,strong,em,span,div,ul,ol,li,a,h1,h2,h3,h4,h5,h6,address,pre,table,tr,td,blockquote,thead,tfoot,tbody,th,dl,dt,dd,q,small,strike,sup,sub,b,i,big,small,tt,img« 
  3. Dans la liste « Attributs HTML autorisés », (sauf si déjà présents), ajouter les attributs autorisés pour l’élément img sous la forme balise.attribut. Par exemple : « img.src », ou encore « img.title ». Attention à toujours mettre une virgule avant chaque nouvel élément autorisé et à ne pas mettre d’espace. La nouvelle liste doit ressembler à « *.style,*.class,a.href,a.title,a.target, img.src,img.alt,img.height,img.width,img.title« 

Étape 3 – Apprendre à répérer l’url (adresse web) d’une image

En général, un clic-droit sur l’image puis « Copier l’adresse de l’image » suffit. Sinon, clic-droit puis « Afficher l’image » et copier l’url depuis la barre d’adresse de votre navigateur. Un URL par exemple, c’est ça : http://elan.hypothese.org

Si je veux le logo de mon labo, je vais sur la page d’accueil (http://litt-arts.univ-grenoble-alpes.fr/), je clic-droit sur le logo et je récupère son url : http://litt-arts.univ-grenoble-alpes.fr/images/littearts/logo.png !

Étape 4 – Rédiger le code HTML utile

Si vous avez bien lu l’étape 1, ça devrait être facile. Pour le logo de mon labo, en 30 par 30 avec le titre « Mon labo » et le texte alternatif « Logo de l’UMR 5316 Litt&Arts », ça donne :

<img src="http://litt-arts.univ-grenoble-alpes.fr/images/littearts/logo.png" alt="Logo de l'UMR 5316 Litt&Arts" title="Mon labo" width="30px" height="30px"/>

Étape 5 – Insérer le code là où nécessaire

Aller dans « Apparence » > bouton « Configurer le thème » puis dans le champ « Footer Text ». Là, cliquer sur le bouton « <> » de la barre d’outil (le dernier sur la droite) et copier-coller le code HTML là où vous le voulez. Si vous avez plusieurs logo à mettre les uns à côté des autres, je vous conseille d’ajouter quelques éléments de style, histoire que les logos ne soient pas tous collés les uns aux autres. Voici un exemple de résultat et ci-après le code HTML correspondant :

Code HTML complet (c’est long, je sais… mais en même temps, le résultat est très complet !) :

Plateforme conçue dans le cadre du projet « Mémoire des spectacles grenoblois » (Litt&amp;Arts, UMR 5316, Université Grenoble Alpes/CNRS). Pour plus d'informations : <a href="http://maisondelacreation.univ-grenoble-alpes.fr/fr/recherche/projets/archives-vivantes-memoire-des-spectacles-grenoblois--62448.kjsp?RH=MCFR_RECH02" target="_blank" rel="noreferrer noopener">Structure Fédérative de la Recherche-Création</a><br /><img alt="Creative Commons License" style="border-width: 0; height: 20px;" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /> This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>. <br /><a href="http://www.elan-numerique.fr" title="Équipe Littératures et Arts Numériques de l'UMR Litt&amp;Arts"><img alt="Logo ELAN" style="border-width: 0; height: 50px; float: right; padding: 5px;" src="/themes/archives-plurielles/images/Logo_ELAN.png" /></a><a href="http://litt-arts.univ-grenoble-alpes.fr/" title="Litt&amp;Arts (UMR 5316)"><img alt="Logo Litt&amp;Arts" style="border-width: 0; height: 50px; float: right; padding: 5px;" src="/themes/archives-plurielles/images/logo_litt&amp;arts.png" /></a><a href="http://www.univ-grenoble-alpes.fr" title="UGA"><img alt="Logo UGA" style="border-width: 0; height: 50px; float: right; padding: 5px;" src="/themes/archives-plurielles/images/logo_uga.png" /></a><a href="http://www.cnrs.fr" title="CNRS"><img alt="Logo CNRS" style="border-width: 0; height: 50px; float: right; padding: 5px;" src="/themes/archives-plurielles/images/logo_CNRS.png" /></a>

Comment ajouter des images dans un Simpe Page ?

Vous pouvez utilisr la même méthode que pour le bandeau de bas de page, mais sachez qu’Omeka a aussi prévu comment insérer les images issus de contenus Omeka. Alors :

  • si votre image est une image extérieure au site : utilisez la méthode « bandeau de bas de page »,
  • si l’image est liée à un contenu : utilisez les Short Codes d’Omeka

La documentation utile : https://omeka.org/classic/docs/Content/Shortcodes/

Et quelques exemples déjà tout prêts :

Description

Code

Résultat

Insérer un lien vers le contenu ayant l’identifiant 2736

[items ids=2736]

 

Affiche le titre du contenu et une miniature du fichier associé

Insérer l’image 2290 sous sa forme miniature carrée (size=square_thumbnail) et cliquable afin de voir la version « taille originale » (link_file=fullsize)

[file id=2290 link_file=thumbnail size=square_thumbnail]

Affiche la miniature carré. au clic, on voit l’image en taille réelle

 


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.