How to add automatic class in image for wordpress post

Question

I want to make a responsive theme with Bootstrap 3. However, I need to automatically add the CSS class .img-responsive to every post image because I need the i

Answer 1

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.

Answer 2

I have the following code, and as the posts are from previous versions ... They did not work ...

What should I do?

<figure class="image"><img class="lazyload p402_hide" alt="" 
 width="800" height="400" data-sizes="auto" data- 
src="https://br.clubnation.club/wp-content/uploads/2020/01/primeira- 
loja-oficial-de-harry-potter-sera-aberta-em-nova-york-2.jpg" data- 
 srcset="https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera-aberta- 
 em-nova-york-2.jpg 328w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-3.jpg 380w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-4.jpg 528w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-5.jpg 704w" />
 <figcaption>A loja será inaugurada no próximo verão.
 (Fonte: Warner Bros/Divulgação)</figcaption></figure>

Answer 3

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.

Answer 4

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

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

Answer 5

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

Answer 6

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.