Monday, March 27, 2006

How to show a picture library as links using frontpage and web services

I saw the request for this in MSD2D and people are always asking for similar stuff, so I guess I can start with some code samples, and if anyone wants something more specific they can ask...

The request was to make a view of a picture library, but have every picture point to a different url. this can be to the picture itself or to a url in the intranet\internet.

The following is an example of how the result will look like (I used sample icons instead of nifty looking gifs...sorry - I am not a graphical designer). The two images each link to different pages. The web part links to the picture library in a site - either a remote one or the current one.

What I suggest to people who dont want to write their own web parts using Visual Studio is to use frontpage data views and connect them using web services. This is usefull to show the data from the list in another site as well (so you can have a picture library in a master site and web parts in other sites showing it as a link list or a picture list).

The recommended best practice for this is to create a stub web part page to be edited frontpage so that no important page gets unghosted. then you can export the web part to a dwp file and import it into every page you want. If you want more information, search the internet (I will post some links when I have more time)

anyway, here is the process:

First, create an image list for your images.

If you want to use that as a link list, you will have to add a column that will hold the link each picture will point to:

  1. Go into “modify settings and columns” and click “add a new column”
  2. Name the new field and set the type to hyperlink
  3. Go back to the list.
  4. Upload a few images and set the hyperlinks so that they point to different sites.

Now, to create the view for the list (or the web part if you will).

  1. Create a dummy site or a web part page (to pervent unghosting)
  2. Open the page in frontpage and stand on a web part zone (otherwise frotnpage will just embed the new view into the page instead of having it as web part that is movable...I made that mistake preparing the screen shots - dont follow my lead on this one!)
  3. Expand the "data" menu and select "Insert Data View"
  4. Click "Add to Catalog" (we need to add the image list as a data source) select "web services" (and not sharepoint list. that option wont allow the web part to work from remote sites).
  5. Write the path to the site with the list, followed by "_vti_bin/lists.asmx" and click "connect"
  6. From the operations list select "GetListItems"
  7. Double click the "listname" variable
  8. Set the value to the name of the list you created and click ok twice to go back to the frontpage main page.
  9. In the pane you now see the new data source. open the menu for the source and choose "Show Data"
  10. Select the colunms you want to show. in this example I selected the column that holds the link to the image and the one that holds the link we entered seperatly. If you want the click on the image to open the image, you can select only the one field.
  11. In my example I first clean up the headers of the table. You dont have to do that, but at the very least you are going to want to change the text there as by default it shows the field's internal name (ows_something). Switch to code view, and run a search for the field name. We are looking for where it is inside a "<th>" tag. if you find it, delete the entire bit as shown in the following image.

    You should save the page and then open it in internet explorer to make sure the change took effect and the headers are gone with no error.
  12. Next, is the actual change to the code to make the image a link. Switch to code view again, and scroll down in the page to located the xsl code that renders the data. This may vary, depending on the style frontpage selects for you when you inserted the data view. Basically what you have to look for is a tag (a row) with some tags inside and a "<?xml:namespace prefix = xsl />xsl:value-of"
  13. Change the text inside to render each image as a link. the following are two examples for how to do that - in one the image is a link to itself, and in the other it is a link to the page the link field we added is pointing at.

Code Example 1 - Image is a thumbnail pointing to the bigger image

<xsl:variable select="@ows_link_x0020_to_x0020_open" name="linkText"></xsl:variable>
<xsl:variable select="@ows_RequiredField" name="linkImage"></xsl:variable>
 <td class="ms-vb">
   <?xml:namespace prefix = xsl />
   <xsl:attribute name="href">
    <xsl:value-of select="substring-before($linkText,', ')"></xsl:value-of>
   <xsl:attribute name="title">
    <xsl:value-of select="substring-after($linkText,', ')"></xsl:value-of>
   <img border="0" />
    <xsl:attribute name="src">http://demo02:8081/<xsl:value-of select="substring(string-length(substring-before($linkImage,substring(normalize-space($linkImage),1,1)))+1)">
Code Example 2 - Image is a link to a page specified in the custom field

 <tr style="display:{$GroupStyle}">
 <td class="ms-vb">
   <xsl:variable name="linkText" select="@ows_link_x0020_to_x0020_open"/>
   <xsl:variable name="linkImage" select="@ows_RequiredField"/>
   <xsl:attribute name="href">
    <xsl:value-of xmlns:xsl="" select="substring-before($linkText,', ')"/>
   <xsl:attribute name="title">
    <xsl:value-of xmlns:xsl="" select="substring-after($linkText,', ')"/>
   <img border="0">
    <xsl:attribute name="src">http://demo02:8081/<xsl:value-of xmlns:xsl="" select="substring(

Liked the tip? kick it on


Marek Hlavac said...

Hello Ishai,
it works - thank you a lot. I'll have to go around some problems, i.e. I don't have any idea how to works with the xsl code, but I'm going to fight :)
Thank you once again!

Ishai Sagi said...

Marek, Happy to help. If you need more such like samples, ask here and if I see a value to the community I will publish more samples.

Bob Mixon said...

Excellent step by step Ishai!