Comment redimensionner / rogner une image sous WordPress sans timthumb.php ?

timthumb.php est sans doute l’un des scripts PHP les plus populaires sous WordPress. Il permet de rogner et de redimensionner à la volée vos images. Basé sur un système de cache, ce script n’en reste pas moins gourmand en CPU et présente de graves failles de sécurité… alors même que WordPress propose en natif des fonctionnalités de gestion des images similaires !

Le script timthumb.php permet un redimensionnement à la volée de vos images. Très populaire, ce script est devenu au fil des années une fonctionnalité de référence dans les thèmes premium jusqu’au jour où une faille de sécurité fut découverte.

Étape n°1 – Création d’une taille personnalisée

La première étape consiste à modifier votre fichier functions.php localisé dans le dossier /wp-content/NOM_DE_VOTRE_THEME/ ou de passer par le menu Apparence puis Editeur.

Rajoutez ensuite les lignes de code suivantes :

// Taille image perso

if ( function_exists( 'add_image_size' ) ) {
	add_image_size( 'taille-perso', 300, 100, true );
}

Détaillons les 4 paramètres disponibles de la fonction générique <?php add_image_size( $name, $width, $height, $crop ); ?>

  • $name : indiquez le nom du nouveau format. Ce nom permettra d’indiquer la taille d’image à insérer dans votre thème de la même manière que les tailles miniatures, moyenne, grande et originale ;
  • $width : largeur maximale de l’image une fois redimensionnée (optionnel) ;
  • $height : hauteur maximale de l’image une fois redimensionnée (optionnel) ;
  • $crop : rogner ou non l’image. Le paramètre False aura pour effet d’effectuer un redimensionnement proportionnel alors que le paramètre True effectuera un rognage centré (on zooms sur le centre de l’image) ;

Étape n°2 – Utiliser la nouvelle taille d’image dans votre thème

De la même manière que pour les miniatures de WordPress – que vous utilisez avec le module Image à la une, il nous faut indiquer dans le thème le nom de la nouvelle taille que nous venons de créer.

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'taille-perso' ); } ?>

Bien entendu, si votre thème utilise déjà les miniatures, il suffit de rechercher cette fonction et de spécifier le nouveau nom.

Étape facultative – Régénérer les tailles d’images

En créant une nouvelle taille d’image, les médias déjà importés sous WordPress ne disposeront pas de cette nouvelle taille. Les fichiers supplémentaires étant créés à l’importation et pas à la volée comme timthumb.php ce qui est nettement plus performant au passage.

Rassurez-vous il existe un très bon plugin prévu pour cela que vous pouvez télécharger ici-même :

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 990

Ce tutoriel vous aura donc appris à vous passer du script timthumb.php et à utiliser les fonctions natives de WordPress. Des questions ?

