webentwicklung-frage-antwort-db.com.de

Überschreibe die img Klasse in der Galerie

Ich benutze Wordpress für AngularJS als Backend (wp-json plugin) und tatsächlich sieht das, was ich als Struktur für das Theme erstellt habe, so aus

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

und in gallery.php (diese habe ich von Roots mit eigenen Änderungen ausgeliehen) füge ich gemauertes Markup hinzu und versuche meine Galerieelemente zu filtern und eine benutzerdefinierte Klasse (img-responsive) für Bootstrap hinzuzufügen. Das Snippet sieht folgendermaßen aus.

/**
 * 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');

entfernen von img width|height funktioniert, aber nicht die Klassenüberschreibung. Was ist los mit diesen Codes?

tatsächliche Leistung 

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

erwartet 

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

Sie sollten !important zu Ihren Stilen hinzufügen, um sie zu überschreiben. Eine bessere Möglichkeit besteht darin, die .img-responsive -Stile aus der Bootstrap-CSS-Datei zu kopieren und diese Stile auf das gewünschte HTML-Element anzuwenden, anstatt eine Klasse mit PHP hinzuzufügen.

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

Oder zielen Sie auf das Element durch das übergeordnete Element, wenn die Klasse nicht konstant ist.

ODER verwenden Sie diesen Filter.

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