Déménagement de TimThumb à BFIThumb

TimThumb est depuis longtemps un script de redimensionnement d'image préféré des auteurs de thèmes WordPress. Mais, avec les nouvelles exigences de soumission de thèmes WordPress sur ThemeForest, nous devons dire au revoir à TimThumb..

Cet article vous apprendra comment transférer vos thèmes de TimThumb vers un nouveau script de redimensionnement d'image appelé BFIThumb..

BFIThumb est un projet open source disponible sur GitHub.

Pourquoi avons-nous utilisé TimThumb?

Avant que WordPress ait la capacité d'effectuer un redimensionnement d'image flexible, la seule option était d'utiliser des bibliothèques tierces telles que TimThumb. La bonne chose à propos de TimThumb était qu’il était doté de nombreuses fonctionnalités et qu’il était très facile à utiliser..

Vous n'avez pas besoin de faire beaucoup pour que cela fonctionne, vous devez simplement utiliser le script TimThumb en tant que votre src attribuer dans votre img marquez et transmettez l'image:

Avec ce simple changement, vous pourriez:

Redimensionner l'image
Recadrer une partie de l'image
Appliquer des filtres d'image comme les niveaux de gris et la teinte
Cache l'image créée pour une utilisation future

Ces fonctions nous ont permis de créer des images superbes qui ne se limitaient pas à de petites vignettes carrées..

Pourquoi nous ne pouvons pas utiliser TimThumb Anymore

Une des bonnes raisons est la faille majeure de sécurité dans TimThumb découverte et exposée dans la version 1.10. En un mot, il y avait un trou de boucle qui permettait à du code malveillant d'être exécuté sur les serveurs hébergeant un script TimThumb.

De nombreux sites ont été piratés pour cette raison, y compris certains des miens, ainsi que des utilisateurs de certains de mes thèmes. Bien que cela ait été corrigé dans les versions ultérieures de TimThumb, beaucoup de gens n'étaient même pas au courant de la faille de sécurité avant qu'il ne soit trop tard. Il appartenait aux auteurs de thèmes et aux propriétaires de sites de mettre à jour leurs thèmes ou les scripts TimThumb pour inclure le correctif..

À mon avis, le problème de cette débâcle n'était pas dû à la faille de sécurité elle-même, mais plutôt à la manière dont ce type de problème ne pouvait pas être facilement résolu à l'échelle mondiale. TimThumb étant un script tiers simple, il était difficile pour les utilisateurs de se procurer rapidement la mise à jour de sécurité, ou même d’être simplement averti qu’une faille de sécurité existait..

Si un défaut de sécurité de ce niveau était détecté dans le noyau WordPress, il serait probablement corrigé immédiatement par une mise à jour de sécurité WordPress rapide et la plupart des gens ne seraient même pas au courant du problème..

Cela dit, il serait peut-être préférable d’utiliser une fonction WordPress pour redimensionner notre image..

Nous devons donc supprimer TimThumb de nos thèmes WordPress. En tant qu’auteurs de thèmes sur ThemeForest, la raison la plus évidente est peut-être que TimThumb n'est plus autorisé avec la mise en œuvre des nouvelles exigences de soumission de thèmes WordPress d'Envato.

WP Image Editor à la rescousse… une sorte de

Heureusement pour nous, lorsque WordPress 3.5 a été publié, il a introduit la classe WP Image Editor. Cette classe a quelques fonctions de base pour la rotation, le recadrage et le redimensionnement des images. Nous avons maintenant un redimensionnement d'image intégré dans WordPress!

L’une des meilleures caractéristiques de la classe WP Image Editor est probablement prend en charge les bibliothèques GD et ImageMagick (contrairement à TimThumb qui ne supportait que GD). Cela signifie que nos thèmes peuvent prendre en charge davantage d'installations WordPress..

Voici comment vous utiliseriez le WP_Image_Editor classe:

 // Retourne une implémentation qui étend WP_Image_Editor $ image = wp_get_image_editor ('cool_image.jpg'); if (! is_wp_error ($ image)) $ image-> resize (400, 300, true); $ image-> save ('new_image.jpg');

WP Image Editor étendu

WP Image Editor est simple, mais manque un peu pour nos intentions. Vous aurez clairement besoin de créer votre propre fonction d'emballage pour ne pas avoir à utiliser un tas de code à chaque fois que vous souhaitez afficher une image redimensionnée..

Une autre chose à noter est que le wp_get_image_editor function n'accepte que le chemin du fichier image, vous devrez également ajouter à votre fonction wrapper une méthode pour le convertir en URL de votre image.

Outre la nécessité de créer une fonction wrapper, il existe quelques inconvénients à ce que le remplacement direct de TimThumb par le WP_Image_Editor classe:

Il ne peut effectuer que le redimensionnement, le recadrage et l'enregistrement des fichiers image
Pas de filtres d'image
Pas de cache d'image
Peut seulement redimensionner les images vers le bas et pas vers le haut
Les dimensions en largeur et en hauteur sont nécessaires pour effectuer un redimensionnement
L'utilisation diffère de TimThumb

