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 continuer, un grand merci à Brad Touesnard qui a apporté 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’expliquer comment tirer parti de cette nouvelle fonctionnalité, mais également de parcourir et d’avoir une bonne compréhension de l’ensemble de la portée de cette fonction.
Le tout début – Ajout ou personnalisation des tailles d’image
Par défaut, WordPress génère 3x versions supplémentaires de votre image. Une ‘Vignette’, une ‘Moyenne’ et une ‘Grande’ version. La taille d’origine de l’image téléchargée est appelée 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 vous rendre dans votre Tableau de bord WordPress, Paramètres >> Média et modifiez les valeurs ici 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 à quelque chose comme ça :
add_image_size( 'homepage-thumb', 250, 250, true );
Conseil: N’oubliez pas de donner à chaque taille d’image supplémentaire son propre nom ;-).
Tout ce que vous devez savoir peut être trouvé via le Codex WordPress.
Certains WordPress 3.9+ Magic – Contrôler la position de 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 true (continuez à lire plus bas pour voir la différence entre un recadrage dur et doux). Cependant, vous pouvez maintenant 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 du centre, donc par exemple votre fonction pourrait ressembler à ceci maintenant :
add_image_size( 'homepage-thumb', 250, 250, array( 'center', 'center' ) );
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 dans tous les 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, nous nous retrouvons maintenant avec 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 plug-in 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
Difficile contre. Culture douce – Vous avez décidé
Recadrage dur
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.
Culture douce
Un recadrage doux ne coupera jamais aucune partie de l’image, il réduira l’image jusqu’à ce qu’elle rentre dans les dimensions spécifiées, en conservant son rapport hauteur/largeur 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 qu’elle n’existe pas, elle sera par défaut l’image d’origine « Full » 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 des fesses et recadrer quelques images