Intégrer une image à un contenu web Intégrer une image à un contenu web

Il existe 2 méthodes pour intégrer une image dans un contenu web :
  1. Faire un copier-coller d'une image stockée dans le presse-papier directement dans le contenu web (fonctionnalité disponible uniquement avec Firefox)
  2. Déposer l'image dans un espace documentaire ATRIUM et l'insérer dans le contenu web
 

 Attention ! La méthode n°1 (copier-coller) peut ralentir fortement le chargement de votre page 

Si la méthode par copier-coller est très facile à mettre en oeuvre, elle pose de sérieux problème de performance. Elle est donc à limiter à des usages ponctuels pour des images de petites tailles.

Cette méthode repose sur une technique d'encodage de l'image dans un format textuel (base 64) ; l'image est stockée directement dans le contenu web, ce qui pose les problèmes suivants :
  • les images ne peuvent pas être mises en cache par le navigateur des utilisateurs, elles sont donc téléchargées à chaque chargement de la page ;
  • avec cette méthode, les images sont téléchargées en même temps que les contenus textuels, la suite de la page ne peut donc pas s'afficher tant que l'image n'est pas entièrement téléchargée ;
  • la taille maximum d'un contenu web est de 1 Mo, limite qui peut être très vite atteinte avec des images de taille importante.

Comment insérer une image ? Comment insérer une image ?

1) Déposer l'image dans un espace documentaire
Avant d'être insérée dans un contenu web, une image doit avant tout être stockée dans un espace documentaire ATRIUM.
Il est préférable de stocker l'image sur le même site que le contenu web pour éviter tout problème d'autorisation.

2) Configurer les droits si nécessaires
Pour que l'image soit bien visible des utilisateurs quand ils vont afficher le contenu web, il est nécessaire qu'ils aient le droit "Voir" sur le document qui correspond à l'image. Pensez donc à vérifier que les droits accordés sur le document sont cohérents avec la population concernée par le contenu web qui va inclure l'image.

3) Insérer l'image dans un contenu web
Vous devez tout d'abord cliquer sur le bouton "image" de l'éditeur.


Dans la popup, vous pouvez cliquer sur "Parcourir le serveur" pour naviguer dans les espaces documentaires auxquels vous avez accès, et sélectionner l'image que vous avez précédemment déposée dans un espace documentaire.


Il est également possible de récupérer l'adresse de l'image (URL) en l'ouvrant depuis l'espace documentaire et en la copiant depuis le navigateur. Cette adresse pourra alors être copiée dans le champ "URL" de la popup ci-dessus.

4) Ajuster la taille de l'image
Par défaut, les images sont affichées dans leur taille d'origine. Vous pouvez modifier la taille de l'image en remplissant les champs "Largeur" et "Hauteur" de la pop-up ci-dessus.

À noter que vous avez accès initialement à cette pop-up à l'insertion de l'image, mais également par la suite en double cliquant sur l'image qui s'affiche dans l'éditeur.

Le bouton  permet de conserver le rapport hauteur / largeur de l'image.
Le bouton permet de revenir aux dimensions originales de l'image.

Il est possible de définir des dimensions fixes en nombre de pixels.
Il est également possible de définir des dimensions relatives à l'espace disponible. Dans ce cas, il faut procéder ainsi :
  • renseigner la largeur en pourcentage (ex : 100% ou 80%)
  • vider le champ hauteur (pour que le ratio de l'image soit conservé)
Afin que l'image s'adapte à la largeur du widget, le pourcentage à renseigner en largeur est 100%. 

Insérer une image sur un contenu public Insérer une image sur un contenu public

Attention ! Pour qu'une image puisse s'afficher correctement dans un contenu web public, il est nécessaire que le droit "Voir" soit accordé au rôle "Public" sur le document de l'image lui-même mais également sur tous les dossiers ancêtres de l'image (y compris la racine de l'espace documentaire).

Astuce : stocker les images dans une portée page Astuce : stocker les images dans une portée page

Si vous ne souhaitez pas mélanger les images à afficher dans des contenus web avec les autres documents de votre site, ou encore si vous souhaitez faciliter la localisation des images affichées sur une page, vous pouvez procéder ainsi :
  • Ajouter un widget "Document" sur la page concernée
  • Configurer le widget pour qu'il utilise une nouvelle portée "page" plutôt que la portée du site
  • Retirer le droit "Voir" à "Membre du site" sur le widget "Document" de telle sorte que seuls les administrateurs le voient sur la page
  • Déposer les images à afficher sur la page dans ce widget
  • Ouvrir les images pour en récupérer l'URL d'affichage
  • Insérer les images par leur URL dans les contenus web de la page