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 !
Laisser un commentaire