Tailles d’image Expliquées

Lorsque vous téléchargez une image sur votre site Web WordPress, ses copies – images avec des tailles supplémentaires seront créées. Pourquoi en avons-nous besoin ? Parce que nous n’utilisons pas la même image de taille partout sur le site:

• dans les publications,
• dans le portfolio,
• dans les popups,
• comme vignettes de publication sur les pages d’archives,
• dans les widgets,
• dans la zone d’administration etc;

Ainsi, par exemple, WordPress vous permet d’utiliser une image en taille réelle sur les pages de publications et des images 150×150 (par exemple) sur les pages d’archives.

Mais attendez ✋ – gardez à l’esprit que plus vous avez de tailles d’image enregistrées, plus il y aura de fichiers sur votre site Web et plus de temps sera nécessaire pour traiter les images pendant le téléchargement.

Tailles d’image WordPress par défaut

WordPress prend en charge plusieurs tailles d’image par défaut. Vous pouvez les trouver et les modifier dans la zone d’administration dans « Paramètres > Médias ».

Ainsi, par exemple, vous pouvez modifier la taille des vignettes WordPress sur cette page.

Que faire si vous ne les utilisez pas et que vous ne souhaitez pas que WordPress génère une copie pour chacune de ces tailles. Vous pouvez insérer le crochet suivant dans votre thème functions.php.

Mais gardez toujours à l’esprit que si votre thème WordPress reçoit des mises à jour, il vaut mieux utiliser un thème enfant ou un plugin personnalisé.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes'); function misha_turn_off_default_sizes( $default_image_sizes) { unset( $default_image_sizes); // turn off thumbnail sizeunset( $default_image_sizes); // turn off medium sizeunset( $default_image_sizes); // turn off large size return $default_image_sizes; }

medium_large

La taille de l’image medium_large est apparue dans WordPress 4.4 avec la fonction images réactives. Il a une largeur fixe 768 et une hauteur proportionnelle.

Vous pouvez désactiver la taille medium_large aussi simplement qu’avec ce code:

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large'); function misha_deactivate_medium_large( $default_image_sizes ){ $default_image_sizes;return $default_image_sizes; }

Comment Obtenir Toutes Les Tailles d’image?

Parfois, vous devez savoir quelle est la liste des tailles d’image disponibles sur le site Web. Malheureusement, il n’y a pas de moyen courant de le faire pour les tailles d’images par défaut et personnalisées, donc:

• Si vous avez besoin de la liste des tailles d’image par défaut, vous pouvez utiliser get_intermediate_image_sizes(), qui renvoie un tableau avec les tailles d’image par défaut, par exemple:

  print_r( get_intermediate_image_sizes() );/* Array ( => thumbnail => medium => medium_large => large ) */

• Si vous devez lister les tailles d’image enregistrées, vous les obtenez à partir de la variable globale $_wp_additional_image_sizes, et je peux vous en dire plus, vous pouvez également obtenir les dimensions de l’image à partir de là, par exemple:

  global $_wp_additional_image_sizes;print_r( $_wp_additional_image_sizes );/*Array( => Array ( => 400 => 400 => 1 ) => Array ( => 2000 => 1200 => 1 ))*/

Fonctions

Il est assez facile d’utiliser les tailles d’image WP dans la zone d’administration – tout ce que vous avez à faire est de sélectionner la taille d’image dont vous avez besoin dans la liste déroulante. Faisons mieux de jeter un coup d’œil aux fonctions alors.

the_post_thumbnail()

Top 1 dans ma liste, car je l’utilise plus souvent qu’autre chose.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

Veuillez noter que cette fonction imprime une balise <img>, pas une URL.

sizesize Voici ce que vous pouvez utiliser comme valeur de paramètre:

• identificateur de taille d’image (nom) – medium, custom etc, par défaut thumbnail,

  // prints the featured image, size large of a current post in the loopthe_post_thumbnail( 'large' );

• taille personnalisée array( width, height ), exemple:

  the_post_thumbnail( array( 100, 100 ) );

  Si vous l’utilisez, la taille d’image la plus appropriée sera affichée.

• vous pouvez passer la valeur full à ce paramètre et une image originale s’affichera.

attattr Vous pouvez passer tous les attributs HTML ici sous forme de tableau, vous pouvez même réécrire l’attributsrc! 😁

the_post_thumbnail( 'medium', array( 'class' => 'my-image', 'data-id' => 1000 ) );

get_the_post_thumbnail()

Cette fonction est très similaire à the_post_thumbnail(), la différence est que:

• Le premier get_the_post_thumbnail() est un ID de publication, tout le reste est le même,
• Il renvoie une image, pas l’imprime.

Exemple:

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

wp_get_attachment_image_src()

La fonction permet d’obtenir une URL d’image.

wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

Veuillez noter qu’un ID de pièce jointe n’est pas un ID de publication. Mais vous pouvez facilement l’obtenir, par exemple si vous avez besoin d’un identifiant d’image en vedette, vous pouvez utiliser la fonction get_post_thumbnail_id().

Exemple:

$image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );echo $image_array;

À propos du paramètre $size et d’un tableau de tailles lu un peu plus haut.

Comment ajouter vos tailles d’image personnalisées

Ce processus est très simple et se compose de deux étapes. La première étape est nécessaire.

add_image_size()

Pour enregistrer une taille d’image dans WordPress, vous pouvez utiliser cette fonction dans votre thème actuel functions.php ou dans un thème enfant functions.php ou dans un plugin personnalisé.

add_image_size( $size_name, $width = 0, $height = 0, $crop = false );

