web-dev-qa-db-fra.com

Ignorer la classe img dans la galerie

J'utilise Wordpress pour AngularJS comme backend (plug-in wp-json) et ce que j'ai créé en tant que structure pour le thème ressemble

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

et dans gallery.php (celui que j’ai emprunté aux racines avec mes propres modifications), j’ajoute le balisage nécessaire à la maçonnerie et j’essaie de filtrer les éléments de ma galerie et d’ajouter une classe personnalisée (img-responsive) pour bootstrap. L'extrait ressemble à ce qui suit.

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

la suppression de img width|height fonctionne mais pas le remplacement de classe. Quel est le problème avec ces codes?

sortie réelle 

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

attendu 

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

Vous devez ajouter !important à vos styles afin de le remplacer. Pour ce faire, le mieux est de copier les styles .img-responsive à partir du fichier CSS Bootstrap et d’appliquer ces styles à l’élément HTML souhaité au lieu d’ajouter une classe à l’aide de PHP.

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

Ou ciblez l'élément par l'élément parent si la classe n'est pas constante.

OU utilisez ce filtre .

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