mardi 25 février 2020
B2i
SPIP - Edition de contenus

 

Directeur de publication :
Baptiste Caroff
Webmestres : Animateurs TICE

8 visiteurs en ce moment


Insérer une image
 

Avertissement

Pour associer une image à un article ou l’insérer dans le corps du texte, il est nécessaire de la préparer.

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

    Remarques :
    - Le nom du fichier doit comporter une extension indiquant son format (.gif, .jpg ou .png) pour être reconnu par le système.
    - Toute reproduction d’image doit être libre de droit pour être publiée .
    - Il existe des solutions gratuites pour traiter les images.
    . Soit en installant un logiciel comme Photofiltre.
    . Soit en effectuant les traitements en ligne comme sur picnic ou Pixlr Comment faire ?.

- Associer une image à un article en portfolio

Il est possible de présenter une ou plusieurs images en portfolio, au pied de l’article, sous forme de vignette. L’image s’affiche en plein écran en cliquant sur la vignette.

Remarque : Lorsque le plugin Thickbox est installé sur le site, l’image s’affiche avec un effet de zoom. Une fonction diaporama est alors proposée pour afficher les autres images du portfolio.

  • Afficher l’article au sein de l’espace rédacteurs sans l’éditer.
  • Sous l’article, dans le cadre "Joindre un document", cliquer sur le bouton "Parcourir" pour rechercher et sélectionner l’image à associer.
  • Cliquer ensuite sur le bouton "Télécharger" pour copier l’image sur le serveur qui héberge le site. Après téléchargement, une vignette de l’image s’affiche au pied de l’article sur le site public.

    Remarques :
    - Pour supprimer l’image, cliquer sur le petit triangle qui précède le nom de l’image dans le portfolio et, dans la boîte qui se déplie, cliquer sur "Supprimer ce document".
    - 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" qui apparaît.


    Voir l’exemple de portfolio au pied de cet article.


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

  • Afficher l’article au sein de l’espace rédacteurs.
  • Cliquer sur le bouton "Modifier cet article" présent en haut et en bas de l’article pour éditer l’article.
  • Dans la boîte "Ajouter un document" présente à gauche du formulaire d’édition, cliquer sur le bouton "Parcourir" pour rechercher et sélectionner l’image à insérer.
  • Cliquer ensuite sur le bouton "Télécharger" pour copier l’image sur le serveur qui héberge le site. Après téléchargement, une boîte au nom de l’image s’affiche au dessous de la boîte "Ajouter un document".
  • En cliquant dans le corps du texte, positionner le curseur sur la ligne où insérer l’image.
  • Dans la boîte de l’image, double-cliquer sur l’une des 3 balises affichées pour l’inclusion directe :
    - <emb138|left> pour placer l’image à gauche du texte ;
    - <emb138|center> pour centrer l’image sur la ligne de l’article ;
    - <emb138|right> pour placer l’image à droite du texte.

    Remarques :
    - Le même résultat est obtenu en utilisant la boîte "Ajouter une image". Mais celle-ci ne propose pas le choix d’inclusion "directe" ou "vignette" sans retélécharger le fichier image.
    - Pour supprimer l’image, cliquer sur le petit triangle qui précède son nom dans la boîte de l’image téléchargée pour la déplier et cliquer sur "Supprimer ce document". Supprimer aussi la balise <emb138|...> insérée dans l’article.
    - 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".


    Exemple :
    JPEG - 83.2 ko
    image4

Remarque : Lorsque la balise de l’image est insérée dans la zone de texte, l’icône de l’image n’est plus affichée en portfolio.

- Insérer une image en vignette dans l’article

L’image est insérée dans l’article sous forme de vignette. En cliquant sur la vignette, l’image s’affiche en taille réelle.

  • Afficher et éditer l’article au sein de l’espace rédacteurs.
  • En cliquant dans le corps du texte, positionner le curseur sur la ligne où insérer la vignette de l’image.
  • Dans la boîte de l’image téléchargée, double-cliquer sur l’une des 3 balises affichées pour l’inclusion de la vignette :
    - <doc138|left> pour placer l’image à gauche du texte ;
    - <doc138|center> pour centrer l’image sur la ligne de l’article ;
    - <doc138|right> pour placer l’image à droite du texte.
    La balise s’insère dans la zone de texte.

    Remarque :
    - Pour supprimer l’image ou modifier le nom qui lui est associé, consulter le chapitre relatif à l’insertion en taille réelle.


    Exemple :
    JPEG - 587.8 ko
    charte
Avec la sélection de la balise <doc138|right> l’image est ici placée à droite du texte sous forme de vignette. Cliquer sur la vignette pour l’agrandir.

Remarque : Lorsque la balise de l’image est insérée dans la zone de texte, l’icône de l’image n’est plus affichée en portfolio.

