4/27/2009

SharePoint: Displaying Pictures and Thumbnails in a Data View Web Part

 

This is in response to a question about displaying a thumbnail from a Picture Library in a Data View web part…

 

Displaying the full size picture is really easy. When selecting your fields for the Data View web part select “Url Path”. This will be added to the XSLT of the Data View web part as:

<img border="0" src="{@FileRef}" alt="{@FileRef}"/>

(@FileRef is the XSLT fieldname used for “Url Path”)

 

The trick is getting the URL to the picture library’s auto-created thumbnail. The thumbnail for “test.jpg” is “/_t/test_jpg.jpg” and is not a field in the SharePoint Designer list of fields. To get it you will need to do some XSLT string work:

concat(@FileDirRef,'/_t/', substring-before(@FileLeafRef,'.'),'_',substring-after(@FileLeafRef,'.'),'.',@FileType)

Note: the above will only work if only one “.” exists in the file name. It will fail for a file named my.airshow.picture.jpg

    @FileDirRef is the name of the library (airshow%20pictures)

    @FileLeafRef is the file name (helicopter.jpg)

    @FileType is the file type (jpg)

    ‘/_t/’ is the path to the auto-created thumbnails

  substring-before / after are XSLT string functions

The above “stuff” will convert:

   /airshow%20pictures/helicopter.jpg

into

   /airshow%20pictures/_t/helicopter_jpg.jpg 

which is the path to the thumbnail.

 

The final <IMG> tag looks like this:

<img border="0" src="{concat(@FileDirRef,'/_t/', substring-before(@FileLeafRef,'.'),'_',substring-after(@FileLeafRef,'.'),'.',@FileType)}" alt="{@FileRef}"/>

 

If you would like to let the user click on the thumbnail to see the full picture and meta data then wrap the <IMG> in a <A> tag and supply the ID of the picture:

<a href="{concat(@FileDirRef,'/Forms/DispForm.aspx?ID=', @ID)}">
<img border="0" src="{concat(@FileDirRef,'/_t/', substring-before(@FileLeafRef,'.'),'_',substring-after(@FileLeafRef,'.'),'.',@FileType)}" alt="{@FileRef}"/>
</a>

12 comments:

Jim Parker said...

Great post, and with perfect timing as I was just trying to figure out to create a custom data view with thumbnails.

However, I noticed a couple things when I tried to implement this code.

1) For some reason, I had to change the @FileDirRef variable to a hard-coded path because it wouldn't work as-is. Being new to XML/XSL, I couldn't figure out the problem, so I just hard-coded it for now.

2) It doesn't appears to work with pictures that aren't in .jpg format. For example, .png thumbnails don't work. I'm assuming this has something to do with the @FileType variable, but again being the newbie, couldn't figure out where that was set either.

Any insight you have on those two issues would be great, but otherwise it works great and was exactly what I was looking for. Thanks for sharing your expertise!

Alex said...

How do you know which variables are available for use (e.g. @FileRef) and what their meaning is? I'm trying to figure out how to make the address be the url of the Shared Documents page of the site the document is in. Thanks.

Alex said...

I think I found it:
http://msdn.microsoft.com/en-us/library/dd586621.aspx#DocumentLibrary

Bil Simser said...

One fix. The thumbnail is generated using a jpg extension so rather than using @FileType the file name needs to end in a .jpg.

Janusz Falkiewicz said...

Nice article.
I think this will help:

In concat function, first string should be "/"

i.e.:
a href="{concat('/', @FileDirRef,'/Forms/DispForm.aspx?ID=', @ID)}"

instead of:
a href="{concat(@FileDirRef,'/Forms/DispForm.aspx?ID=', @ID)}"

Wanda said...

I created the dataview webpart and add the xsl, however, nothing is showing. And there is a message showed in the design ivew of the webpart

"There is no DataQuery property. The DataQuery property is necessary for determining the source of the XML data."

What am I missing? What should I put in the DataQuery?

Please help. I am a newbie to this whole thing.

Thanks in advance.

Mike Smith said...

Wanda,

Sounds like you missed one (big) step in creating the Data View web part. It must have its data source configured before the make the changes for the thumbnail.

Delete the web part you added.

- In SharePoint Designer add the DataView web part to the page.
- select your picture library as the data source and add any fields you would like to display, and also add “Url Path”.
- save your changes and view the page in a browser to make sure the data is displayed
- go back to SharePoint Designer
- display the HTML code of the page and then make the changes to the XSLT as described in the article

Mike

Anonymous said...

Thank you so much for this post. You have made my day!
God Bless you!

Bag@bunda said...

You should add this kind of widget "Invite me a beer" :) so we can give a real Thank to you! ... it helps me a lot!

Bag@bunda said...

You should add this kind of widget named "Invite me a beer" in order to thank you!! :) it helps me a lot!
* I've seen the widget but never used .. I though I would use here!

jrbilodeau said...

Hi, I have made a few improvements to your code because i was having an issue with it not displaying images with periods in the file name

img border="0" src="{concat(@FileDirRef,'/_t/', @FileLeafRef.Name,'_',@FileType,'.jpg')}" alt="{@Description}"

Amit Bhagat said...

Thanks for this. I had to made a modification to make it show the thumbnail image url correctly:
concat(@FileDirRef,'/_t/', substring-before(@FileLeafRef,'.'),'_',substring-after(@FileLeafRef,'.'),'.',@FileLeafRef.Suffix)

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.