Social

Gérer des tailles d’images personnalisées sous WordPress

Posté le 17 septembre 2011

Type de tutoriels :

Comment gérer des tailles d’images personnalisées sous WordPress

Salut à tous !

 

Dans ce nouveau tutoriel, nous allons apprendre à gérer des tailles d’images personnalisées sous WordPress. Vous aller voir c’est extrêmement simple ! ;)

Alors dans un premier temps, ce qu’il faut savoir :

  • Cela se situe dans le fichier functions.php. Je pense que ce fichier est un des plus important d’un thème, voir le plus important (ça n’engage que moi bien sûr :) )
  • Il est toujours conseillé de mettre ses images dans la bibliothèque dans une taille convenable (Par exemple 800×600). Mais jamais trop petit. Si vous mettez directement les images en tailles trop petites et qu’il vous prend l’envie de faire un nouveau thème pour votre beau site, vous allez vous retrouver bloqué sur ce point et du coup, vous serez obligé de reprendre tous vos posts (ça sent le vécu je sais…)

 

Nous allons commencer. Vous aller voir c’est très simple :P

Comme je le disais, nous allons déjà nous rendre dans notre fichier functions.php dans votre thème. S’il n’existe pas (comment ça ??!!!), vous devez le créer.

 

Une fois cela fait, vous allez mettre ces lignes à la fin de votre fichier :

/*Ajout du support des thumbnails*/ add_theme_support('post-thumbnails');

 

Expliquons déjà ce premier code.

Il n’a pas forcement de lien direct avec la gestion des tailles d’images personnalisées dans WordPress, mais il permet tout simplement d’ajouter la fonctionnalité « Image à la une » dans votre post :

 

Une fois cela fait, nous allons nous occuper des tailles d’images. Voici le scénario :

Maurice à un super site avec une belle Custom Page. Mais il voudrait récupérer l’image mis dans Image à la une pour l’insérer dans sa page en miniature en 30px par 30px. Mais que faire ? Que de suspense !!… Ouais je sais c’est digne d’un scénario Hollywoodien…

 

Bref reprenons-nous… Ouvrons de nouveau notre fichier functions.php si vous l’avez fermé, et insérez ces lignes :

/*Gestion des images */ if ( function_exists( 'add_image_size' ) ) { add_image_size( 'news-home-thumb', 30, 30, true ); add_image_size( 'logo-thumb', 200, 9999); }

 

Alors un peu d’explication ligne par ligne :

  • Ligne 1 : Le commentaire….. ouais je sais trop facile jusque là :P
  • Ligne 2 : On vérifie si add_image_size est disponible. C’est en théorie déjà chargé par WordPress donc ne vous inquiétez pas :)

 

Ensuite, je charge 2 types de dimension d’image. On va expliquer l’une après l’autre mais voici une explication de fonction utilisée : add_image_size (nom-variable-perso, width, height, crop)

  • Ligne 3 : on affecte un nom de variable perso. Saisissez un nom pas trop long et explicite :) Ensuite on met un valeur Width (longueur) et une autre pour le Height (hauteur). Enfin on dit si on veut un crop ou pas.

 

Il y a 2 modes de crop : Le soft mode crop et le hard mode crop. Le soft mode crop (false par défaut) permet de faire un crop sans déformation de l’image. C’est ce qu’on appelle un réajustement homothétique. Le problème avec cela, c’est que vous risquez d’avoir des images thumbnails de tailles différentes.
L’autre mode (hard mode crop qui est true) permet un réajustement en coupant les bords, ce qui va permettre d’avoir des thumbnails de même taille. Mais vous perdez une partie de l’image :)

 

  • Ligne 4 : Alors un nom de variable perso, un width défini. Et là on a 9999. Cela va permettre de définir une taille dite indéfinie. En gros, on aura une image qui fera 200px forcé en width mais gardera sa hauteur (par rapport au redimensionnement du width bien entendu ! )

 

Je vois un inconvenient à ce genre d’utilisation par contre : si vous avez des images par exemple dans un slider fixe de 200px par 180px et que vous mettez plusieurs images au format paysage, pas de souci mais s’il y a une image au format portrait… C’est la débandade :P Où alors je n’ai pas trouvé et je suis preneur !

 

Et maintenant, voyons comment récupérer notre image dans la Custom Page de Maurice (bah ouais parce que Maurice va pas être content hein… ;) )

 

Ouvrons notre page personnalisée et dans notre boucle WordPress, à l’endroit où doit s’afficher notre image :

the_post_thumbnail('news-home-thumb');

 

On utilise la fonction the_post_thumbnail et on passe en paramètre le nom de notre variable qui correspond à notre taille d’image.

 

Vous pouvez donc gérer plusieurs types de taille d’image pour votre thème. :)

 

Voilà, je pense que c’est à peu près tout. N’hésitez pas réagir à ce tutoriel sur la gestion des tailles d’images personnalisées sous WordPress et j’espère vous revoir très bientôt ! :)

 

A+

Tef

3

  • Nicolas
    17 septembre 2011 à 22:44

    Merci de ton tutoriel :)

  • Tekiro
    19 novembre 2011 à 16:58

    Merci pour ce tuto, grâce à toi je comprends enfin comment ça marche ;)

  • richard
    11 mars 2014 à 21:32

    Merci beaucoup pour ce tuto, j’ai galere pour mettre des images a la une sous differents formats et j’ai enfin trouve votre code, tres simple a mettre en place.
    Merci beaucoup, cordialement
    Richard

  • Laisser un commentaire


    :
    :
    :