0

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

  • Are you using a function to display image? Like the_post_thumbnail() ? – Colin Smillie Apr 28 '18 at 16:14
1

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;
    }
  • Sorry i added it in functions.php but it didn't work goo.gl/r4eK21 Please help me – Nimesh Apr 28 '18 at 16:58
  • It will not work on existing posts. – cjbj Apr 28 '18 at 19:54
1

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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