Accueil > Le Blog > Ajouter automatiquement la class img-fluid à toutes les images de l’éditeur WordPress
WordPress
Lecture 2 minutes • 12 avril 2020
Ce code est à saisir dans le fichier functions.php de WordPress. Il ajoute automatiquement la classe CSS img-responsive ou img-fluid aux images que vous ajoutez via l'éditeur WordPress (classique ou Gutenberg). Ainsi les règles CSS de Bootstrap s'appliquent automatiquement aux images dans le contenu de vos pages et articles.
Bootstrap 3 et img-responsive
Pour Bootstrap 3, utilisez la classe "img-responsive" : https://getbootstrap.com/docs/3.4/css/#images
function add_image_responsive_class($content) {
global $post;
$pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
$replacement = '<img$1class="$2 img-responsive"$3>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'add_image_responsive_class');
Ajoute la classe .img-responsive sur toutes les images WordPress
Bootstrap 4 et img-fluid
Avec Bootstrap 4, utilisez la classe "img-fluid" : https://getbootstrap.com/docs/4.0/content/images/
function add_image_fluid_class($content) {
global $post;
$pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
$replacement = '<img$1class="$2 img-fluid"$3>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'add_image_fluid_class');
Ajoute la classe .img-fluid sur toutes les images WordPress
Have fun !