Jan Dembowski on "Add Code Before Each Image"

A little explanation about my answer below: people are encouraged here to write their own code. It's the best way to learn and this is a self-help forum.

Okay, now that that's out of the way, that's a kinda neat problem and I like recycling old code. ;)

Inside the_content() you want all the <img ...> HTML to become wrapped like so:

<span class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo catch_that_image(); ?>&description=<?php the_title(); ?>" class="pin-it-post"></a>
<img ...>
</span>

And it looks like from the example link you provide that you want to use catch_that_image() from http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it to get the img URL to.

I'm not using that function as I was able to get the image URL via some more regex.

What you want can be implemented via a plugin and by filtering the_content. Download this code and save it to wp-content/plugins as wrap-img-pinterest.php.

http://pastebin.com/PJ9S4zWe

<?php
/*
Plugin Name: Pinterest Img Tag Button
Description: This will wrap images in the_content with Pinterest Button code
Author: Jan Dembowski
Author URI: http://blog.dembowski.net/
Version: 0.1

From http://wordpress.org/support/topic/add-code-before-each-image

*/

add_filter( 'the_content' , 'mh_wrap_image' );

function mh_wrap_image( $content ) {
global $post;
// Regex to find all <img ... > tags
$mh_url_regex = "/\<img [^>]*src=\"([^\"]+)\"[^>]*>/";

// If we get any hits then put the code before and after the img tags
if ( preg_match_all( $mh_url_regex , $content, $mh_matches ) ) {;
        for ( $mh_count = 0; $mh_count < count( $mh_matches[0] ); $mh_count++ )
                {
                // Old img tag
                $mh_old = $mh_matches[0][$mh_count];

                // Get the img URL, it's needed for the button code
                $mh_img_url = preg_replace( '/^.*src="/' , '' , $mh_old );
                $mh_img_url = preg_replace( '/".*$/' , '' , $mh_img_url );

                // Put together the pinterest code to place before the img tag
                $mh_pinterest_code = '<span class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=' . urlencode( get_permalink() ) . '&media=' . $mh_img_url . '&description=' . urlencode( get_the_title() ) . '" class="pin-it-post"></a>';

                // Replace before the img tag in the new string
                $mh_new = preg_replace( '/^/' , $mh_pinterest_code , $mh_old );
                // After the img tag
                $mh_new = preg_replace( '/$/' , '</span>' , $mh_new );

                // make the substitution
                $content = str_replace( $mh_old, $mh_new , $content );
                }
        }
return $content;
}

Once you've saved that then visit your WordPress dashboard and activate the plugin called Pinterest Img Tag Button.

This using this plugin the_content gets filtered and any img tags that are found get wrapped in that span. The URL to the post gets urlencode() as well as the title. The &media part did not get encoded in your example so I'm going to assume that's correct.

This plugin works for images but does not work for gallery images. I'm not sure why, it may need to be applied to another filter besides the_content.