1

In wordpress Currently by default image attachment 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

Nimesh
  • 198
  • 1
  • 2
  • 13

2 Answers2

1

Instead of modifying all of your posts or applying the 'img-fluid' class dynamically, perhaps consider using CSS3 selectors to apply the same styles to all of your image attachments using an existing class. For example you could use:

img[class*='wp-image-']

This targets all image elements on the page which include 'wp-image-' in the class attribute. Here is an example:

img[class*='wp-image-'] {
   width: 25%;
   height: 25%;
   opacity: 0.5;
   border: 2px solid #000;
}
<img class="size-full wp-image-8996" src="https://nepaltimes.net/wp-content/uploads/2018/04/31043884_1792179470828697_8330507756888915968_n.jpg" />

Finally, if you need to use the specific class 'img-fluid', if for example you are integrating Bootstrap into an existing site, you could use SASS to extend the 'img-fluid' selector using a selector that works with the class names already on the img tags. Here's an example:

img[class*='wp-image-'] {
  @extend .img-fluid;

}
ansibly
  • 398
  • 3
  • 7
0

You can get this in several ways.

In wordpress if you are theming your custom website, then you have option to take the url of your image not whole image tag generated by wordpress function like.

<img class="img-fluid size-full wp-image-8996" src="<?php echo get_the_post_thumbnail_url(); ?>"/>

Other way to do that is by using javascript you can add your custom class on document load event.

Bangash
  • 117
  • 9