WordPress 3.9 est sorti avec beaucoup de puissance supplémentaire sous le capot. Une nouvelle fonctionnalité impressionnante parmi tant d'autres, est la possibilité supplémentaire de contrôler maintenant la position de recadrage des images téléchargées dans WordPress – c'est vraiment astucieux !!

Avant de poursuivre, un grand merci à Brad Touesnard qui a fait cette contribution impressionnante qui a maintenant été incluse dans le noyau de WordPress ! J'ai pensé que ce serait une excellente occasion non seulement d'élaborer sur la façon de tirer parti de cette nouvelle fonctionnalité, mais aussi de parcourir et de bien comprendre l'ensemble de la portée de cette fonction.

Le tout début – Ajouter ou personnaliser des tailles d'image

Par défaut WordPress génère 3x versions supplémentaires de votre image. Une version ‘Miniature', une ‘Moyenne' et une ‘Grande'. La taille de l'image d'origine téléchargée est appelée la version “complète”.

Personnalisation des valeurs par défaut

Vous pouvez écraser les valeurs par défaut de chacune de ces tailles de recadrage assez facilement. Vous pouvez soit aller à votre Tableau de bord WordPress, Paramètres >> Médias et modifiez les valeurs là-bas ou vous pouvez le faire via votre fichier de fonctions de thème ou de plugin comme ceci :

update_option('thumbnail_size_w', 250);
update_option('thumbnail_size_h', 250);
update_option('thumbnail_crop', 1);

Ajout de tailles supplémentaires

Vous pouvez rapidement et facilement placer cette fonction dans votre fichier de fonctions de thème ou de plugin :

add_image_size( $name, $width, $height, $crop );

Cela finirait par ressembler à ceci:

add_image_size( 'homepage-thumb', 250, 250, true );

Recadrage dur normal

Pointe: N'oubliez pas de donner à chaque taille d'image supplémentaire son propre nom unique ;-).

Tout ce que vous devez savoir se trouve via le Codex WordPress.

Un peu de magie WordPress 3.9+ – Contrôle de la position du recadrage

Le paramètre $crop n'était auparavant qu'une valeur booléenne, vraie ou fausse. Soit un recadrage proportionnel doux ou un recadrage dur s'il est défini sur vrai (continuez à lire plus bas pour voir la différence entre un recadrage dur et doux). Cependant, vous pouvez désormais utiliser un tableau pour spécifier le positionnement de la zone de recadrage (x_crop_position, y_crop_position). J'aime les images recadrées à partir du centre, donc par exemple votre fonction pourrait ressembler à ceci maintenant :

add_image_size( 'homepage-thumb', 250, 250, array( 'center', 'center' ) );

Recadrage dur sélectionné par l'utilisateur

Le paramètre $crop accepte toujours les valeurs vrai/faux et, selon Brad, est entièrement rétrocompatible. La syntaxe est identique à celle de la propriété CSS background-position , elle est donc familière aux concepteurs et aux développeurs, mais les voici en tout cas par souci de clarté.

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

Alors je l'ai recadré, maintenant comment l'utiliser ?

La bonne nouvelle… c'est exactement la même chose !! Pour une ventilation complète, comme toujours, regardez le Codex WordPress. Voici un rappel dans tous les cas. Pour appeler cette image personnalisée dans votre thème ou plugin. Dans l'exemple que nous avons utilisé, voici comment :

the_post_thumbnail('homepage-thumb');

ou…

wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'homepage-thumb') );

Mais qu'en est-il de toutes mes images existantes ?

Comme vous le savez probablement, les tailles de recadrage sont parcourues et générées au moment de votre téléchargement. Cela signifie maintenant qu'après avoir utilisé cette nouvelle fonctionnalité en ajoutant notre position de recadrage personnalisée ou en modifiant/ajoutant une nouvelle taille de recadrage, il nous reste maintenant ce qui a été généré au moment du téléchargement et aucune de ces nouvelles versions d'image n'est disponible pour nous, pas cool!

Aaah mais attendez .. Heureusement, il y a beaucoup de gens intelligents et géniaux dans la communauté WordPress pour sauver la journée, voici le plugin de régénération des vignettes. Ce plugin existe depuis longtemps, c'est fantastique ! Il parcourra toutes vos images téléchargées existantes et régénérera toutes les nouvelles tailles d'image que vous avez ajoutées ou personnalisées. Woohooo problème résolu ?

Dur contre. Soft Crop – Vous avez décidé

Culture dure

Recadrage dur normal
L'image sera mise à l'échelle puis recadrée aux dimensions exactes que vous avez spécifiées. Selon la proportion de l'image par rapport à la taille du recadrage, il y a de fortes chances que l'image soit toujours coupée.

Recadrage doux

Recadrage doux
Un recadrage doux ne coupera jamais aucune partie de l'image, il réduira l'image jusqu'à ce qu'elle corresponde aux dimensions spécifiées, en conservant son rapport d'aspect d'origine.

Quelque chose à savoir…

Dans le cas où une dimension de l'image téléchargée (largeur ou hauteur) est inférieure à celle de la taille de recadrage définie, elle sera ignorée et une version pour cette taille ne sera pas créée ! WordPress parcourra toutes les tailles d'image définies et ne créera que les versions de ces images qui sont plus grandes que celle de la version qu'il essaie de générer. Dans un tel cas, lorsqu'une image est récupérée dans votre thème ou plugin et n'existe pas, elle sera par défaut l'image “complète” d'origine comme solution de secours.

Profitez de la mise en œuvre de cette nouvelle fonctionnalité sur vos thèmes et plugins. Il est temps d'aller botter le cul et de recadrer quelques images ?

Laisser un commentaire