Ajouter automatiquement la class img-fluid à toutes les images de l’éditeur WordPress

Rendre les images responsive éditeur Wordpress avec Bootstrap
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

[pastacode lang="php" manual="function%20add_image_responsive_class(%24content)%20%7B%0A%20%20%20global%20%24post%3B%0A%20%20%20%24pattern%20%3D%22%2F%3Cimg(.*%3F)class%3D%5C%22(.*%3F)%5C%22(.*%3F)%3E%2Fi%22%3B%0A%20%20%20%24replacement%20%3D%20'%3Cimg%241class%3D%22%242%20img-responsive%22%243%3E'%3B%0A%20%20%20%24content%20%3D%20preg_replace(%24pattern%2C%20%24replacement%2C%20%24content)%3B%0A%20%20%20return%20%24content%3B%0A%7D%0Aadd_filter('the_content'%2C%20'add_image_responsive_class')%3B" message="Ajoute la classe .img-responsive sur toutes les images WordPress" highlight="" provider="manual"/]

Bootstrap 4 et img-fluid

Avec Bootstrap 4, utilisez la classe "img-fluid" : https://getbootstrap.com/docs/4.0/content/images/

[pastacode lang="php" manual="function%20add_image_fluid_class(%24content)%20%7B%0A%20%20%20global%20%24post%3B%0A%20%20%20%24pattern%20%3D%22%2F%3Cimg(.*%3F)class%3D%5C%22(.*%3F)%5C%22(.*%3F)%3E%2Fi%22%3B%0A%20%20%20%24replacement%20%3D%20'%3Cimg%241class%3D%22%242%20img-fluid%22%243%3E'%3B%0A%20%20%20%24content%20%3D%20preg_replace(%24pattern%2C%20%24replacement%2C%20%24content)%3B%0A%20%20%20return%20%24content%3B%0A%7D%0Aadd_filter('the_content'%2C%20'add_image_fluid_class')%3B" message="Ajoute la classe .img-fluid sur toutes les images WordPress" highlight="" provider="manual"/]

Have fun !


Si cet article vous a aidé, lâchez votre plus bel applaudissement en remerciement ! 🤗