Gérer plusieurs tailles d’images personnalisées sur WordPress

Par défaut, WordPress ne sait gérer que trois types de taille pour les images que nous insérons dans nos articles : la miniature, la taille moyenne et la grande taille. Bien évidemment, ces options ne suffisent pas lorsqu’on se lance dans la création d’un thème de type magazine avec des vignettes de différentes tailles dans tous les sens. Bien heureusement, il est parfaitement possible d’ajouter d’autres tailles d’images personnalisées sur WordPress et nous allons justement voir comment faire dans cet article. En espérant que ce dernier vous soit utile, évidemment.

Gérer plusieurs tailles d'images personnalisées sur WordPress

Activation de l’image à la une

Et en toute franchise, je pense sincèrement que ce sera le cas puisque cette astuce va vous permettre d’intégrer plusieurs vignettes de taille différente dans vos thèmes WordPress, certes, mais également de modifier à la volée la taille de toutes vos images lorsque vous changez de thème. Tenez, par exemple, si vous partez d’un format 125×125 et que vous souhaitez basculer toutes vos vignettes en 300×150, et bien vous pourrez parfaitement vous appuyer sur cette astuce. Vous l’aurez compris, c’est typiquement le genre de truc qui risque de vous simplifier grandement la vie.

Pour se faire, nous allons bien évidemment nous appuyer sur le fichier « functions.php ». Commencez donc par l’ouvrir puis ajouter la ligne suivante afin d’activer la gestion des images à la une :

add_theme_support('post-thumbnails');

Une fois que c’est fait, lorsque vous retournerez sur l’éditeur d’article, vous verrez une nouvelle zone apparaître dans la barre latérale, une zone nommée « image à la une » et qui vous permettra donc de choisir l’image avec laquelle vous pourrez vous amuser dans votre thème.

Création des tailles personnalisées

C’est bien, mais ce n’est pas suffisant puisque nous allons maintenant devoir ajouter nos tailles d’images personnalisées à WordPress. Là encore, tout va se passer du côté du fichier « functions.php », mais ce sont ces lignes là qu’il faudra ajouter :

if (function_exists('add_image_size')) {
     add_image_size('vignette_1', 100, 40, true);
     add_image_size('vignette_2', 80, 30, true);
     etc...
}

Nous allons prendre le temps d’expliquer le fonctionnement de cette fonction. La première ligne va nous permettre de tester si la fonction dont on a besoin existe. En toute logique, elle est nativement implémentée à toutes les dernières versions de WordPress. Ensuite, en dessous, sur chaque ligne, nous allons créer nos vignettes personnalisées grâce à la commande « add_image_size ». Entre parenthèses, nous allons trouver quatre attributs. Le premier, ce sera le nom de notre taille personnalisée, la seconde ce sera la largeur de l’image (en pixels), la troisième ce sera la hauteur de l’image (en pixels aussi), la quatrième ce sera la méthode de recadrage qui devra être utilisée par WordPress.

Ce dernier propose effectivement deux modes de recadrage. Si vous choisissez « false » (ou si vous n’écrivez rien), vous aurez un recadrage sans aucune déformation de l’image. Ce qui risque de donner ensuite des vignettes d’allure différente. Au contraire, si vous mettez « true », alors vous activerez le recadrage avec réajustement homothétique qui vous permettra d’avoir de jolies vignettes bien calibrées. Le seul inconvénient de cette méthode, c’est que vous perdrez certaines zones de l’image.

Bien évidemment, vous pouvez créer autant de tailles personnalisées que vous le souhaitez, tâchez juste de bien choisir leur nom pour les retrouver facilement par la suite. Notez en outre qu’une fois ces tailles créées, vous pouvez utiliser l’extension Regenerate Thumbnails pour générer toutes vos vignettes.

Intégration des vignettes dans le thème

Le plus dur est fait. Nous avons activé la fonction « image à la une », nous avons créer nos tailles d’images personnalisées et il va donc maintenant falloir intégrer nos vignettes à nos thèmes. Yep, et c’est vraiment super simple puisque vous n’aurez qu’une simple ligne à insérer dans votre boucle WordPress, à l’endroit même où vous souhaitez faire apparaître votre vignette :

the_post_thumbnail('nom_de_ma_taille_personnalisee');

Et ça marche bien évidemment avec n’importe quelle boucle. Maintenant, vous allez pouvoir insérer plein de vignettes de taille différente dans vos thèmes et leur donner un peu plus de chien.

Pour aller plus loin

Le gros problème, avec la fonction « image à la une », c’est que cette dernière a été implémentée dans l’une des dernières versions de WordPress. Et si votre blog commence à avoir de l’âge, il est fort possible que vous ne l’ayez pas utilisé dès le début. Or si c’est le cas, il va falloir bidouiller pour générer automatiquement toutes les images à la une de vos billets. L’ami Olivier s’est justement penché sur la question et je vous invite donc à aller consulter son article pour avoir la solution à cet épineux problème.

Sinon, pour les allergiques au code, il y a également ce plugin qui vous permettra de faire exactement la même chose sans vous prendre la tête.



Frédéric Pereira est l'auteur de cet article

Floodeur compulsif, est très actif sur Twitter ou encore sur Facebook. Sachez en outre que la Fredzone a une page sur Google+.