- Insérer une icône dans le corps du texte

Une image de petite taille peut être insérée sous forme d’icône entre les mots d’une ligne de texte.

  • Afficher et éditer l’article au sein de l’espace rédacteurs.
  • En cliquant dans le corps du texte, positionner le curseur sur la ligne où insérer l’icône.
  • Dans la boîte de l’image téléchargée, double-cliquer sur n’importe laquelle des 3 balises affichées pour l’inclusion de la vignette. La balise s’insère dans la zone de texte.
  • Supprimer la 2ème partie de la balise insérée dans la zone de texte ("|left", "|center" ou "|right").
Balise modifiée affichée dans la zone de saisie :
Le smiley <emb140> est inséré entre les mots du texte.
Affichage sur le site public :
Le smiley
GIF - 687 octets
oui

est inséré entre les mots du texte.


Remarques :
- Pour insérée une vignette (possibilité de cliquer pour agrandir l’image) entre les mots d’une ligne de texte, utiliser l’une des 3 balises affichées pour l’inclusion directe (<doc138>).
- Pour supprimer l’image ou modifier le nom qui lui est associé, consulter le chapitre relatif à l’insertion en taille réelle.
- Astuce : pour que l’image n’apparaisse pas dans le portfolio, l’associer à un autre article qui restera en cours de rédaction.


- Activer un lien hypertexte à partir d’une image

Une image peut devenir un bouton pour activer un lien hypertexte.

  • Afficher et éditer l’article au sein de l’espace rédacteurs.
  • En cliquant dans le corps du texte, positionner le curseur sur la ligne où insérer l’image.
  • Dans la boîte de l’image, double-cliquer sur l’une des 3 balises affichées pour l’inclusion directe.
  • Supprimer la 2ème partie de la balise insérée dans la zone de texte ("|left", "|center" ou "|right").
  • Sélectionner la balise où ancrer le lien (<emb140>).
  • Cliquer sur le bouton "Transformer en lien hypertexte" de la barre d’outils . Une fenêtre s’ouvre pour la saisie de l’adresse.

    Remarque : Si l’ouverture de cette fenêtre requiert une autorisation (une barre d’alerte s’affiche en haut de la page), la donner en cliquant sur la barre d’alerte et cliquer à nouveau sur le bouton "Transformer en lien hypertexte" de la barre d’outils.
  • Entrer l’adresse du site externe dans la fenêtre de saisie.
  • Terminer cette adresse par les caractères "#B#" pour que la page s’ouvre dans une nouvelle fenêtre à partir du site public.

    Remarque : Pour que le raccourci "#B#" fonctionne, le plugin Beespip doit être installé sur le site. Si ce n’est pas le cas, ne pas insérer ces caractères.
Texte affiché dans la zone de saisie :
Cliquer sur le smiley [<emb140>->http://fr.wikipedia.org/wiki/Smiley] !
Affichage sur le site public :
Cliquer sur le smiley
GIF - 687 octets
oui

 !

Portfolio

Images extraites de la charte d’usage des TICE

 
image1
image1
Fichier JPEG - 82.3 ko
image2
image2
Fichier JPEG - 84.6 ko
image3
image3
Fichier JPEG - 84.6 ko
 

SlisBaba : Utilisation basique du Slis
Fichier PDF - 1.2 Mo

Exemple de document guide visant à construire un cahier des charges pour la publication d’un site Web
Fichier RTF - 74 ko
 
 
Publié le samedi 28 novembre 2009
Mis à jour le vendredi 15 octobre 2010

 
 
 
Les autres articles de cette rubrique :
 
Publié le samedi 5 décembre 2009
Mis à jour le mardi 11 mai 2010
 
Publié le jeudi 19 novembre 2009
Mis à jour le vendredi 11 décembre 2009
 
Publié le jeudi 19 novembre 2009
Mis à jour le vendredi 4 décembre 2009
 
Publié le jeudi 19 novembre 2009
Mis à jour le vendredi 4 décembre 2009
 
Publié le mardi 11 mai 2010
 
Publié le jeudi 19 novembre 2009
Mis à jour le mardi 11 mai 2010
 
Publié le samedi 21 novembre 2009
Mis à jour le vendredi 4 décembre 2009
 
Publié le vendredi 20 novembre 2009
Mis à jour le vendredi 29 janvier 2010
 
Publié le vendredi 20 novembre 2009
Mis à jour le mardi 11 mai 2010
 
Publié le samedi 21 novembre 2009
Mis à jour le vendredi 11 décembre 2009
 
 
Mentions légales     |     Plan du site     |     Espace rédacteurs     |    Se connecter       |    
  Mis à jour le mardi 22 octobre 2019  |  571 articles  |  Nombres de visites : 30 aujourd'hui, 43 hier, 754 927 depuis le début, 60 en moyenne par jour (62 377 maximum)