41 commentaires

  1. remi

    Hello, merci pour l’article. J’utilise cette méthode mais parfois rien ne se passe comme prévu. Par exemple si je prend une image de type carré et que je veux l’afficher sous forme de rectangle avec donc un crop de l’image ca ne fonctionne pas. L’image est bel et bien recadrée ) à la largeur indiquée, mais la hauteur est proportionnelle. Donc ma miniature reste carrée au lieu d’être rectangle comme je l’aurais souhaité. Avez-vous le même soucis, ou mieux… une solution ? Merci !

    le code utilisé est celui-ci:

    if ( has_post_thumbnail() )
    {
    $default_attr = array(
    ‘src’ => $src,
    ‘class’ => « attachment-$size »,
    ‘alt’ => trim(strip_tags( $attachment->post_excerpt )),
    ‘title’ => trim(strip_tags( $attachment->post_title )),
    );
    the_post_thumbnail( ‘dossier_single’ );
    }

    add_image_size( ‘dossier_single’, 698, 250, true);

    (donc si vous m’avez suivi, la valeur 250 n’est pas respectée !)

  2. Sébastien | WordpressDesigner

    pratique mais ne s’applique sur les images uploadées via le module « featured image », non ?
    Comment appliquer ça sur n’importe quelle image ?

    1. Aurélien Denis auteur de l’article

      Je ne connais pas de méthode pour les tailles d’images par défaut (bien que cela doit pouvoir se faire).

      Il te faut créer une nouvelle taille et régénérer les miniatures avec le plugin au besoin.

      1. Sébastien | WordpressDesigner

        on s’est mal compris je crois.
        Je disais justement que ça ne s’applique que sur les miniatures (les images à la une).
        Et je me demandais si il etait possible d’appliquer le resize de wordpress sur n’importe quelle image comme on peut appliquer timthumb sur n’importe quelle image et pas seulement sur les images à la une.

        1. Aurélien Denis auteur de l’article

          Et bien, les tailles d’images sont présents lors de l’importation d’une image… l’étape 2 concernant les miniatures n’est utile que pour les personnes désireuses d’afficher une image spécifique dans leur thème.

  3. Sébastien | WordpressDesigner

    ah oui pardon je vois ce que tu veux dire. Tu as raison. mais ma demande est plus sppécifique en fait. Je me demandais si il serait possible d’appliquer le script de resize propre à wp sur une image qui ne serait pas uploadée via le manager wp

    1. Anthony

      De plus, la fonction cath_that_image() vous la mettriez plutôt dans functions.php ou dans un plugin de fonctions (ref à votre article) ?
      Les dimensions sont directement lié au thème alors que la récupération de l’image ne l’est pas forcément

  4. Info2tele

    Bonjour,

    Gros problème : plus aucune image ne s’affiche sur la home de mon site (www.info2tele.com). Je ne sais pas ce qui s’est passé.

    Le soucis est arrivé après que j’ai utilisé le plugin « timthumb-vulnerability-scanner » pour mettre à jour le script.

    Quelqu’un a-t-il une idée ?

    Autre question : je suis tombé sur cet article « https://wpchannel.com/comment-redimmensionner-rogner-image-wordpress-timthumb-php/ ». J’aimerais mettre en place ce système mais je me demande si ce n’est pas trop compliqué…

    À vous lire

      1. info2tele

        Merci pour la réponse.
        Je voudrais me passer de timthumb. Comment déactiver le script et surtout installer vos lignes de code ?
        Je suis un béotien en matière de code…
        Actuellement, quand j’édite un article, j’upload une image et tout se passe en automatique (image dans le slider, et miniatures sur la home). Pour l’instant, dans la page article, je n’ai pas de problème.
        Merci pour le coup de main.

  5. Olivier C

    @Aurélien : « Des questions ? »

    Oui : je cherche une manière de cadrer l’image au chargement à partir de l’admin, tel que le proposent certains thèmes, comme Twenty Eleven. Cette fonction est vraiment top. Le problème, c’est que je n’arrive pas à isoler le code dans functions.php.

    Quelqu’un aurait-il déjà isolé et utilisé ce code ?

      1. Olivier C

        Je crois que le thème Twenty Ten a aussi cette fonction : au chargement de l’image, on peut recadrer l’image afin d’optimiser le rendu de celle-ci. Ce qui évite d’être obligé de passer par un logiciel de retouche d’image avant de les envoyer vers le site si l’on souhaite recadrer les images.

        Dans l’idée : le plugin post-thumbnail-editor possède cette fonction.

        1. noaneo

          bonjour,
          après avoir insérer une image, avez vous cliquer l’aperçu de la miniature, sur le bouton « modifier l’image » pour ainsi recadre l’image ?

  6. skoop

    Hello et bravo pour tt site. Je voulais savoir si il y avait une possibilité d’afficher une image par défaut au cas ou l’image à redimensionner était inexistante ?

    merci

  7. Olivier C

    Noaneo a écrit : « après avoir insérer une image, avez-vous cliqué l’aperçu de la miniature, sur le bouton « modifier l’image » pour ainsi recadrer l’image ? »

    Oui. Mais cela ne marche pas pour les coupes spécifiques que l’on peut créer dans fonctions.php. Seul les trois coupes de base de WordPress peuvent être appelées.

    Si l’on veut du sur mesure il faudra, soit passer par le plugin auquel je faisais allusion plus haut, soit faire des modifs’ en dur grâce à ce tuto :

    http://www.screenfeed.fr/blog/davantage-tailles-images-dans-administration-wordpress-0705/

    1. noaneo

      bonjour,
      Quelle coupe spécifique ?
      il m’est arrivé de recadrer une image, puis cocher thumbnail et appuyer sur la touche « enter » de mon clavier, et l’image fut recadrer.

  8. Wolf™

    Bonjour, mon problème avec timthumb est de pouvoir sauvegarder l’image générée la première fois afin de ne plus avoir à le faire, en testant par exemple si le fichier est déjà présent. Je n’ai pas encore la solution à ce problème.

  9. francenetinfost

    bonjour , je cherche moi pour un site d’information à empêcher wordpress de créer d’autre vignette que la photo uploader ( dans média j’ai déja mis tout a 0 dans les tailles)

    merci pour vos infos le webmaster

  10. Frédéric

    Bien le bonjour a tous !
    Je recherche à faire apparaître mais image poster dans mes commentaire, car nous avons mis en place un site qui permet au gens de mettre leur commentaire avec une photo ou une image.
    Dans l’administrateur je n’arrive pas à installer une solution qui permet de voir les image qui son attacher au commentaire, cela me permet de voir l’image ajouter au commentaire et suite au visuel de cette image de l’accepter ou refuser l’ajout du comme avec l’image.

    Merci d’avance pour votre réponse !

    Cordialement.
    fred

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX