Bannière - Rognage sous WordPress

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.

Capture d'écran - Modification d'un fichier image sous WordPress

Juste en-dessous de l’image d’aperçu, notez la présence d’un bouton Modifier l’image.

Capture d'écran - Modification d'un JPEG sous WordPress
Remarquez la présence du 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

#1 – 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.

Capture d'écran - Rognage d'une photo sous WordPress

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 :

Regenerate Thumbnails

Plugin WordPress permettant de redimensionner des images déjà importés dans la bibliothèque de médias.

Taille : 173,4 KiB  •  Date : 3 décembre 2011 •  Hits : 1 319

#2 – 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.

Capture d'écran - Modification de l'échelle d'une photo

Lorsque vous êtes satisfait, cliquez sur Appliquer.

#3 – 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.

Crédits photo : Ddesign

17 commentaires

  1. 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.

  2. 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.

  3. 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

  4. 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

  5. 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…

  6. 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.

  7. 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

Laisser un commentaire