Accueil du site officiel de Webécoles
 
 
» Documentation » Edition avancée » Afficher une image dans un article


Afficher une image dans un article
 

Préalable

  • L’image doit être libre de droit ou sa reproduction autorisée.
  • L’image doit être redimensionnée pour correspondre à l’affichage ou la mise en page attendue.
    • Dans le cas d’une image à insérer dans un article, sa largeur maximum doit correspondre à celle de la zone de texte de l’article soit 500 pixels. Lorsque plusieurs images sont alignées dans l’article, cette indication concerne la somme des largeurs.
    • Dans le cas d’une image à afficher en plein écran, sa largeur ne doit pas excéder la résolution moyenne d’un écran, soit environ 1000 pixels ; ce qui réduit le temps d’affichage de l’image et évite l’encombrement inutile du serveur.
  • L’image doit être enregistrée dans l’un des formats suivants :
    • GIF (extension .gif) ;
    • JPEG (extension .jpg) ;
    • PNG (extension .png).

- Joindre une image à un article

  1. Naviguer dans l’espace privé jusqu’à l’article concerné et cliquer sur son titre pour l’afficher.
  2. Cliquer sur le bouton « Ajouter un document » présent au pied de l’article.
  3. Dans le cadre « Ajouter une image ou un document » qui s’affiche, cliquer sur le bouton « Parcourir ».
  4. Sélectionner le fichier à joindre et cliquer sur « Ouvrir ».
    Remarques :
    • Il est possible de répéter l’opération pour sélectionner plusieurs fichiers.
    • Pour supprimer un fichier sélectionné, cliquer sur la croix qui précède le nom du fichier.
  5. Cliquer sur le bouton « Télécharger ».
    • Le fichier est alors copié de l’ordinateur vers le serveur. L’attente peut être plus ou moins longue selon la taille du fichier et la qualité de la connexion Internet.
  6. Éventuellement saisir un titre et une description à partir du bouton « Modifier » associer au document.
    • Pour saisir un titre, une description ou associer une vignette au document, cliquer sur le bouton « Modifier » associer au document (par défaut, le nom du fichier téléchargé est donné à l’image).
  7. Pour qu’une image s’affiche dans l’article, elle doit être insérée dans la zone de texte de l’article ou placée dans son portfolio.


    Remarques
    - La même procédure peut être appliquée lorsque l’article est en cours de modification à partir de la boîte « Ajouter une image ou un document » présente à gauche du formulaire d’édition de l’article.
    - Si des fichiers de taille importante ne peuvent être joints via cette procédure, contacter le webmestre du portail.
    - Des espaces, des points ou des caractères accentués dans le nom de fichier interdisent parfois son téléchargement. Dans une telle situation, renommer le fichier avant de le télécharger.
    - Il est nécessaire de supprimer les images jointes à un article avant de le supprimer. Pour supprimer une image, cliquer sur le bouton « Supprimer » présent dans la boîte de l’image.


- Insérer une image en taille réelle dans le texte de l’article

  1. Lorsque l’article est affiché au sein de l’espace privé, cliquer sur le bouton « Modifier cet article » présent en haut et en bas de l’article pour éditer son formulaire.
  2. En cliquant dans la zone de texte, positionner le curseur sur la ligne où insérer l’image.
  3. Dans la boîte de l’image présente à gauche du formulaire d’édition, double-cliquer sur l’un des 3 raccourcis associés pour le copier automatiquement dans la zone de texte.
    • <imgXX|left> pour placer l’image à gauche du texte.
    • <imgXX|center> pour centrer l’image sur la ligne de l’article.
    • <imgXX|right> pour placer l’image à droite du texte.
  4. Enregistrer l’article.
  5. Pour voir l’article en ligne, cliquer sur «  Voir en ligne » dans la boîte « ARTICLE NUMÉRO... » à gauche de l’article.

    Remarques :
    - Lorsque l’image a été déposée dans le portfolio, 2 raccourcis se substituent au raccourci initial <imgXX>. Sélectionner le raccourci <embXX> pour afficher l’image en taille réelle.
    - Le raccourci peut aussi être inséré par copier-coller.
    - Pour supprimer l’image, supprimer le raccourci dans la zone de texte et cliquer sur le bouton « Supprimer » présent dans la boîte de l’image.
    - Par défaut, le nom du fichier téléchargé est donné à l’image. Pour le remplacer, déplier la boîte de l’image téléchargée, modifier le contenu du champ « Titre du document » et cliquer sur le bouton « Enregistrer ».


- Placer l’image dans le portfolio de l’article

