web-dev-qa-db-fra.com

Modifier la sortie des images dans le contenu

Je veux envelopper des balises HTML (divs et classes) autour de la balise (pour créer l’apparence de coins de photo au moyen d’une image Sprite).

En gros, je veux réécrire toutes les balises ajoutées par WP dans le contenu à l'aide d'un code dans mon fichier de fonctions à partir de ceci:

<a href="#link"><img src="image.jpg" class="someclass"></a>

pour ça:

<div class="featured-img">
    <a rel="#lightbox" href="#link" class="#lightboxclass"><img src="image.jpg" class="someclass"></a>
    <div class="corner-nw"></div>
    <div class="corner-ne"></div>
    <div class="corner-sw"></div>
    <div class="corner-se"></div> 
</div>

Je veux que cela soit fait après la page a été ajoutée/modifiée par moi-même ou par quiconque en ajoutant du contenu. J'ai essayé d'utiliser wp_get_attachment_image avec la fonction ci-dessous et l'ajout du code HTML SEULEMENT lors de l'ajout de l'image pour la première fois dans l'écran de modification du contenu. De plus, lorsque l’image elle-même est déplacée à l’intérieur de la zone d’édition, voire supprimée, les traces du code HTML sont gâchées.

    function image_corners( $html, $id, $alt, $title ){
    $html = '<div class="featured-img"><img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" '.$hwstring.'class="'.$class.'" /><div class="corner-nw"></div><div class="corner-ne"></div><div class="corner-sw"></div><div class="corner-se"></div></div>';
    return $html;
    }
add_filter('wp_get_attachment_image','image_corners',10,4);

Il semble que chaque option que je regarde avec un filtre ou un crochet ne l’ajoute que pendant l’étape d’ajout d’image dans l’écran d’édition. Est-ce que je me trompe? Je serais bien avec une option jQuery pour changer le HTML sur/après le chargement de la page, mais je ne sais pas trop comment écrire cela, et ne suis pas sûr si cela est nécessaire? Toute aide est appréciée!

post-thumbnailsimagescontent
2
RodeoRamsey

Une façon est de le faire dynamiquement:

function do_the_replacements($matches){

  // $matches[0] = full string
  // $matches[1] = link attributes
  // $matches[2] = link contentes (the image)

  // change 'someclass' here...
  if(strpos($matches[2], 'someclass') !== false){
    return '
      <div class="featured-img">
        <a '.$matches[1].'>'.$matches[2].'</a>
        <div class="corner-nw"></div>
        <div class="corner-ne"></div>
        <div class="corner-sw"></div>
        <div class="corner-se"></div>
      </div>
    ';

  }

  // no matches, leave it as it is
  return $matches[0];
}

function my_content_filter($content){
  return
    preg_replace_callback('#\<a(.+?)\>(.+?)\<\/a\>#s', 'do_the_replacements', $content);
}

add_filter('the_content', 'my_content_filter');
3
onetrickpony