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 : 769Ce tutoriel vous aura donc appris à vous passer du script timthumb.php et à utiliser les fonctions natives de WordPress. Des questions ?
Podcast: Télécharger (197.1MB)
A propos de l'auteur
Aurélien Denis est le fondateur du projet WordPress Channel proposant tutoriels et podcasts librement téléchargeables. En 2010, il fonde Neticpro, une agence Web spécialisée WordPress. Il est aussi co-fondateur du site Protuts.net (tutoriels PC/Mac/Linux) et community manager pour l’Imagine Cup 2011/2012, une compétition mondiale organisée par Microsoft.
WordPress 3.5 – Un CMS pour créer et gérer blogs et sites Web
RT-Theme 17, traduction française
Maven Hosting, 12 mois d’hébergement
Themetick, traduction française
Ce sujet tombe vraiment à pic, voila plus de 2 semaines que je cherche une façon de créer des miniatures sans timthumb, suite à la découverte de la faille.
Merci à toi
De rien !
Super article ! En plus avec un podcast ça permet de mieux illustrer ses propos !
Pour information il existe un petit plugin : simple image sizes qui permet de créer des tailles d’images à la volée et de les regénérer directement depuis la page des médias !
Sur le repository :
http://wordpress.org/extend/plugins/simple-image-sizes/
Ça peut être très utile en environnement de développement
Mort à timthumb !
Merci de l’info !
Personnellement j’utilise custom image sizes de Filosofo qui s’utilise comme Timthumb directement dans le thème.
http://wordpress.org/extend/plugins/custom-image-sizes/
Personnellement, je conseille de compléter avec http://www.li-an.fr/wpplugins/plugins/post-thumbnail-editor/ qui permet de choisir son cadrage de miniature. Du coup, les miniatres embarquées sont bien plus intéressantes que TimThumb.
Oui ce script est très pratique, à utiliser avec Dynamic Image Resizer http://wordpress.org/extend/plugins/dynamic-image-resizer/ qui génère l’image à la demande de l’utilisateur et pas forcément lors de l’upload ! ( gain de place notable ).
Par contre avec post thumbnail editor, en régénérant les tailles d’images les tailles qui ont été recadrées, elles vont être écrasées lors de la régénération !
Merci ! C’est exactement ce que je recherche… mais en beaucoup mieux ! Je vais l’essayer.
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 !)
Passes le paramètre crop sur false pour voir… pour moi ce n’est pas un bug.
Merci, mon soucis était le redimensionnement des photos déjà publiées
pratique mais ne s’applique sur les images uploadées via le module « featured image », non ?
Comment appliquer ça sur n’importe quelle image ?
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.
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.
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.
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
Bonjour,
Y-a-t-il la possibilité de combiner cette fonction native avec catch_that_image() ?
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
http://artatm.com/2010/09/how-to-get-the-thumbnail-of-the-first-image-from-the-post-and-display-it-in-wordpress/
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 « http://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
Cet article présente une méthode pour se passer de timthumb… si vous utilisiez ce script et que le plugin a effectué une mise à jour alors oui cela peut poser problème.
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.
@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 ?
Hum je ne comprends pas vraiment à quoi tu fais référence…
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.
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 ?
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
Un truc comme cela devrait fonctionner (pas testé) :
< ?php if ( has_post_thumbnail() ) {
‘ ;
the_post_thumbnail( 'taille-perso' );
} else {
echo '
?>
bonjour,
peut-on ajouter la fonction caption a une image?
Hors-sujet : pourquoi ne pas utiliser Disqus pour les commentaires ?
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/
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.
Oui c’est une excellente ressource que ce tutoriel de ScreenFeed !
bonjour. Savez vous s’il est possible d’insérer directement une image dans une page. ceci sans miniature clickable. Juste la photo a sa taille? par exemple comme sur ce site : http://www.cameronrad.com/works
merci d’avance!
Oui, il suffit de ne pas définir de cible sur l’image insérée.
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.
Justement, il faut utiliser les fonctionnalités de WordPress et surtout pas timthumb pour cela.
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
Les thèmes génère très souvent des tailles supplémentaires…