Il est possible de présenter une ou plusieurs images en portfolio, au pied de l’article, sous forme de vignette. En cliquant sur la vignette, l’image s’agrandit avec un effet de zoom. Une fonction diaporama est alors proposée pour afficher les autres images du portfolio.

  1. Afficher l’article au sein de l’espace privé sans l’éditer.
  2. Sous l’article, dans la boîte de l’image, cliquer sur le bouton « Déposer dans le portfolio ».
  3. Pour voir le portfolio en ligne, cliquer sur «  Voir en ligne » dans la boîte « ARTICLE NUMÉRO... » à gauche de l’article.

    Remarques :
    - La même procédure peut être appliquée lorsque l’article est en cours de modification à partir de la boîte de l’image présente à gauche du formulaire d’édition de l’article.
    - Lorsque le raccourci de l’image est inséré dans la zone de texte, la vignette de l’image n’est plus affichée en portfolio.
    - Lorsque l’image est placée dans le portfolio, 2 raccourcis à insérer dans la zone de texte se substituent au raccourci initial <imgXX>.


- Insérer une image dans le texte de l’article sous forme de vignette

Lorsque l’image est déposée dans le portfolio, elle peut être insérée dans le texte de l’article sous forme de vignette avec les mêmes propriétés que celle du portfolio.

  1. Afficher l’article au sein de l’espace privé et cliquer sur le bouton « Modifier cet article » présent en haut et en bas de l’article pour éditer son formulaire.
  2. En cliquant dans la zone de texte, positionner le curseur sur la ligne où insérer l’image.
  3. Dans la boîte de l’image présente à gauche du formulaire d’édition,
  4. Toujours dans la boîte de l’image, double-cliquer sur l’un des 3 raccourcis associés pour le copier automatiquement dans la zone de texte.
    • <docXX|left> pour placer la vignette à gauche du texte.
    • <docXX|center> pour centrer la vignette sur la ligne de l’article.
    • <docXX|right> pour placer la vignette à droite du texte.
  5. Enregistrer l’article.
  6. Pour voir l’article en ligne, cliquer sur «  Voir en ligne » dans la boîte « ARTICLE NUMÉRO... » à gauche de l’article.

- Insérer une image entre les mots d’une ligne de texte

Une image de petite taille peut être insérée entre les mots d’une ligne de texte (comme c’est le cas pour l’image de loupe dans les sections précédentes).

  1. Editer l’article et insérer un raccourci de l’image, <imgXX|...> ou <embXX|...>, comme décrit pour l’insertion en taille réelle
  2. Supprimer la 2ème partie du raccourci insérée dans la zone de texte ("|left", "|center" ou "|right"). Le raccourci est alors sous la forme : <imgXX> ou <embXX>.
  3. Enregistrer l’article.
  4. Pour voir l’article en ligne, cliquer sur «  Voir en ligne » dans la boîte « ARTICLE NUMÉRO... » à gauche de l’article.
 
 
Publié le vendredi 28 mars 2014
Mis à jour le samedi 29 mars 2014

 
 
 
Les autres articles de cette rubrique :
 
Publié le dimanche 24 mars 2013 par Alain Gonzalez
Mis à jour le lundi 25 mars 2013
 
Publié le dimanche 24 mars 2013 par Alain Gonzalez
Mis à jour le lundi 25 mars 2013
 
Publié le dimanche 24 mars 2013 par Alain Gonzalez
Mis à jour le lundi 25 mars 2013
 
Publié le dimanche 24 mars 2013 par Alain Gonzalez
Mis à jour le lundi 25 mars 2013
 
Publié le dimanche 24 mars 2013 par Alain Gonzalez
Mis à jour le lundi 25 mars 2013
 
Publié le dimanche 24 mars 2013 par Alain Gonzalez
Mis à jour le lundi 25 mars 2013
 
Publié le mercredi 27 mars 2013 par Alain Gonzalez
 
Publié le dimanche 24 mars 2013 par Alain Gonzalez
Mis à jour le samedi 30 mai 2015
 
Publié le dimanche 24 mars 2013 par Alain Gonzalez
Mis à jour le lundi 25 mars 2013
 
Publié le dimanche 24 mars 2013 par Alain Gonzalez
Mis à jour le lundi 25 mars 2013
 
Accueil du site     |     Mentions légales     |     Plan du site     |     Espace rédacteurs     |    Se connecter       |    
  161 articles  |  Nombres de visites : 10 aujourd'hui, 24 hier, 110 929 depuis le début, 21 en moyenne par jour (921 maximum)  | 7 visiteurs en ce moment