Creating a linkable image in a view of XML data

John Good day everyone, this is John Jansen again with another quick tip for working with data in SharePoint Designer. I have seen this question asked quite a bit lately both on internal aliases and external newsgroups, so I thought I would make a post for it and see what others thought.

The scenario is this. You have two pages with data views on them:

  1. ListOfProducts.aspx - has a view of all the items in your data source
  2. DetailOfProducts.aspx - has a view of an individual product's details and is filtered based on a QueryString variable named ProductID

You want to click a thumbnail image in the view on ListOfProducts.aspx, and have it take you to the DetailOfProducts.aspx page that shows the specific details of that product.

This tip will work for both list fields that are of type 'Picture' or fields in SQL or XML that contain the URL to the image. However, this tip will not work for fields with a binary format from SQL that contains the actual image data. For the purposes of this tip, it is assumed that you know how to create pages 1 and 2 above, and that your data source contains a field called 'Image'.

After inserting your view, if the 'Image' field is not in the view, click on the Data View menu and choose Edit Columns. Then simply add the 'Image' field to your view. After it is inside your view, it will most likely not yet display an image. If it does, continue to the second set of steps below. If it is not an image, simply follow these 3 steps:

  1. Right click the 'Image' data value in the view
  2. From the context menu, select Format Item as
  3. From the flyout menu, select Picture

IMPORTANT: You will see a warning that if you don't trust the data source, do not continue. This is important. If the data source can be owned by an untrusted server, you should not continue. This is a RARE circumstance.

Assuming the path to the URL is correct, you should now see an image in your data view. Continue to modify the view as follows:

  1. Select the image in Design view
  2. Click the Insert menu
  3. Click Hyperlink...
  4. Browse to DetailOfProducts.aspx
  5. With the cursor flashing immediately following DetailofProducts.aspx in the Address: text box, type "?ProductID=" (without the quotes) and then click the Fx button
  6. Choose ProductID from the XPath Picker Dialog
  7. Click OK to close the XPath Picker
  8. Click OK to close the Hyperlink dialog

Save all your pages and preview ListOfProducts.aspx, then click on the image. You should be redirected to the DetailOfProducts.aspx page, filtered to show the details of the product you clicked.

Good luck!


Comments (7)

  1. Mike Dormer says:

    You make the statement "However, this tip will not work for fields with a binary format from SQL that contains the actual image data". So, how do you work with fields in a database that do contain binary format image data? What’s the trick to rendering that?


    I think I have the same question as Mike – as I am trying to render the LargeThumbnail, or the Thumbnail in a Data View from a Slide Library.

    Thank you,

  3. GirlGeek101 says:

    I tried to use the thumbnail image in a slide library for a similar purpose but the thumbnail image:

    a. won’t show up in single or multiple item view but shows a red x box (but shows up in edit form view)

    b. when it shows up in single item form view – it only shows one (1) thumbnail image repeatedly instead of each thumbnail for the related record.

    To reproduce:

    Create a Slide Library and upload some slides.

    Create a new page in SharePoint Designer, add a data view of a SharePoint Slide Library

    Insert at least the Title Field and the Thumbnail field in single item view format

    Insert at least the Title Field and the Thumbnail field in single item form

    observe the dillema.

    Do you know why this is happening?  I can use either Thumbnail or Large Thumbnail and it has the same result.

  4. Tuesday says:

    Thanks a ton – this has helped  me implement different EditForm views for certain people, based on personal views/audiences!

  5. Computer Help says:

    Really great information, has given me an idea for a blog of my friends.

  6. Chrome says:

    I am trying to figure out, how would I use sharepoint designer 2007 to build a system application mapping application? if that makes sense… I want to be able to click an image and it tell me all the compenants and features of that item I clicked along with the work flow.. (meaning what action comes before and after) is this possible?

Skip to main content