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:
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!
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.
I think I found it:
http://msdn.microsoft.com/en-us/library/dd586621.aspx#DocumentLibrary
One fix. The thumbnail is generated using a jpg extension so rather than using @FileType the file name needs to end in a .jpg.
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)}"
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.
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
Thank you so much for this post. You have made my day!
God Bless you!
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!
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!
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}"
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)
Post a Comment