3

I want to wrap some html (divs and classes) around the tag (to create the appearance of photo corners by way of an image sprite).

Basically, I want to re-write all tags added by WP in the content by way of some code in my functions file from this:

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

to this:

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

I want this done after the page has been added/edited by me or anyone else adding content. I tried using wp_get_attachment_image with the function below, and it added the html ONLY when adding the image the first time into the edit content screen. Plus, when the image itself is dragged around inside the edit box, or possibly removed, remnants of the html are messed up.

    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);

It seems like every option I look at with a filter or a hook only adds it during the add-image step in the edit screen. Am I mistaken on this? I'd be fine with a jquery option to change the html on/after page load, but I'm not quite sure how to write that, and not sure if that is necessary? Any help is appreciated!

5
  • Why not use JS/jQuery? A simple check to see if img.imgWithCorner exists, and then a append/prepend function.
    – cr0z3r
    Commented Dec 8, 2011 at 15:56
  • I think the code/images after "from this" and "to this" are missing Commented Dec 8, 2011 at 21:30
  • Yes Naoise, so sorry. Went back to grab the code and then hit the submit button. I'll go fix the question now. Commented Dec 9, 2011 at 14:32
  • cr0z3r, how would that work? Commented Dec 9, 2011 at 14:37
  • Well I've solved half of it ... The featured images were easy to change the layout. Now, to figure out how to get the code set up for the images that WordPress automatically inserts. Commented Dec 10, 2011 at 20:57

1 Answer 1

4
+50

One way is to do this dynamically:

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');
15
  • I would definitely opt for this tactic. Saving all that HTML in your DB and loading it in the editor is a mess, and asking for trouble! Commented Dec 11, 2011 at 17:34
  • Thanks this looks much cleaner so far... do I put this in my functions file? or the template file itself... Commented Dec 11, 2011 at 17:40
  • I tried adding to functions file, nothing happened. Added to my page template file and get the following error: * Warning: preg_replace_callback() [function.preg-replace-callback]: Requires argument 2, 'do_the_replacements', to be a valid callback* Commented Dec 11, 2011 at 17:44
  • --- I think maybe it's because I have a lightbox plugin that auto-adds rel="colorbox" to the a tag...? Commented Dec 11, 2011 at 17:53
  • I dont think so... try adding the updated code in your functions file Commented Dec 11, 2011 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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