How to add automatic class in image for wordpress post

since you need to have it for all of your post 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 the hook to the content

add_filter ('the_content', 'add_responsive_class'); 

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

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

The code above works .. i use it to remove src and data-src for image lazy loading. Hope it works for you

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

Only caveat is that it adds the class within the edit pane when you insert new images and doesn't affect pre existing ones.

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

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

Where .content is the area that contains your post content.

Note: You may also want to override the .wp-caption class as well like so.

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

I had the same question, and adding this function to functions.php 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'); 

When you display post in your loop, you could do :

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

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

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

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

I think you don't require to add class to make image responsive. just remove height width from featured image, image will become responsive definitely.

There is code put in your function.php to remove height width

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; } 

Not quite sure how good this answer is performance wise 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'); 

Please note that you need the space after class="img-responsive so it doesn't merge with other classes.

Classes are not added on upload, but when the image is sent to the editor. You can use the image_send_to_editor filter to add one or more classes. This example adds a fancybox class.

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

You could just make all images responsive in the css as mentioned here:

I want to apply css class(bootstrap) .img-responsive on all content images

That uses LESS, but the Sass version is pretty much the same:

 img { @include img-responsive(); }