How do I add div around each WordPress post images & retrieve hovered image for social sharing?

2 Views

I want to add div around every images in my posts in order to be able to add social share icons on hover.
For this, I’ve used this useful code shared by Rick Sanchez: How do I add A Div around each WordPress post image ? 

function breezer_addDivToImage( $content ) {
   // A regular expression of what to look for.
   $pattern = '/(<img([^>]*)>)/i';
   // What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
   $the_url = the_permalink();
   $replacement = '<div class="imgWrap"> 
                        $1
                        <div class="imgDescription">
                                            <div class="theShareLinks">
                                                <img src="http://localhost/mysite/wp-content/uploads/2014/08/dfc2.png" />
                                                <a href="http://twitter.com/share?text=&url='.get_the_permalink() .'" class="img-twitter" title="Share on Twitter" target="_blank"></a>
                                                <a href="http://www.facebook.com/sharer.php?u='.get_the_permalink() .'?" class="img-facebook" title="Share on Facebook" target="_blank" onclick="window.open(this.href, 'newwin', 'width=500, height=200'); return false;" ></a>
                                                <a href="https://plus.google.com/share?url='.get_the_permalink() .'" class="img-google" title="Share on Google" target="_blank"></a>
                                            </div>
                                        </div>
                    </div>';

   // run preg_replace() on the $content
   $content = preg_replace( $pattern, $replacement, $content );

   // return the processed content
   return $content;
}

add_filter( 'the_content', 'breezer_addDivToImage' );

With this code, I’m now able to display share icons above each image (twitter, google & facebook) but my problem is that the image shared is always the first image of the post and not the image hovered (for example second, third and so on).
Do you have any idea how I could do this based on the code provided by Rick? How it could be possible to retrieve the hovered image?

Read More

Thanks a lot for your help!

Post Views: 2

Related posts

1 comment

  1. I’ve worked on the code above and I’m now able to retrieve the url of each image in the post in the matches table. This will permit to retrieve each image url for the social network sharing button but I’m blocked now on how to use preg_replace with the replacement variable that will be different for each image as it will retrieve the image url saved in the matches table. Do you know how I can do this?

    For retrieving each image url I used this code:

    // search for images inside content and return images URLs
    $count = preg_match_all('/<s*img [^>]*srcs*=s*[""']?([^""'>]*)/i' , $content, $matches);

    // now all my images url are in $matches[1][x]

Comments are closed.