Gestion des images
Mode d’emploi pour publier une image
Taper le texte et arrivé à l’emplacement où on veut l’image, sans oublier d’aller à la ligne, cliquer sur les 3 petites images à droite de la barre des styles.
La fenêtre d’Image Manager s’ouvre.
Chargement de la photo
Dans la fenêtre il y a une série de dossiers, et quelques photos “en vrac”. Il est préférable de choisir des dossiers pour mettre les images, sinon ça va être vite désordre.
Si besoin, pour créer un nouveau dossier (par ex. un dossier “poneys” dans le dossier “poney_club”), ouvrir le dossier poney_club et cliquer sur l’icone avec le dossier et l’étoile à droite.
Donc on ouvre le dossier choisi, ici poney_club.
Il n’y a pas encore d’image dans ce dossier.
Clic sur Parcourir, ligne Upload. Une fenêtre s’ouvre pour choisir un fichier.
Clic sur Upload
L’image se charge sur le serveur
La vignettte s’affiche, en dessous les dimensions en nb de pixels (largeur x hauteur). La poubelle supprime l’image et le crayon permet de la modifier.
Ici, plusieurs possibilités :
- la photo est au format souhaité (photo réduite avant envoi, ou photo mise au format précédemment) : pour un bon affichage dans la colonne centrale du site, une largeur de 400 pixels est bonne (taille des copies d’écran dans cette page)
- la photo est à un format un peu plus grand, par exemple 600 pixels
- la photo est nettement plus grande que le format souhaité
Dans les deux premiers cas, on peut sauter l’étape suivante de mise à la taille en editant la photo.
Mise à la taille de la photo
Clic sur le crayon
La fenête d’édition s’ouvre
La première icône coupe (recadre) l’image la deuxième modifie la taille
on entre la largeur voulue : 400 pixel, la hauteur s’ajuste automatiquement si la case est cochée. Cliquer sur la case OK verte.
Clic sur Save pour afficher l’écran d’enregistrement de la modif.
On peut éventuellement changer le nom du fichier. Choisir le format d’enregistrement dans le menu déroulant (JPEG High est bien), cliquer sur le signe OK.
L’image est maintenant enregistrée à la nouvelle taille. Elle n’efface pas l’image de départ.
On voit maintenant les deux versions (si ce n’est pas le cas, cliquer sur “Refresh” en bas) : originale (1200 pixels) et la nouvelle (400 pixels). On peut éventuellement supprimer la plus grande.
Intégration de la photo à l’article
Maintenant que l’image est prête, on va l’intégrer dans l’article.
On clique une fois sur la photo pour la sélectionner.
Certaines cases se remplissent automatiquement, d’autres restent vides :
- Image file : référence du fichier (ne pas toucher)
- Alt / Title : titre (modifiable, c’est le texte qui apparaît dans la bulle quand on survole l’image avec la souris, ça peut aussi être utile dans l’indexation du site par les moteurs de recherche — ici on pourrait mettre Grand Haras)
- Style et Class ne sont utiles que pour faire référence à une mise en page différente, paramétrée dans le site
- Width et Height : Largeur Hauteur, se remplissent avec les dimensions de l’image. C’est là qu’on peut contraindre une image plus grande à prendre le format désiré. On aurait pu sélectionner l’image de gauche, et changer 1200 en 400, le résultat final aurait été bon, mais on demanderait ainsi à la page de charger une image plus lourde que l’usage qu’on en fait. De la même manière, on peut agrandir une image plus petite, mais attention à la pixelisation : la qualité ne sera pas terrible.
- V Space H Space : pour modifier les marges autour de l’image (laisser vide pour que les marges définies par défaut dans le site s’appliquent)
- Border : ajoute un filet autour de l’image
- Align : c’est ce qui va définir où va aller se placer l’image : à gauche avec du texte autour, ou le texte en dessous, au milieu, etc. Voir plus loin pour les différentes possibilités. Si on garde “Not Set”, la photo va faire ce qui est prévu dans le site (qui a programmé que les photos sont centrées ou non, etc. sauf indication contraire qu’on peut indiquer ici). Donc a priori, on ne change pas cette case, sauf à vouloir un résultat bien précis et différent de ce qu’il y a dans le reste du site.
- Insert As : menu déroulant pour choisir :
- Thumbnail with PopUp : une petite vignette est intégrée au texte, si on clique dessus, une grande image s’affiche dans une nouvelle fenêtre. Intéressant si on a une grande image qu’il faut voir dans le détail (photo de groupe…) ou que l’on veut donner à télécharger dans un grand format.
- Image : la photo au format précisé au-dessus s’intègre dans le texte
- Thumbnail with link to the image : si on clique, on passe à une page avec la photo
- Thumbnail : juste la vignette (pas de lien vers l’image plein pot)
- Link to the image : lien vers l’image seulement (par exemple si on veut qu’une image s’ouvre en cliquant sur un mot du texte)
Dans l’utilisation courante, si la photo est au format, la seule chose à changer est ce choix Insert as:
Clic OK. On retourne à l’article qui a maintenant la photo
Une fois publié :
La photo est alignée à gauche, comme le veut la mise en page par défaut du site.