1

Currently by default image have similar classes

<img class="size-full wp-image-8996" src="https://nepaltimes.net/wp-content/uploads/2018/04/31043884_1792179470828697_8330507756888915968_n.jpg">

What i am trying here to add a class as img-fluid to all the attachments in posts not the thumbnails.

<img class="img-fluid size-full wp-image-8996" src="https://nepaltimes.net/wp-content/uploads/2018/04/31043884_1792179470828697_8330507756888915968_n.jpg">

How could it be done?
Any Idea will be appreciated! Please help me

1
  • Are you using a function to display image? Like the_post_thumbnail() ? Commented Apr 28, 2018 at 16:14

3 Answers 3

4

You can use the filter get_image_tag_class which exists exactly to do what you want:

add_filter('get_image_tag_class','wpse302130_add_image_class');

function wpse302130_add_image_class ($class){
    $class .= ' img-fluid';
    return $class;
    }
4
  • 1
    Sorry i added it in functions.php but it didn't work goo.gl/r4eK21 Please help me
    – Nimesh
    Commented Apr 28, 2018 at 16:58
  • 1
    It will not work on existing posts.
    – cjbj
    Commented Apr 28, 2018 at 19:54
  • And it will not work for the_post_thumbnail();. It will work only for what you have in wysiwyg editor
    – kanlukasz
    Commented Mar 18, 2020 at 14:18
  • Also will not work if you generate posts programatically, or with a plugin like Faker Press
    – Bruno Polo
    Commented Aug 14, 2023 at 3:50
0

cjbj's answer seems more better but i am still leaving this for reference that we can also do these ways.

There are 3 way.

  1. Solve it in frontend(with Javascript)
  2. Solve it in backend(with PHP)
  3. Solve it manually

First one, you run javascript to add class like:

ref.: w3school

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.add("mystyle");
} 

while you loop through all the img tags.

Second one, you have to parse post contents with PHP DOM and do the same thing like Javascript.

Third one, you edit the post with text and add your class manually.

1
  • I tried using the javascript, it don't execute though, Please show me a proper path to implement it successfully! Thanks
    – Nimesh
    Commented Apr 29, 2018 at 4:55
0

These above solutions are great but for an incredibly simple fix for this specific issue. I've added the CSS for img-fluid onto the standard classes that wordpress adds to it's images:

.size-thumbnail, .size-medium, .size-large, .size-full {
    max-width: 100%;
    height: auto;
}

This may not be as elegant as the above solutions but performance wise it's just a little chunk of CSS.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.