Ce serait bien si nous avions quelque chose qui incorpore les fonctionnalités de la classe WP Image Editor et de TimThumb. C'est la raison pour laquelle j'ai créé le script BFIThumb.

Le meilleur des deux mondes: BFIThumb

Je voudrais vous présenter un nouveau programme de redimensionnement d’images nommé BFIThumb. BFIThumb a été conçu en tenant compte de ces points:

Utilisation WP_Image_Editor effectuer une manipulation d'image - L'utilisation de cette classe WordPress permet de réduire le nombre de bogues, car la majeure partie du processus n'est pas effectuée par notre propre code. Cela signifie que nous pouvons également fournir un redimensionnement pour les bibliothèques GD et ImageMagick..
Utilisation similaire à TimThumb - L’utilisation de TimThumb est idéale car il vous suffit de changer le src attribut de votre img Mots clés. Le chemin de l'image redimensionnée serait retourné par la fonction. Cela permet un code plus lisible et un temps de transition plus simple.
Capacités similaires à TimThumb - La possibilité d'appliquer des filtres d'image était l'un des arguments de vente de TimThumb. Puisque nous voulons une transition facile, il serait préférable que certains des filtres d'image couramment utilisés soient encore disponibles..

Comment ça marche

Le script s'étend WP_Image_Editor et ajoute plus de fonctionnalités.
Implémente un dispositif de redimensionnement plus souple permettant le redimensionnement en largeur ou en hauteur uniquement. Ceci est particulièrement utile dans les dispositions de maçonnerie, vous pouvez réduire la largeur des images tout en conservant le rapport de hauteur d'origine..
Les classes étendues implémentent certains filtres d'image trouvés dans TimThumb.
Met en cache les images traitées dans le dossier de téléchargement de WordPress pour un chargement plus rapide lors des prochains téléchargements de page.

Comment l'utiliser

BFIThumb a été conçu pour être similaire à l'utilisation de TimThumb. La fonction principale que vous devez appeler est bfi_thumb. Semblable à TimThumb, vous utiliserez cette fonction dans le src attribut de votre img Mots clés. Cette fonction prend une URL d'image avec un tableau de paramètres, puis renvoie l'URL de l'image traitée.

Voici l'utilisation de base de la fonction, décomposée pour expliquer ce qui se passe:

 // Inclure la bibliothèque require_once ('BFI_Thumb.php'); // Nos paramètres, font un redimensionnement $ params = array ('width' => 400, 'height' => 300); // Récupère l'URL de notre image traitée $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Imprimez notre tag img echo "";

Redimensionner et recadrer

Pour effectuer le redimensionnement et le recadrage, il vous suffit de définir les paramètres nécessaires:

 // Redimensionner uniquement par la largeur, la hauteur s'ajustera au bon ratio $ params = array ('width' => 400); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Redimensionne uniquement par la hauteur, la largeur sera ajustée au bon ratio $ params = array ('height' => 300); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Redimensionner par largeur et hauteur et rogner $ params = array ('width' => 400, 'height' => 300, 'crop' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params);

Filtres d'image

Les filtres d'image sont très utiles, et s'ils sont utilisés correctement, ils peuvent activer des effets sympas dans vos thèmes. Par exemple, le niveaux de gris Le filtre d'image peut être utilisé pour créer des images en noir et blanc qui deviennent colorées lorsqu'elles sont survolées..

J'ai aussi eu un usage pour le opacité filtrer lorsque j'ai besoin de rendre l'image d'arrière-plan opaque pour afficher un peu de la couleur d'arrière-plan.

 // Niveaux de gris $ params = array ('niveaux de gris' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Colorize $ params = array ('color' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Negate $ params = array ('negate' => true); $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Changer l'opacité (transforme votre image en un fichier PNG) $ params = array ('opacity' => 80); // 80% opaque $ image = bfi_thumb ('URL-to-image.jpg', $ params); // Paramètres multiples $ params = array ('width' => 400, 'height' => 300, 'niveaux de gris' => true, 'colorize' => '# ff0000'); $ image = bfi_thumb ('URL-to-image.jpg', $ params);

Conclusion

Dans cet article, nous avons appris à supprimer notre dépendance à TimThumb et à passer à une approche davantage axée sur WordPress afin de redimensionner les images à l’aide de BFIThumb. Avec cette approche, nous pouvons effectuer un redimensionnement d’image flexible et également utiliser certains des filtres d’image que nous avons aimés dans TimThumb..

Espérons que ce petit script puisse vous aider dans votre transition loin de TimThumb. Si vous avez des suggestions concernant de nouvelles fonctionnalités pour améliorer cette image, veuillez laisser un commentaire ci-dessous..

J'apprécie hautement vos commentaires, commentaires et suggestions.

Avec quoi remplacez-vous TimThumb? Utiliseriez-vous BFIThumb dans votre prochain thème WordPress? Laissez-moi savoir ce que vous pensez!

Code