Skip to content

Instantly share code, notes, and snippets.

@mkdizajn
Last active May 6, 2020 15:59
Show Gist options
  • Save mkdizajn/7352469 to your computer and use it in GitHub Desktop.
Save mkdizajn/7352469 to your computer and use it in GitHub Desktop.
Wordpress Bootstrap 3 responsive images
<?php
//----------------------------------------------------------/
// responsive images [ 1) add img-responsive class 2) remove dimensions ]
//----------------------------------------------------------/
function bootstrap_responsive_images( $html ){
$classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link'
// check if there are already classes assigned to the anchor
if ( preg_match('/<img.*? class="/', $html) ) {
$html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html);
} else {
$html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html);
}
// remove dimensions from images,, does not need it!
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
add_filter( 'the_content','bootstrap_responsive_images',10 );
add_filter( 'post_thumbnail_html', 'bootstrap_responsive_images', 10 );
@MahbbRah
Copy link

Wow ! It's just great.. working ! Thank you dear.

@Floppy82
Copy link

really great! you helped me a lot!

@priyabratary
Copy link

But it is removing the video width and height, can you please help ?

@martinkariuki7
Copy link

Beautiful!

@richyzak
Copy link

SUper et vraiment gentil

@kokushta
Copy link

Thanks! Very helpful!

@luisramirezdev
Copy link

Thanks for this !, It worked perfect!

@keepsmilyn
Copy link

This worked for me. But with one slight adjustment to make sure the photoswipe.min.js did no produce a JS error, this lines were commented out:

      `$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );`

Alternative version used as shown here, with some tweaks as required:
woocommerce/woocommerce#15376

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment