Histoire Passion - Saintonge Aunis Angoumois

Accueil > Forum - Site - Divers > Tutoriel pour les rédacteurs > Tutoriel pour les rédacteurs - SPIP - Mettre une image dans un (...)

Tutoriel pour les rédacteurs - SPIP - Mettre une image dans un article

samedi 28 juillet 2007, par Pierre, 5667 visites.

Tutoriel illustré à l’usage des rédacteurs du site : pas à pas, la méthode pour insérer une image dans un article

Les étapes (en zone "privée") :

Etape 1 : mettre l’article en mode modification. Clic sur le bouton "Modifier cet article"
Etape 2 : sélectionner l’image à insérer. En cliquant sur "parcourir" vous ouvrez une fenêtre avec les répertoires de votre ordinateur. Choisissez l’image à insérer.

Important : la taille des images : Dans la plupart des cas une image de 550-600 pixels de large sera tout à fait suffisante pour remplir le corps de l’article en pleine page, sans texte ni à droite, ni à gauche de l’image.

Au-delà de cette taille, il y a risque de faire "éclater" la page avec des ascenseurs horizontaux du plus mauvais effet.

Pour une image "habillée" par du texte, une largeur de 350-400 pixels est suffisante.

La mise des images à la dimension voulue doit être faite avec un programme adapté à cet usage, avant le téléchargement.

Pour les utilisateurs habitués aux logiciels de traitement d’images,

- les images au format jpeg conservent leur qualité jusqu’à un certain niveau de compression. Il n’est donc généralement pas nécessaire d’utiliser des images de haute définition. Une définition moyenne permet d’accélérer l’affichage de la page et charge moins le serveur.

- les images au format gif et png permettent les transparences.

Dimensions de cette image (Titre)
210 pixels de large x 142 pixels de haut (description).

Cette image est en mode "left"Etape 3 : clic sur le bouton "télécharger" pour transférer une copie de l’image vers le serveur distant.

L’image téléchargée s’affiche en miniature.

Il est possible de saisir pour cette image un titre et une description ou un commentaire

Confirmer la saisie en cliquant sur le bouton "Enregistrer", dans ce cadre.

Cette image est en mode "left"

Etape 4 : choisir le mode d’habillage image/texte

- avec le mode "left", l’image se place à gauche du texte, et le texte "habille" la droite de l’image

- avec le mode "center", il n’y a aucun texte de part et d’autre de l’image

- avec le mode "right", l’image se place à droite du texte, et le texte "habille" la gauche de l’image

Cette image est en mode "right"
Elle fait 481 pixels de large.

Etape 5 : placer le code image dans le texte. Pour cela : ou bien saisir à la main, ou faire un copier-coller du code qui est à côté de l’image miniature. Autre méthode : placer le curseur clignotant à l’endroit du texte où l’image doit être insérée, puis faire un double-clic sur le code-image retenu.

L’image s’affichera dans la page à l’endroit où vous placez le code (ne pas oublier les crochets "<" et ">" au début et à la fin du code image, et le séparateur obtenu par [AltGr] et la touche [6] en haut du clavier.

Attention : si vous avez saisi un titre (et commentaire) pour l’image à l’étape 3, remplacer les lettres "img" par "doc", sinon le titre et le commentaire ne s’affichent pas.

Etape 6 : sauvegarder l’article
Cette image est en mode "center"

sinon, vous auriez fait tout cela pour rien.

Etape 7 : vérifier en ligne si tout va bien

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Se connecter
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Lien hypertexte

(Si votre message se réfère à un article publié sur le Web, ou à une page fournissant plus d’informations, vous pouvez indiquer ci-après le titre de la page et son adresse.)

Ajouter un document

Rechercher dans le site

Un conseil : Pour obtenir le meilleur résultat, mettez le mot ou les mots entre guillemets [exemple : "mot"]. Cette méthode vaut également pour tous les moteurs de recherche sur internet.