Adding auto hyperlink to images

2 Views

I have created a wordpress blog for images. While publishing all the posts, I didn’t use wordpress editor to upload images. Instead, I used FillaZilla to upload the images. Then, in the wordpress editor, I manually wrote only the image tag (below) in all the posts and published it. All posts contain no text, but only images. Like this, 

<img alt="" title="" src=""></img>

Now what I want to ask you is that I want the images in all the posts to get auto hyperlink address same as the image src. I have more than 200 blog posts in my wordpress blog. I don’t want to edit all of them one by one. Here’s the coding of the wordpress content area,

Read More
<div class="post-entry">
                                            <p><img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="sun" alt="sun" /></p>

</div>

Could anyone please help me on this? how can I add hyperlink to the images? Is there any code which I can put in the post-entry div in my wordpress theme page?

@chandu-vkm explained (in the comments) exactly what I was looking for. Now I have one more question. When I add a a span tag before img , the code @chandu-vkm mentioned doesn’t let me add span tag right before img tag. Instead it places the place tag outside the p tag, like in the code below. 

<div class="post_div">
<span class="entry"></span>
<p>
<img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="Cute Teddy Bear" alt="Cute Teddy Bear" />
</p>
</div>

But I want span to be placed right after p, like this. 

 <div class="post_div">
        <p>
         <span class="entry"></span>
        <img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="Cute Teddy Bear" alt="Cute Teddy Bear" />
        </p>
    </div>

Somebody please help me out.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. you can do it with some jquery

    <div class="post_div">
    <img src='http://www.mywebsite.com/wp-content/uploads/2012/04/sun.jpg' title="sun" alt="sun" />
</div>

    like this 

    $('.post_div img').each(function(){
$(this).wrap(function() {
  return '<a href="' + $(this).attr('src') + '" />';
})   
});

    here the sample http://jsfiddle.net/a4PYd/

  2. If you are certain that all your post content contains only the <img> tag, you can add this snippet of code to your functions.php file:

    function hyperlink_all_my_content( $content ) {
    $link = "http://www.somelink.com";
    return "<a href='$link'>$content</a>";
}
add_filter( 'the_content', 'hyperlink_all_my_content' );

    Note that this will link all your content, even on your wordpress pages.

    EDIT:

    function hyperlink_all_my_content( $content ) {

    $matches = array();
    $nummatches = preg_match("/src=['|"](.*)['|"]/", $content, $matches);
    return "<a href='" . $matches[1] . "'>$content</a>";
}
add_filter( 'the_content', 'hyperlink_all_my_content' );