Optimal Training Group

I was faced with a challenge the other day of having a linkable image to replace a regular link in my list library view, and here’s how I solved it.

So, I had a list and one of the columns was called “Document Location” which was a link to a document. See below:

The customer wanted the link to be replaced with an image that was linkable to the same document which made it look more presentable.

Here are the steps I took to accomplish this task using a Data View Web Part:

1. Open up SharePoint Designer

2. “Ctrl + N” to create a new .aspx page

3. On the top menu, click “Insert  SharePoint Controls  Web Part Zone”

4. In your ‘Folder List’ pane, drag and drop your list into the “Web Part Zone” from step 3. If you don’t see the ‘Folder List’ pane, click on ‘Task Panes’ in the top menu and check ‘Folder List’.

5. Make sure you have the columns showing in your web part zone that you need. To do so, click on the chevron of the web part and click the “Edit Columns” link. Make sure that the column that holds your document location is also on the page.

6. Right click on any of the fields that appear in the document location column and select “Format item as..”  Picture. If a ‘Confirm’ dialog box appears, click Yes.

7. Right click on the little x that represents the image that is supposed to be there and select “Picture Properties”

8. In the ‘Picture Properties’ box that appears, under ‘Picture:’, browse to where your image is and select it and click ok. This is the image that will replace the document location link. You should now see your image on the page.

9. Right click on your image and select “Hyperlink…”

10. When the “Insert Hyperlink” box appears, clear out the “Address:” window and click on the “fx” button.

11. When the “More Fields” window appears, select the field that contains the link to your document, in my case, ‘document location’.

You should now have a linkable image like this: