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 élégant !!

Avant de continuer, un grand merci à Brad Touesnard qui a fait cette contribution impressionnante qui a maintenant été incluse dans le noyau de WordPress! Je pensais que ce serait une excellente occasion non seulement d’expliquer comment tirer parti de cette nouvelle fonctionnalité, mais également de parcourir et de bien maîtriser 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 version ‘Thumbnail’, une ‘Medium’ et une ‘Large’. La taille de l’image d’origine téléchargée est appelée version «complète».

Personnalisation des valeurs par défaut

Vous pouvez facilement remplacer les valeurs par défaut de chacune de ces tailles de recadrage. Vous pouvez soit aller à votre Tableau de bord WordPress, Paramètres >> Médias et changez 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 à quelque chose comme ceci:

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

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

Tout ce que vous devez savoir peut être trouvé via le Codex WordPress.

Certains WordPress 3.9+ Magic – Contrôle de la position des cultures

Le paramètre $ crop n’était auparavant qu’une valeur booléenne, vraie ou fausse. Donc, soit une récolte proportionnelle douce, soit une récolte dure si elle est définie sur true (continuez à lire plus bas pour voir la différence entre une récolte dure et douce). 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' ) );

Recadrage dur sélectionné par l'utilisateur

Le paramètre $ crop accepte toujours les valeurs true / false 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 ici, ils le sont 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ée, 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 en tout cas. Pour appeler cette image personnalisée dans votre thème ou plugin. Dans l’exemple que nous utilisons, 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 récolte 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 changeant / 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 situation, voici le régénérer le plugin 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. Problème Woohooo résolu 🙂

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

Culture dure

Culture dure normale

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

Culture douce

Un recadrage doux ne coupera jamais aucune partie de l’image, il redimensionnera l’image jusqu’à ce qu’elle tienne 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 tente de générer. Dans un tel cas, lorsqu’une image est en cours de récupération dans votre thème ou plugin et n’existe pas, elle sera par défaut sur l’image d’origine, “ Complète ” comme solution de secours.

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

Share: