Redimensionner une image automatiquement avec WordPress

Ecrit par Benoit Thibaudeau dans Wordpress | 13 commentaires |

Redimensionner les images automatiquement avec WordPressRedimensionner une image automatiquement avec WordPress est une chose que même un enfant serait faire 😉

Si sur la page d’accueil de votre blog, vous avez placé une miniature à côté de chaque résumé d’article, comme sur C’ ça le net, il est préférable de créer une miniature plutôt que d’afficher une grande image et de la compresser. Déjà le résultat est moins bon, mais surtout le fait d’afficher des images miniatures plutôt que de grandes images redimensionnées, allège les pages et diminue le temps de chargement.

Une page dont le poids est important est handicapant. Les moteurs de recherche pénalisent les sites trop lents et à l’époque ou le nombre de personnes, qui naviguent depuis des smartphones et des tablettes, augmente de façon importante, les pages avec de grandes images, même compressées pour être affiché en petit, est un handicape.

Vous allez voir qu’il suffit de quelques lignes de code pour créer automatiquement des images à la bonne dimension avec WordPress.

Pourquoi redimensionner automatiquement les image avec WordPress ?

Lorsque vous créez un nouveau type de format d’image, WordPress créé une copie de chaque image que vous importez dans les médias. Il garde l’image dans sa taille originale et créé autant de format d’image que défini dans le fichier functions.php.

Par défaut WordPress propose déjà nativement une miniature appelée « thumbnail », qui fait 150*150pixels.

Il y a des tas d’exemples pour démontrer l’utilité du redimensionnement automatiquement des images que vous importez dans les médias de WordPress.

  • Vous utilisez des miniatures pour la présentation de vos articles WordPress
  • Vous êtes photographe et/ou vous avez des galeries de photo sur votre site et si les photos ont toutes la même hauteur cela fait plus professionnel
  • Vous ne savez pas redimensionner les images, alors pourquoi ne pas laisser WordPress le faire Automatiquement ?
  • Pour vous simplifier la vie en automatisant le traitement
  • Pour avoir un site professionnel avec des présentations de pages identiques
  • Pour présenter des vignettes de vos articles sur des pages de votre catalogue en ligne

Redimensionner automatiquement avec WordPress et les utiliser

Redimensionner les images automatiquement avec WordPress

Rien de plus simple. Cependant, une limite. Le redimensionnement sur WordPress diminue les images que vous importez dans les médias, il ne les agrandi pas. Donc si vous importez des images ou photos trop petites elles ne seront pas redimensionnées.

Supposons que vous ayez besoin de miniatures pour la présentation des articles dans votre catalogue en ligne. Ces miniatures feront 200*200pixels. Nous appellerons ces miniatures « mini-pres-article ».

Il suffit d’ajouter dans les lignes suivantes dans le fichier functions.php :

if ( function_exists( 'add_image_size' ) ) 
    add_image_size( 'mini-pres-article', 200, 200, false );

On vérifie que la fonction de redimensionnement des images existe, puis on créé une nouvelle version de l’image au dimensions définies pour chaque image que l’on intègre aux médias de WordPress.  La fonction add_image_zise possède 4 paramètres :

  • $name : le nom du format de l’image que l’on utilisera pour afficher ce format d’image (obligatoire)
  • $width : La largeur maximale de l’image (option)
  • $height : La hauteur Maximale de l’image (option)
  • $crop : Par défaut « false » pour ne pas tronquer l’image, ou initialisé à « true » si on veut retaillé l’image (option)

Si le 4ème paramètre est initialisé  à « false », WordPress redimensionne l’image avec le bord le plus large correspondant à la largeur ou hauteur initialisé par les paramètres de la fonction « add_image_size » mais garde les proportions de l’image.

Si le 4ème paramètre est initialisé à « true », l’image n’est pas redimensionné, mais recadré aux dimensions passés dans lors de l’appel de la fonction « add_image_size » et le reste de l’image est tronqué.

Utiliser les photos redimensionner automatiquement avec WordPress

Rien de plus simple. Il suffit d’ajouter les lignes suivantes à l’endroit où l’on veut récupérer l »image dans notre nouveau format (par exemple dans le fichier index.php) :

<?php 
$attachment_id = 8; // attachment ID
$image_attributes = wp_get_attachment_image_src( $attachment_id, 'mini-pres-article' ); // retourne un tableau avec le path de l'image et les dimensions de celle-ci.
?> 
<img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>">

Voilà cela reste assez simple

Pour aller plus loin

Je vous propose de voir dans de prochains articles comment gérer les thumbnail.

