Override img class in gallery

Question

I use Wordpress for AngularJS as backend (wp-json plugin ) and actually what I made as structure for the theme looks like

myApptheme
  -style.css //nothing special here just inits the theme
  -index.php
  -header.php
  -functions.php
  lib //here some overrides php
  --gallery.php
  app //holds the angular stuff generated with yo angular
  bower_components //bower packages what I need 

and in gallery.php(this one I borrowed from roots with own changes ) I add masonry needed markup and I try to filter my gallery items and add custom class (img-responsive) for bootstrap. The snippet looks as it follows.

/**
 * Add class="img-responsive" to attachment items
 */


function responsive_attachment_link_class($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('wp_get_attachment_link', 'responsive_attachment_link_class'); 

removing img width|height works but not the class override. What is wrong with this codes?

actual output

<img alt="ind018" class="attachment-large" src="http://wp.local/wp-content/uploads/2014/08/ind018-728x1024.jpeg">

expected

<img alt="ind018" class="img-responsive" src="http://wp.local/wp-content/uploads/2014/08/ind018-728x1024.jpeg">

Answer 1

You should add !important to your styles in order to override it. Better way to do this is to copy the .img-responsive styles from the Bootstrap CSS file and apply these styles to your desired HTML element instead of adding a class using PHP.

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

Or target the element by the parent element if the class is not constant.

OR use this filter.

function my_image_class_filter( $classes ) {
    return $classes.' attachment-large';
}
add_filter( 'get_image_tag_class', 'my_image_class_filter' );`