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.
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.
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> 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.
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'); }); 