Link to original image in a Image Rendition Column

Question

I created an Image Rendition Column for a list by following this blog post.

The list looks great and adding an image is fairly simple.

How can I set this column to link back to the original image?

We set all the images to a height of 75px. Users would like to be able to click on the image and see the full size version.

Answer 1

I couldn't find a way to do this with out of the box SharePoint so I wrote some jQuery to do the job:

Create a file named image_link.js and add this to it:

$(document).ready(function($) {
 $(".ms-rtestate-field img").each(function() {
    var link = $(this).attr("src")
    link = link.substring(0, link.indexOf('?'));
    $(this).wrap($('<a>',{
        href: link
    }));
  });
});

Upload this and jQuery to a document library on the site (Site Assets is a good one). I usually create a folder called js to store JavaScript in.

Next open the view (AllItems.aspx) in SharePoint Designer and add a link to image_link.js at the bottom of the page:

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
   <script src="../../../SiteAssets/js/jquery.min.js" type="text/javascript"></script>
   <script src="../../../SiteAssets/js/image_link.js"
   type="text/javascript"></script> 
</asp:Content>

Note: You may have to play around with the ../ in the links above depending on where this list is located