La gestion des images dans wordpress

Gérer un site avec plusieurs dimensions d’images sur wordpress est une horreur.On pense souvent à tort que wordpress et sa fonction magique add_image_size vont transformer vos photos aux dimensions exactes souhaitées, mais ce n’est pas le cas.

ADD_IMAGE_SIZE

Prenons un exemple concret.

Sur une page d’accueil, je souhaite afficher une liste d’image representants les articles ou des pages.Ces images devront toutes avoir une dimension différente, en longueur et en largeur

Les images au hover affichent le titre de l’article et chacune renvoie à l’article lié.

Dans mon fichier functions.php, j’insère la fonction:

add_theme_support('post-thumbnails');

    set_post_thumbnail_size(624, 9999);

    add_image_size('postbig', 960 , 233, true );

    add_image_size('postmedium', 630 , 233, true );

    add_image_size('postsmall', 300 , 233, true );

  

}



add_action('after_setup_theme', '...');

Comme on le voit, j’ai bien sur besoin de déclarer les thumbnail dans wordpress avec un  » add_theme_support(‘post-thumbnails’); », je définis une taille par défaut ou pas, puis mes différentes tailles, le tout a sein de la fonction set_up de votre thème.

Ensuite, je peux procéder de plusieurs façon..soit j’ai simplement besoin d’une de ces images au cas par cas.dans ce cas j’appelle mon thumbnail comme d’habitude, en précisant juste en plus le nom du nouveau format

the_post_thumbnail( 'postbig' ); 

Soit  au sein d’une boucle,on lance dans ce cas un compteur pour forcer wordpress à aller chercher le bon format en fonction de la taille définie

 <?php $count = 0; $args = array('post_type' => 'post', 'posts_per_page' => 3, 'order' => 'DESC',);

                $custom_query = new WP_Query($args);

                ?>

                <?php if ($custom_query->have_posts()) : ?>

                    <?php while ($custom_query->have_posts()) : $custom_query->the_post();

                    $count++;

                            ?>

                        <a data-sr href="<?php the_permalink(); ?>" class="vignets">

                            <?php     if( $count < 2 ) the_post_thumbnail( 'postbig' ); elseif( 2 == $count ) the_post_thumbnail( 'postmedium' ); else the_post_thumbnail( 'postsmall' ); ?>      

                            <span><?php the_title(); ?></span>

                        </a>

                        <?php endwhile; wp_reset_postdata(); endif ?>

Ici je dis à wordpress, pour la première image, place moi une ‘postbig’, pour la deuxième une « postmedium », sinon pour toutes les autres, une « postsmall ».

On peut également alterner les images selon le device, grace au puglin mobble

<a href="<?php the_permalink();?>"><?php if(is_mobile()){ the_post_thumbnail('archive-mobile'); }else{ the_post_thumbnail('archive'); }; ?></a>

Le rendu au final est celui de l’image plus haut. Pas térrible : la première image, carrée à l’origine, meme en crop false, se retrouve forcément rognée.En réalité, wordpress est incapable, et c’est normal, de reformer une image carrée par exemple en un rectangle très haut en hauteur et de conserver tout l’aspect de la photo originelle.

crop à true, ou à false:

En théorie,  un add_image_size (200,200) équivaut à un add_image_size (200,200,true) puisque la valeur est activée par défaut dans wordpress, et va découper vos images aux dimensions spécifiées, c’est à dire découper tout ce qui dépasse.

Un add_image_size(200,200,false) ne va pas rogner l’image, elle est censée apparaitre exactement pareille, mais aux nouvelles dimensions spécifiées.

Je dis en théorie car très souvent les images carrées se retrouvent carrées sans changement, dans un cas comme dans l’autre, et les images rectangles sont quoiqu’il arrive rognées.
Le fait de placer une position dans l’argument:

add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) )

peut ‘casser’ votre image ou ne pas la faire apparaitre du tout.

Meme avec une autre manière d’appeler le thumbnail, au cas par cas, rien ne change, les images ne sont pas forcément comme on le souhaiterait.

 <a data-sr href="<?php the_permalink(); ?>" class="vignets">

                            <?php  $featuredID = get_post_thumbnail_id();

                            if( $count < 2 ) echo wp_get_attachment_image($featuredID, 'postbig'); elseif( 2 == $count ) echo wp_get_attachment_image($featuredID, 'postmedium'); else echo wp_get_attachment_image($featuredID, 'postsmall'); ?>      

                            <span><?php the_title(); ?></span>

                        </a>

extension=php_gd2.dll

de votre fichier php.ini, devrait faire fonctionner le redimmensionnement, pour ceux chez qui ca ne marche pas.

Si aucune des solutions ne marche,  ll faudra  créer soi meme des photos aux dimensions exactes souhaitées et les uploader au cas par cas.