Relier get_the_post_thumbnail() au css

Publié le 15 décembre 2024

WordPress

Pour lier get_the_post_thumbnail() à du CSS, vous pouvez utiliser les attributs de l’image retournés par cette fonction et les styliser avec des règles CSS. Voici quelques exemples :

Ajouter une classe à l’image :

<?php the_post_thumbnail('thumbnail', array('class' => 'img-responsive')); ?>

Dans votre fichier CSS, vous pouvez ensuite cibler cette classe pour appliquer des styles :

.img-responsive {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

Utiliser les attributs natifs de l’image (par exemple, alt, title, srcset) pour les styliser :

<?php the_post_thumbnail('thumbnail', array('alt' => 'Image de la publication', 'title' => 'Voir l\'image')); ?>

Dans votre fichier CSS, vous pouvez ensuite cibler ces attributs pour les styliser :

img[alt="Image de la publication"] {
  /* styles pour l'attribut alt */
}

img[title="Voir l'image"] {
  /* styles pour l'attribut title */
}

Utiliser les media queries pour appliquer des styles en fonction de la taille de l’image ou de l’écran :

<?php the_post_thumbnail('large', array('sizes' => '(max-width: 768px) 50%, (max-width: 1024px) 75%')); ?>

Dans votre fichier CSS, vous pouvez ensuite cibler les règles pour les tailles d’écran spécifiques :

@media (max-width: 768px) {
  img.large {
    width: 50%;
  }
}

@media (max-width: 1024px) {
  img.large {
    width: 75%;
  }
}

Utiliser un hook pour modifier le HTML de l’image avant qu’il ne soit rendu :

function modify_post_thumbnail_html($html) {
  $html = str_replace('width="', 'width="50%', $html);
  return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html');

Dans votre fichier CSS, vous pouvez ensuite cibler l’élément modifié :

.post-thumbnail {
  width: 50%;
}