Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
    
Why not use JS/jQuery? A simple check to see if img.imgWithCorner exists, and then a append/prepend function. –  cr0z3r Dec 8 '11 at 15:56
    
I think the code/images after "from this" and "to this" are missing –  Naoise Golden Dec 8 '11 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. –  RodeoRamsey Dec 9 '11 at 14:32
    
cr0z3r, how would that work? –  RodeoRamsey Dec 9 '11 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. –  RodeoRamsey Dec 10 '11 at 20:57
add comment

1 Answer

up vote 3 down vote accepted
+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');
share|improve this answer
    
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! –  TheDeadMedic Dec 11 '11 at 17:34
    
Thanks this looks much cleaner so far... do I put this in my functions file? or the template file itself... –  RodeoRamsey Dec 11 '11 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* –  RodeoRamsey Dec 11 '11 at 17:44
    
--- I think maybe it's because I have a lightbox plugin that auto-adds rel="colorbox" to the a tag...? –  RodeoRamsey Dec 11 '11 at 17:53
    
I dont think so... try adding the updated code in your functions file –  onetrickpony Dec 11 '11 at 18:08
show 10 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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