M é m o - l a b .
Ce chapitre propose de s’intéresser à la gestion des images sous WordPress, en partant de l’upload effectué depuis la partie admin jusqu’à leur affichage en frontend.
Lors de l’upload, WordPress charge bien entendu l’image sur le serveur mais la décline également dans d’autres dimensions inférieures à la taille d’origine. Plusieurs images sont donc chargées sur le serveur et leur nombre dépend de la taille de l’image uploadée. Les dimensions dans lesquelles l’image peut être déclinée sont les suivantes :
Pour exemple, lorsque l’on upload une image de 3000px de large, WordPress charge sur le serveur 8 images alors qu’une image de 800px engendrera 4 images sur le serveur. Pour s’en persuader, il suffit de se rendre dans le dossier <projet>/wp-content/uploads/<annee>/<mois>.
Si nous souhaitons afficher l’image en dehors de la loop, WordPress met à notre disposition la fonction wp_get_attachment_image(). A l’intérieur de la loop, il faut utiliser la fonction the_post_thumbnail().
L’argument $size correspond aux valeurs des attributs width et height de la balise image. Les tailles prédéfinies sont : thumbnail (150*150), thumb (150*h), medium (300*h), medium_large (768*h), large (1024*h), big_image (2560*h), full (taille d’origine limitée à 2560px si la largeur de l’image uploadée est supérieure à 2560px). Il est également possible de passer un tableau contenant la largeur et la hauteur de l’image et dans ce cas, le ratio sera conservé..
L’argument $attachment_id correspond à l’id de l’image. Il est inséré dans la base de données au niveau de la colonne post_id de la table postmeta. Il est également récupérable dans l’url qui s’affiche lorsque l’on clique sur l’image depuis la partie admin.
Les fonctions wp_get_attachment_image() et the_post_thumbnail()incluent les attributs srcset et sizes dans la balise <img>.
L’attribut srcset contient 5 urls vers des tailles d’image différentes, ce qui laisse le navigateur libre de choisir quelle image est la plus adaptée pour l’affichage demandé.
L’attribut sizes quant à lui permet de définir xomportement de l’image en fonction de la taille de l’écran à l’instar des média-queries en css. Cet attribut est utilisé pour rendre les images responsives.
La compréhension par le code
Le code ci-dessous affiche 3 images de (0.95*33)% de large
côte à côte pour des écrans supérieurs à 768px. Pour des écrans
inférieurs à 768px, l'image prendra 95% de la largeur
functions.php
<?php
// déclaration personnalisée de l'attribut sizes
function mytheme_image_sizes_attr( $sizes, $size ) {
// l'image occupe 95% de l'espace disponible pour écrans < 768px
// sinon l'image occupe (0.95*33)% de l'espace disponible
$sizes = '(max-width: 768px) 95vw, calc(0.95*33vw)';
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'mytheme_image_sizes_attr', 10 , 2 );
?>
template php
<?php
$q = new WP_Query([
'post_type' => 'post'
]);
?>
<?php if($q->have_posts()) : while($q->have_posts()) : $q->the_post(); ?>
<div class="wrap_img">
<?php echo wp_get_attachment_image($attachment_id, 'medium'); ?>
<?php echo wp_get_attachment_image($attachment_id, 'medium'); ?>
<?php echo wp_get_attachment_image($attachment_id, 'medium'); ?>
</div>
<?php endwhile; endif; ?>
fichier css
/* centrage des images */
.wrap_img {
text-align: center;
}
/*
Les attributs width et height intégrés nativement par WordPress
dans la balise image doivent être définis à auto pour les rendre
adaptables à la taille de l'écran
*/
img {
width: auto;
height: auto;
}
Il est possible de personnaliser les tailles d’image uploadées.
La fonction set_post_thumbnail_size() est utilisée pour créer une nouvelle taille de l’image mise en avant, image affichée lorsque l’on utilise la fonction the_post_thumbnail().
La fonction add_image_size() permet de créer une nouvelle taille d’image possédant un nom d’affichage. La fonction wp_get_attachment_image() permet par exemple d’afficher cette image.
<?php
// ratio conservé
// largeur de l'image uploadée : 120px
set_post_thumbnail_size('120', '100', false)
// ratio non conservé
// dimensions de l'image uploadée : 120px*100px
set_post_thumbnail_size('120', '100', true)
// ratio conservé
// largeur de l'image uploadée : 400px
add_image_size('img400', '400', '350', false);
// ratio non conservé
// dimensions de l'image uploadée : 400*350
add_image_size('img400', '400', '350', true);
?>
La compréhension par le code
functions.php
<?php
// Ce filtre interdit l'upload de certaines
// dimensions d'images.
function mytheme_filter_image_sizes( $sizes) {
unset( $sizes['thumbnail']);
unset( $sizes['medium']);
unset( $sizes['medium_large']);
unset( $sizes['large']);
return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'mytheme_filter_image_sizes');
?>
Rqes :
Lorsque l’on upload une image, il est très important de faire attention au poids de celle ci. Des images trop lourdes ralentissent le temps d’affichage du site. L’optimisation peut se faire manuellement à l’aide d’un logiciel comme photoshop par exemple mais il existe également de nombreux plugins WordPress permettant d’accomplir cette tâche.
Lorsque l’on décide de définir de nouvelles tailles d’images, les images qui sont déjà installées sur le serveur ne sont pas déclinées dans ces nouvelles dimensions. Un plugin WordPress peut être envisagé pour remèdier à ce problème.
Par défaut, WordPress stocke les médias dans le dossier <projet>/wp-content/uploads/<année>/<mois>. Il est possible de modifier ce dossier cible en intégrant une ligne de code dans le fichier wp-config.php. Si l’on souhaite par exemple placer nos médias dans le dossier img à la racine du projet, le code sera le suivant : <?php define('UPLOADS', ''.'<mon dossier>'); ?>. Le classement dans les sous dossiers <année>/<mois> peut également être désactivé depuis la partie admin depuis Réglages>Médias.
Il est très important de faire attention au poids des images afin d’optimiser le temps de chargement du site. Il est aisé d’automatiser la compression en intégrant dans le fichier functions.php la ligne de code suivante : add_filter('jpeg_quality', function() {return $compression;});
Le curseur d’ajustement est la variable $compression comprise entre 1 et 100. La valeur 100 signifie qu’aucune compression ne sera appliquée.