[Total : 2   Moyenne : 5/5]

Ce code est à saisir dans le fichier functions.php de WordPress. Il ajoute automatiquement la classe css aux images ajoutées via l’éditeur WordPress (classique ou Gutenberg), afin de les rendre responsive.

Pour Bootstrap 3, utiliser 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

 

Pour Bootstrap 4, utiliser 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 !