$ size_name Vous ne pouvez pas utiliser de noms de taille d’image réservés, les voici:thumb,thumbnail,post-thumbnail,medium,medium_large,large,full. widthlargeur Largeur en pixels, définir 0 – largeur illimitée. heighthauteur Hauteur en pixels, définir 0 – hauteur illimitée, exemple:

add_image_size( 'fixedwidth500', 500, 0 ); // or just skip the third parameter

$ recadrer plus tôt ce paramètre pourrait accepter ne pouvait accepter quefalseoutruemais maintenant il est beaucoup plus étendu, voici donc les valeurs possibles:

Jetons un coup d’œil à l’exemple:

add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

Pour garder les choses simples, j’ai décidé d’utiliser une taille carrée dans cet exemple. Donc, il est facile de dire, que si l’image d’origine est horizontale, la partie gauche de l’image restera, mais la partie droite sera recadrée, et la même chose que je peux dire à propos des images verticales – la partie inférieure de l’image sera recadrée.

Il est également possible de faire un recadrage manuel à l’aide du plugin « Recadrage manuel de l’image ».

Mais ne créez pas aussi beaucoup de tailles d’image:

• plus vous créez de tailles d’image, plus il y aura de fichiers dans votre dossier uploads,
• et plus vous aurez besoin de temps pour télécharger une image sur votre site.

Comment ajouter votre taille d’image personnalisée à Media Uploader et Gutenberg

Lorsque vous insérez des images dans des widgets et des publications, WordPress (3.5+) vous permet de choisir la taille d’image à utiliser:

Comme vous pouvez le voir, il est possible de vous y ajouter une taille personnalisée:

add_filter('image_size_names_choose', 'misha_new_image_sizes'); function misha_new_image_sizes($sizes) {$addsizes = array("my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)");$newsizes = array_merge( $sizes, $addsizes );return $newsizes;}

Ce qui est cool, c’est que ce crochet fonctionne également pour le bloc d’image Gutenberg.

Comment Régénérer des Images après avoir Modifié leurs Tailles ou Modifié un Thème

Peut-être connaissez-vous la situation où, après avoir modifié les paramètres add_image_size() ou après avoir modifié le thème de votre site Web, WordPress ne génère pas automatiquement de tailles d’image et des images avec d’anciennes résolutions sont toujours affichées sur le site.

Que devez-vous faire dans cette situation? S’il n’y a que 2 ou 3 images dans votre dossier uploads, vous pouvez simplement les réutiliser. Mais que faire s’il y a des milliers d’images 2-3?

Il y a deux façons de résoudre cette situation – avec des plugins et avec du code:

Régénérez les vignettes avec des Plugins

Ok, je peux vous recommander deux plugins simples:

• Ajax Thumbnail Rebuild
• Forcer la vignette de régénération

Chacun d’eux a ses propres avantages et inconvénients, alors peut-être que pour différentes situations, vous pouvez choisir le plugin qui vous convient le mieux.

Régénérer les vignettes par programme

Ici, je veux juste vous montrer le code qui permet de régénérer les images, comment vous allez l’utiliser – c’est votre choix.

$attachment_id = 5; // pass your attachment ID here $path = get_attached_file( $attachment_id );$meta = wp_generate_attachment_metadata( $attachment_id, $path );wp_update_attachment_metadata( $attachment_id, $meta );

Comment créer certaines Vignettes de Taille d’image pour les Types de publication personnalisés Uniquement

Imaginons donc que votre site Web dispose de 10 types de publication personnalisés enregistrés et que chacun d’eux utilise 2 à 3 tailles d’image sur les pages du site Web. Il est facile de comprendre que lorsque nous téléchargeons une image sur le site Web, WordPress en crée 20 à 30 copies!

Il n’y a aucun moyen d’utiliser add_image_size() pour un type de publication personnalisé mais voici un petit morceau de code qui résout ce problème. Ce code indique à WordPress quand il doit créer une certaine copie de résolution de l’image et quand ce n’est pas le cas.

Les crochets intermediate_image_sizes et intermediate_image_sizes_advanced sont OK pour cette tâche. Un exemple très simple ci-dessous, après avoir inséré le code dans vos vignettes de fichier functions.php my-image-size-name ne sera pas créé pour les images téléchargées à partir du type de publication personnalisé page.

add_filter( 'intermediate_image_sizes_advanced', function( $sizes ){ if( isset( $_REQUEST ) && 'page' == get_post_type($_REQUEST ) ) {unset( $sizes );} return $sizes; } );

Un exemple un peu plus compliqué, mais c’est aussi correct:

/* * this hook will be fired while you uploading a picture */add_filter( 'intermediate_image_sizes', 'misha_reduce_image_sizes' ); function misha_reduce_image_sizes( $sizes ){/* * $sizes - all image sizes array Array ( => thumbnail => medium => large => post-thumbnail ) * get_post_type() to get post type */$type = get_post_type($_REQUEST); // $_REQUEST post id the image uploads to foreach( $sizes as $key => $value ){ /* * use switch if there are a lot of post types */if( $type == 'page' ) {if( $value == 'regionfeatured' ){ // turn off 'regionfeatured' for pages unset( $sizes ); }} else if ( $type == 'region' ) {if( !in_array( $value, array('regionfeatured','misha335') ) ){ // for regions turn off everyting except 'regionfeatured' and 'misha335' unset( $sizes ); }} else {if( $value != 'thumbnail' ){ // turn off everything except thumbnail unset( $sizes ); }}}return $sizes;}

Misha Rudrastyh

J’aime tellement WordPress, WooCommerce et Gutenberg. 12 ans d’expérience.

Besoin d’aide personnalisée pour les développeurs ? Contactez-nous