Hello there!
I’ve just found how to make all the images responsive automatically when inserting into the post of page. It works for me, so maybe it will help to anyone.
You should put this code to custom.php:
// responsive images auto class
function add_image_responsive_class($content) {
global $post;
$pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
$replacement = '<img$1class="$2 img-responsive"$3>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'add_image_responsive_class');
So now if you insert full-size image into the post, it will fill the full width of post container.
var Roots = {
// All pages
common: {
init: function() {
// JavaScript to be fired on all pages
$('.main').fitVids();
$(".navbar-fixed-top").autoHidingNavbar();
$("img").addClass("img-responsive");
}
That doesn’t address the hard coded width and height that Wordpress adds in the editor (why it does that in a responsive world is beyond me!). So I used the following
Now I have noticed that some posts also have [caption.... width="500" markup in the editor which turns into <figure...style="width:'500px'" in the rendered page. All this filtering seems very second best - is there a better way?