# Render links as images on default view

I have links (as urls) to docx files and would like them to remain as links but to be displayed as clickable images. With the picture/hyperlink field, if you're using an image, you cannot make it take you to a URL other than where the image is actually stored. I played around with some jQuery to do this, but my page uses grouping and other things which cause the links to not be converted instantly (E.g., document.ready won't help because the items aren't loading on document.ready but rather whenever the group is opened. One of the main reasons they're interested in doing this is to cut down on the width of the column.

I think you could use a calculated field.

The calculation would be:

="<a href="""&URL&""" onclick="""&URL&""">
<img src=""Image Path""/>
</a>"


Change the type of the calculated field to Number. I know that the field is returning text but by changing it to a Number type SharePoint will render the link.

The image path is hard coded and the URL is a reference to another SharePoint field. I tested this in SharePoint 2010.

• This seems very promising, but I'm not having luck with the actual "on click" taking me to the URL specified in that column. It's just appending "#" to the list url though I can see the link to my hyperlink in another field pop up with a "syntax" error that points as though I'm missing something after my URL. Is it best to use an actual hyperlink field for the column containing my URL? I've been using a single line of text. edit: just realized I can't use hyperlinks as columns. – Dinerdo Apr 22 '14 at 18:54
• You are right. Change the # to "&URL&". I have updated the solution. – AxGryndr Apr 22 '14 at 19:10
• works great! thanks. Might want to update your answer to remove the typo'd 4 btw. – Dinerdo Apr 22 '14 at 19:39

I did something similar, but in my case I was using a DWVP to create a custom list view. In that case, I simply had a standard hyperlink using an image. Using XSL:Choose I was able to dynamically display a different file icon based on the file extension of the current item. Here's a rough example of what I used for the actual link:

<a href="{@FileLink}" title=""><img src="" border="0"></a>


With SharePoint 2013, this sort of thing is easy to do even with OOTB list views, thanks to the new JSLink property of the ListView web part. That allows you to use Javascript/JQuery to replace even a blank single-line-of-text field with whatever HTML you choose. In my current environment, I have a blank column called "Actions" and then on the view itself I replace the empty column with HTML containing several icons. In my scenario, these icons are used to launch workflows with a single click, but they could easily be used to launch a document instead.