How to add an automatic class to an image for a Wordpress post

Question

I want to create a responsive theme using Bootstrap 3. However, I need to automatically add the .img-responsive CSS class to each post, because I need the images to respond.

Please suggest me what I need to add to the WordPress file functions.php or any other file that will allow me to automatically add a CSS class.

Answer 1

since you need to have it for all your mail images, then you need to add a hook for the content and add

 function add_responsive_class($content){ $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8"); $document = new DOMDocument(); libxml_use_internal_errors(true); $document->loadHTML(utf8_decode($content)); $imgs = $document->getElementsByTagName('img'); foreach ($imgs as $img) { $img->setAttribute('class','img-responsive'); } $html = $document->saveHTML(); return $html; } 

now add content binding

 add_filter ('the_content', 'add_responsive_class'); 

However, if you already have classes for img, and you need to add a new class, you can refer to the PHP equivalent of jQuery addClass . Or you can simply do this:

 $existing_class = $img->getAttribute('class'); $img->setAttribute('class', "img-responsive $existing_class"); 

The above code works. I use it to remove src and data-src to lazily load the image. Hope this works for you.

Answer 2

I think the easiest way is to use CSS like this.

 .content img { height: auto; max-width: 100%; } 

Where .content is the area in which your message is contained.

Note You can also override the .wp-caption class in the same way.

 .wp-caption { width: auto !important; } 

Answer 3

This approach is better: https://wordpress.stackexchange.com/questions/108831/add-css-class-to-every-image

 function add_image_class($class){ $class .= ' additional-class'; return $class; } add_filter('get_image_tag_class','add_image_class'); 

The only caveat is that it adds a class to the editing area when you insert new images and do not affect existing ones.

Answer 4

I had the same question, and adding this function to the .php function worked for me.

 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'); 

Answer 5

When you display a message in your loop, you can do:

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

See https://codex.wordpress.org/Function_Reference/the_post_thumbnail for details.

Answer 6

Not quite sure how good this answer is, but it works. Just put this in functions.php.

 function img_responsive($content){ return str_replace('<img class="','<img class="img-responsive ',$content); } add_filter('the_content','img_responsive'); 

Note that you need space after class="img-responsive so that it does not merge with other classes.

Answer 7

You can use jquery code in the header.php file of your theme.

 jQuery(function() { jQuery(img).addClass('img-responsive'); }); 

Answer 8

I think you do not need to add a class to make it responsive. just remove the width height from the image shown, the image will become responsive.

Added code to your function.php file to remove width height

 add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 ); function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) { $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html ); return $html; } 

Answer 9

Classes are not added when loading, but when the image is sent to the editor. You can use the image_send_to_editor filter to add one or more classes. In this example , the fancybox class is fancybox .

Answer 10

 //all classes i need in a string $classes = 'img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image'; //then i use my variable the_post_thumbnail('post_thumbnail', array( 'class' => $classes )); 

Answer 11

You can simply make all images responsive in css, as stated here:

I want to apply the css (bootstrap) .img class to all content images

This uses LESS, but the version of Sass is almost the same:

  img { @include img-responsive(); }