How to add automatic class in image for wordpress post

12 comments

1. 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

   Log in to Reply

2. 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.

   Log in to Reply

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

   Log in to Reply

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

   Log in to Reply

5. 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.

   Log in to Reply

6. 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.

   Log in to Reply

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

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

   Log in to Reply

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

   Log in to Reply

9. 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.

   Log in to Reply

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

    Log in to Reply

11. 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();
      }
    

    Log in to Reply

12. 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>
    

    Log in to Reply