1

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">

1 Answer 1

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' );`
5
  • look at the update. You can not achieve from css. First you need the class to do css manipulations
    – fefe
    Nov 1, 2014 at 9:29
  • @fefe see my updated answer.
    – SLH
    Nov 1, 2014 at 9:47
  • 1
    !important is really not the best way to override. If you properly enqueue stylesheets this won't be necessary Nov 1, 2014 at 10:58
  • another update what I made
    – fefe
    Nov 1, 2014 at 11:21
  • @PieterGoosen you're right but if he has inline styles like width or height he probably needs to add !important to max-width and height css properties.
    – SLH
    Nov 1, 2014 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.