Ces articles peuvent aussi vous intéresser

  • Uptobox réduit aussi son débit pour les comptes gratuits

    Uptobox réduit aussi son débit pour les comptes gratuits

    Après Rapidshare, c’est donc au tour du service de stockage de fichiers Uptobox de réduire le débit de tous les comptes gratuits. Cette fois, il n’est d’ailleurs pas question de lutter contre le piratage ou de prendre les devants pour éviter que le FBI ne vienne sonner à la porte de l’éditeur de la plateforme. Non, si ce dernier a du prendre cette décision, c’est tout simplement parce qu’il a vu ses bénéfices fondre comme neige au soleil. Tout ça à cause de Google adSense et de Paypal qui ont subitement décidé de bannir Uptobox….

  • Bankiwi, une tirelire en ligne pour les adolescents

    Bankiwi, une tirelire en ligne pour les adolescents

    Beaucoup d’adolescents touchent de l’argent de poche mais ils n’ont pas forcément tous un compte en banque ou une carte de crédits en poche. Résultat des courses, lorsqu’ils veulent acheter un produit en ligne, ils sont très souvent bloqués et c’est justement en partant de ce constat que les créateurs de Bankiwi ont décidé de lancer ce service. Car en effet, avec ce nouvel outil, les adolescents vont pouvoir profiter d’une espèce de banque en ligne qui leur permettra de stocker leur argent de poche pour acheter, ensuite, une tonne de produits sur iTunes, la…

  • Music Smasher, pour trouver de la musique sur Spotify, Rdio, SoundCloud et les autres

    Music Smasher, pour trouver de la musique sur Spotify, Rdio, SoundCloud et les autres

    Chaque service d’écoute musicale en streaming négociant les droits avec l’industrie du disque, tous ne propose évidemment pas le même catalogue. Et s’il sera possible de trouver le dernier hit de notre artiste préféré sur Spotify, par exemple, on ne pourra pas forcément en faire autant sur Rdio ou Grooveshark. C’est dommage mais c’est comme ça. Bien heureusement, Music Smasher compte bien changer la donne puisque ce nouveau service s’impose finalement comme un méta moteur de recherche dédié à la musique en streaming. Alors si vous en avez marre de perdre des heures et des…


  • initialLED

    Et pour ceux qui ne souhaitent pas modifier leur fichier « functions.php » il existe, entres autres, l’extension « Dynamic Image Resizer » ( http://wordpress.org/extend/plugins/dynamic-image-resizer/ ).
    A mon sens, cette extension est plus simple à utiliser car il suffit simplement d’ajouter la taille souhaitée de l’image à la fin de son nom, rien de plus. L’image sera automatiquement redimensionnée et ce même si la taille spécifiée n’existe pas dans les « Réglages des médias » de WP.

    • http://www.tayo.Fr Tayo

      @initialLED:
      Salut, merci pour le lien mais je ne vos pas trop l’intérêt.
      Ils disent :
      « The result is that space is saved (since images are only created when needed), and uploading images is much faster (since it’s not generating the images on upload anymore). »
      Ben, au final ça changera rien non ? Si je me trompe pas, dès qu’on aura besoin de l’image elle sera générée, alors à moins qu’il n’y ait pas un seul visiteur sur le page / le site, aucune différence noN?

      • initialLED

        @Tayo: Sauf que tu as la possibilité de créer automatiquement des vignettes de tailles différentes que celle imposées par tes réglages dans « Réglages des médias ».

        @Fred: les vignettes d’une taille donnée ne sont générées qu’une seule fois (au premier affichage) et stockées ensuite comme les autres dans /wp-content/uploads/

        Autre avantage de cette extension : Lorsque tu changes de thème, tu renommes tes images dans tes articles en leur attribuant une nouvelle taille et toutes les vignettes sont de nouveau adaptées à ton nouveau thème.
        Il te reste juste à supprimer les non-utilisées (anciennes tailles) de ton serveur. Et il existe aussi une extension pour ça… ;)

        • http://www.fredzone.org Fred

          @initialLED: Ouais, enfin sur 7500 articles, si tu dois repasser sur chaque article ou renommer chaque image, c’est même pas la peine… :s

          • initialLED

            @Fred: Tu peux aussi exporter ta base SQL et travailler dessus en mode texte avant de la réimporter. Un bon éditeur texte pour remplacer des chaines avec macro et le tour est joué.
            Mais bon, c’est vrai que la multiplication des articles multiplie les sources d’erreur. Sur un petit blog comme le mien (38 articles en 6 ans, j’ai honte) ça reste faisable facilement et rapidement.

          • http://www.fredzone.org Fred

            @Fred: Mouais, j’suis pas convaincu quand même, enfin du coup c’est nettement moins simple que ma méthode, et c’est surtout plus source d’erreur.

    • http://www.fredzone.org Fred

      @initialLED: Euh à mon avis, ça, quand tu as beaucoup de trafic, c’est un coup à flinguer ton serveur hein…

  • Pingback: Wordpress : générer les images à la une de ses anciens articles | Fredzone

  • Gwendoline

    Bonsoir,

    Je souhaiterai agrandir la taille de mes images sur mon blog.
    Je pense qu’il faut agrandir la mise en page (mais je n’y connais pas grand chose). Mon problème est que je suis sur WordPress.com et j’ai cru comprendre qu’on ne pouvait pas faire grand chose sur ce support. Quelqu’un peut-il m’aider ? Voici le lien de mon blog: http://depechesmode.com
    Par avance merci !

    gwendoline_2103@hotmail.fr

  • Articles Populaires -

  • Les Bons Plans -

  • Articles au hasard -