Nous verrons aussi dans de prochains articles comment modifier et ajouter un avatar par défaut. Les avatars par défaut de WordPress n’étant pas terrible, comme vous pouvez le voir sur ce blog, il est possible d’en mettre d’autres, plus beaux.

Tags: ,

Portrait de Benoit Thibaudeau
Benoit Thibaudeau
1971-11-02
2020-01-12
Webmaster

Après une courte carrière en tant que cryptographe, j'ai été team leader chez un éditeur de logiciel qui créé des systèmes décisionnels pour les banques et les télécoms dans le monde entier.

Puis j'ai évolué vers architecte de système informatique, ce qui m'a amené à concevoir des systèmes parmi les plus gros d’Europe avec une visibilité sur les 10 prochaines années.

En parallèle j'étais chargé de la formation des employés de la société et de celle des clients, ce qui m'a appris beaucoup en ce qui concerne la dispense de cours.

Durant ma période en Irlande j’ai eu la chance de travailler, plusieurs mois, en étroite collaboration avec Google Irlande, ce qui m’a appris énormément sur le référencement.

Enfin, j’ai souhaité au bout de 15 ans d’arrêter de voyager tout le temps dans le monde entier, je me suis donc mis à mon compte et aujourd’hui je vis de mon activité.

Benoît Thibaudeau

Les conseil Internet : www
Pour me contacter :
Mr.BenoitThibaudeau
27 bis rue Louis Rolland
92120Montrouge,
Haut de Seine - FRANCE
Les stages photo : www
Cours photo sur Internet : cours
Le blog de tuto photo : Blog
Le site dream photos : www
Le blog dream photos : Blog

Comments (13)
  1. meuble tunisie says:

    Excellent article. je vous remercie pour l’effort 🙂

  2. decoration maison says:

    Bonjour ,
    merci pour ces informations bonne continuation !!!

  3. salle de sport lille says:

    Excellent article!
    Merci pour le partage

  4. société demenagement tunisie says:

    Excellent article!
    Merci pour le partage

  5. toiture says:

    Bonjour, je trouve votre blog très intéressant .Merci pour les informations.

  6. Thierry B says:

    Interessant, je cherche en ce moment à retrouver un plugin qui redimensionne les images à la volée, c’est à dire lors de leur premier affichage éventuel, et non systématiquement.
    Parce que quand on change de thème, ça modifie généralement la taille des images. Et on finit par se retrouver avec des dizaines de versions pour chacune…

  7. عزل الاسطح بالفوم says:

    Je vous remercie pour ce site, c’est hyper intéressant.
    J’aime beaucoup toutes ces informations.Excellent site! Merci pour le partage et bonne continuation .

  8. شركة تخزين أثاث بالرياض says:

    Bonjour,
    Merci pour tous les conseils, Très beau blog, j’ai bcp aimé, merci bcp !

  9. horoscope2019 says:

    Merci bcp pour toutes ces informations,
    ce petit conseil est tres intéressant.

  10. arnaud says:

    Bonjour, votre article est intéressant , bravo pour le côté partage , j’ ai un souci comment changer la dimension de mes photos quand elles sont déja en place sur mon site wordpress ? je suis mauvais la dessus et c ‘est mon avenir qui se joue avec mon site.Grand merci pour votre retour éventuel.
    Salutations.
    Arnaud.

    • Benoit Thibaudeau says:

      Salut,
      Si vous souhaitez modifier la taille d’une image sur WordPress, allez dans votre onglet Médias, sélectionnez ensuite l’image à redimensionner et cliquez sur Modifier l’image.

      Vous modifiez la largeur de l’image (la première case) qui se trouve dans redimensionnement de l’image (la hauteur s’adaptera à la largeur selon la taille de l’image). Cliquez ensuite sur Redimensionner.

      Et voilà !!!

  11. stream says:

    merci bcppp

  12. construction quebec says:

    Vraiment sympas ton site !
    Vraiment sympas ton site ! J’attends le prochain article !
    Félicitations, un post vraiment bon !!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Le rédacteur du site

Portrait de Benoit Thibaudeau
1971-11-02
2019-01-12
Benoit Thibaudeau
Webmaster
a travaillé pour les banques et télécoms comme éditeur de logiciels

C'est ça le Net

      Les conseils Internet www

Deviens Photographe

      Les stages photo : www
      Cours photo sur Internet : cours
      Le blog : Blog

Dream Photos - Studio

      Le site : www       Le blog : Blog

Contact

      Son mail :
      Tel : 06.70.02.31.27
Mr. Benoit Thibaudeau
27 bis rue Louis Rolland
92120 Montrouge,
Haut de Seine - FRANCE

Newsletter

Afficher
Cacher