WordPress intègre des outils pour éditer vos images directement depuis le back-office : redimensionnement, rognage et rotation sont autant d’outils souvent méconnus des utilisateurs débutants.
Ce tutoriel vidéo aura donc pour objectif de vous faire découvrir une fonctionnalité bien pratique.
Je vous propose donc un tutoriel spécialement dédié aux débutants pour changer un peu. Aujourd’hui, pas de fonctions spéciales ou de boucles PHP, uniquement un article pour mettre en lumière certaines fonctionnalités de WordPress à côté desquelles passent bon nombre d’utilisateurs novices.
Édition d’un fichier image sous WordPress
L’ensemble des modifications de médias s’effectuent sous Médias puis Bibliothèque. Ouvrez donc une photo à modifier en cliquant sur son titre.
Juste en-dessous de l’image d’aperçu, notez la présence d’un bouton Modifier l’image.
A partir de là, il suffit de cliquer dessus pour atteindre les options de retouche intégrées à WordPress.
Retouches d’image sous WordPress
Rogner une image
La première étape consiste à tracer une zone de sélection directement sur l’aperçu de la photo. De cette manière, nous allons délimiter la zone à conserver.
Ceci fait, cliquez sur l’icône de rognage – le premier en partant de la gauche dans la barre d’outils.
Notez que vous pouvez délimiter la sélection en entrant directement les valeurs dans les champs prévus à cet effet sur le bloc de droite. Idem pour conserver la proportion de taille.
Personnellement, je pense qu’il est beaucoup plus simple d’agir directement sur la photo.
Techniquement, WordPress va générer un nouveau fichier image et conservera donc l’original de même que les 3 tailles par défaut (miniature, moyenne et large) – soit un total de 5 fichiers. Pour rappel, ces tailles d’images sont créées lors de l’importation et les valeurs sont définies sous Réglages puis Médias. Pour régénérer les images après une modification des dimensions, utilisez ce plugin :
-
Extension WordPress permettant de redimensionner des images déjà importés dans la bibliothèque de médias.
Redimensionner une image
Le deuxième outil intéressant concerne la mise à l’échelle d’une photo à la résolution de votre choix. Pour ce faire, cliquez sur Modifier l’échelle puis saisissez soit la largeur, soit la hauteur. Vous ne pouvez définir l’un et l’autre : WordPress conserve les proportions.
Lorsque vous êtes satisfait, cliquez sur Appliquer.
Autres options de retouche d’image
La barre d’outils propose également les options suivantes :
- Rotation : à gauche ou à droite ;
- Inversion : verticale ou horizontale ;
- Annuler / rétablir : pour éviter toute erreur de manipulation ;
De manière générale, il convient de cliquer sur Enregistrer après chaque modification puis de faire Mettre à jour le fichier.
Félicitations, vous venez de modifier avec succès votre fichier image. Vous serez donc en mesure de l’insérer dans vos pages de contenus.
Bonjour
Merci pour vos tutoriels.
Je travaille sur Customizr et dans chaque image il y a : titre, légende, description , ….
J’arrive à afficher la légende avec l’image mais je n’arrive pas à afficher ce que j’ai mis dans la description.
Y a t il un moyen pour le faire : cad afficher l’image avec sa description et si possible la légende et la description?
Merci
Bonjour, cela dépend du thème qui ne gère sans doute pas cela correctement.
Bonjour,
merci pour ces explications, par contre comment changer et mettre à jour une image ?
avec un site sans wordpress, il suffit de changer l’image par ftp et du moment qu’elle a le même nom ça marche automatiquement
avec wordpress cela ne fonctionne pas meme en important une image ayant le meme nom et je ne vois aucune option permettant de le faire
merci
WordPress stocke les fichiers dont les images dans le dossier /wp-content/uploads/. En général, des sous-répertoires par date (année puis mois) sont générés. De plus, des tailles d’images sont créées à partir du fichier image source. C’est donc une approche classique d’un système de gestion de contenu qui diffère de votre méthode initiale.
Ceci étant dit, il est aisé de supprimer une image à la une ou une image d’un contenu pour la renvoyer depuis le back-office. Qu’est-ce qui vous pose problème précisément ?
Bonjour,
Je souhaiterai rogner une image uploadé dans ma bibliothèque de média. Je clique sur l’image que je veux modifié, puis sur « modifier l’image » , ensuite je sélectionne grossièrement ce que je veux garder avec ma souris, et affine le résultat grâce à la barre latérale dans la partie « recadrage de l’image ». Puis je clique sur l’icône « rogner ». L’image se met à jour, je clique sur enregistrer… Et là mon image initiale réapparaît, plus aucune trace de mes modifications! QUelqu’un aurait une solution? Merci d’avance.
J’ai tou fait bien comme il faut mais le bouton « Rogner » ne s’allume pas :-((
bonjour, merci beaucoup pour ce tuto! Je souhaiterais changer l’angle de la photo mais pas à 90%, plutôt à +/-10%, est-ce possible sur WP? j’ai vu qu’il y a un codage style= rotante (xdeg) mais je ne sais pas où l’incorporer dans le css affiché par WP). Avez-vous des précisions à me donner?
Merci
Euh je ne suis pas certain d’avoir compris la question… par contre, tout ce qui touche au CSS doit s’opérer dans style.css du thème actif. 😉
Bonjour,
Sur mon wordpress tout neuf, installé sur OVH, je n’ai accès à aucune de ces fonction de modification d’image, en effet lors que j’appuie sur Modifier l’image il m’indique uniquement un bloc image avec un liens cassé, et lorsque je tente de la modifier tout de même l’erreur suivante apparais : « Impossible de charger l’image de prévisualisation. Veuillez recharger la page et réessayer. »
Malgré maintes et maintes réinstallations et vidages de base de données, cette fonction n’apparait toujours pas. Pourtant elle a été fonctionnelle au tout début.
En tout cas merci pour ce sujet.
Les installations OVH automatiques sont à proscrire si c’est votre cas.
Bonsoir, je commence sur WordPress et je ne trouve pas la fonction « rotation »… Ma photo reste à l’envers… Help please !
bonjour
moi j’ai une galery d’image sur on site et je sais pas comment remplacer ces images la sous wordpresse 3.7 mis a jour
merci
J’ai un peu galéré avant de comprendre. Intuitivement, on a envie de cliquer sur enregistrer après avoir rogné (recadrer)… et ça ne marche pas ! Car en fait il faut alors cliquer sur l’icone de rognage qui s’allume dès qu’on intervient sur l’image. Après une première confirmation de la modif en cliquant sur cette icone (bouton), vous pourrez cliquer sur enregistrer.
Se n’est pas intuitif, mais voila…
Oui pas très intuitif de prime abord, je suis d’accord avec vous.
Merci Teo pour cette intervention judicieuse car même si l’article ici présent est bien, il fallait insister sur le fait de :
1/ Tracer la zone à recadrer
2/ Cliquer sur l’icône de crop
3/ Enregistrer seulement !
Bonsoir,
J’ai le même problème que Pierre : après avoir renseigner les nouvelles dimensions de la photo, je clique sur sauvegarder et rien ne se passe. Après vérification, les dimensions sont restées les mêmes. Qui peut m’aider ?
Merc
Regarder les valeurs des réglages /Médias/Images : par défaut, l’image est affichée en taille moyenne dans l’article.
merci pour le tuto et le plugn mais perso j’ai jamais compris pourquoi lorsque l’on clique sur Save une fois qu’on à selectionné un crop sur l’image il ne se passe rien, aucun message n’apparait et ou et comment l’image est enregistrée, sous un autre nom…?
vous n’expliquez pas cela c’est dommage…? pour moi ce Edit d’image est boguée…
merci
Il est clair que l’outil n’est pas facile à prendre au premier abord. L’article est donc le bienvenue !
Le manque d’ergonomie est aussi explicable par le fait que cette fonctionnalité est récente. D’ailleurs, la version 3.5 mise beaucoup sur toute l’interface d’ajout de médias et de galerie dans WordPress.
Et si tu entres 1 et 1 dans proportion de taille. Avec la touche Maj enfoncée tu peux garder le ratio en jouant sur la taille par l’angle.
Je trouve juste la manière de valider le recadrage pas claire du tout pour un débutant.
Elle n’est pas évidente au premier abord d’où l’objet de ce tutoriel pour aider un peu. 🙂
Exactement ce que je cherchais, merci !! 🙂
Je rajouterai un plugin genre Post Thumbnail Editor pour bien maîtriser l’affichage des miniatures…
Je rajoute le lien pour ceux qui seraient intéressés : http://wordpress.org/extend/plugins/post-thumbnail-editor/screenshots/ 😉