2

I am developing a Wordpress theme with the help of bootstrap so I am manually applying cases on all content images like this:

<img src="images/logo_03.png" class="img-responsive">

Is there any way to apply the same class properties automatically? I don't want to query for this purpose. I am sure bootstrap has a way to solve my problem, so let me know any solution with CSS.

rnevius
  • 26,578
  • 10
  • 58
  • 86
Sohail Qureshi
  • 689
  • 11
  • 24
  • You can add the class with jQuery, if you want. – rnevius Nov 15 '14 at 13:19
  • possible duplicate of [How to add automatic class in image for wordpress post](http://stackoverflow.com/questions/20473004/how-to-add-automatic-class-in-image-for-wordpress-post) – rnevius Nov 15 '14 at 13:20

4 Answers4

5

You can use the LESS mixins directly in your theme. If you want all images to be responsive you can say:

//in your theme.less file
img {
  .img-responsive();
}

Will give you this in your theme.css file:

img {
  //all Bootrap CSS properties that make your image responsive
  //including surrounding media queries
}

However, this is not recommended because it applies to all <img> tags.

A more professional option would be to make your class like:

//in your theme.less file
.theme-img {
  .img-responsive();
  //additional theme-specific styling
  border: 1px solid blue;
}

and apply it to your images:

<img class="theme-img" src="..." />

Update: unlike the other answers that suggest using jQuery, this solution doesn't need any scripting and it works in old browsers (eg. IE). Besides it will work for any <img> tag that is inserted into the document even after the jQuery code is run. If you decide to go with Javascript, however, I recommend using document.querySelectAll() because it doesn't need jQuery and runs slightly faster.

AlexStack
  • 16,766
  • 21
  • 72
  • 104
  • How to create theme.less file – Sohail Qureshi Nov 15 '14 at 13:49
  • If you ask that question, I assume you are using plain CSS to create your theme. That is fine, but as you saw it has its own limitations. LESS is a language that brings more flexibility to CSS. Bootstrap itself is written in LESS and then compiled to CSS. To learn the syntax of LESS, look here: http://lesscss.org All you have to do is to rename your current CSS file to have ".less" extension. Then @import "bootstrap" from a local directory (where you have downloaded Bootstrap) and then use LESS compiler to generate CSS. OK, it may sound like too much work, but LESS is quite powerful. – AlexStack Nov 15 '14 at 18:21
4

Should be easy enough to add the class based on the element attribute, see below:

<script type="text/javascript">
    $(document).ready(function() {
        $("img").addClass("img-responsive");
});
</script>
Mike Anderson
  • 597
  • 3
  • 7
  • 21
2

The best way is to use the declarations provided by bootstrap for the class .img-responsive in your CSS.

For instance, you can set all the images of your website with the content of that class:

img {
display: block;
max-width: 100%;
height: auto;}

and that's it.

All your images will have the content of the class .img-responsive without the need of specify it.

viery365
  • 935
  • 2
  • 12
  • 30
1

If you want to add the img-responsive class to post thumbnail image in WordPress you can add like this

the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

If you want to add to another image in content you can add img-responsive class to those image with jQuery just add this to your javascript file

jQuery(document).ready(function( $ ) {

/*add Class to Element*/
 $('.wp-post-image').addClass('"img-responsive');


});
khan33
  • 101
  • 5