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.

Improve this question
2

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

How to create theme.less file
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: 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.
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>
Improve this answer

Comments

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.

Improve this answer

Comments

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'); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.