Un guide des tailles de recadrage d’images WordPress

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 lisse!!


Avant de continuer, un grand merci à Brad Touesnard qui a fait cette formidable contribution qui est maintenant incluse dans le noyau WordPress! Je pensais que ce serait une excellente occasion non seulement d’élaborer sur la façon de tirer parti de cette nouvelle fonctionnalité, mais aussi de la parcourir et de bien saisir l’ensemble de la portée de cette fonction..

Le tout début – Ajout ou personnalisation de tailles d’image

Par défaut, WordPress génère 3x versions supplémentaires de votre image. Une «miniature», une «moyenne» et une «grande» version. 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 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édia 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);

Culture dure normale

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

Tout ce que vous devez savoir est accessible via le Codex WordPress.

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

Le paramètre $ crop n’était auparavant qu’une valeur booléenne, true ou false. Donc, soit un recadrage proportionnel doux ou un recadrage dur s’il est défini sur true (continuez à lire plus loin 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'));

Recadrage dur sélectionné par l'utilisateur

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

en haut à gauche
centre gauche
En bas à gauche
En haut à droite
centre droit
en bas à droite
centre haut
centre centre
en bas au centre

Je l’ai donc recadrée, maintenant comment l’utiliser?

La bonne nouvelle… c’est exactement la même chose !! Pour une ventilation complète, comme toujours regarder 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 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 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 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 ��

Vs durs Culture douce – vous avez décidé

Culture dure

Culture dure normale
L’image sera mise à l’échelle puis rognée aux dimensions exactes que vous avez spécifiées. Selon la proportion de l’image par rapport à la taille du recadrage, il est probable que l’image sera toujours coupée.

Culture douce

Culture douce
Un recadrage doux ne coupera jamais aucune 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 plus petite que celle de la taille de recadrage définie, elle sera ignorée et une version pour cette taille ne sera pas créée! WordPress fera défiler 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 plug-in et n’existe pas, elle sera par défaut l’image d’origine, “Complète” comme solution de rechange.

Profitez de l’implémentation de cette nouvelle fonctionnalité sur vos thèmes et plugins. Il est temps d’aller botter le cul et de recadrer des images ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map