2

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.

  • The last screenshot of that blog post shows a "hyperlink" field. Do you not have that? Or are you looking for a more elaborate solution? – filoxo Aug 15 '13 at 23:05
  • Sorry I should have mentioned that I tried adding the hyperlink in that dialog but it still doesn't create a link to the picture – Neil Hoff Aug 16 '13 at 15:19
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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