1
Vote

Web-optimized image templates

description

From http://spxslt.codeplex.com/discussions/258811#post617399
 
I blogged about using this technique a while back (http://joshmccarty.com/2010/11/load-sharepoint-web-optimized-images-into-a-dvwp/) after reading about it on
PathToSharePoint (http://blog.pathtosharepoint.com/2009/08/23/picture-libraries-take-advantage-of-web-friendly-formats/). It only works when
displaying images stored in a Pictures library (not a document library), because this library auto-generates thumbnail-sized and web-preview sized versions of the original image.
 
For thumbnails (~160px x 100px):
 
 
 
 
<xsl:call-template name="PictureThumbnail">
<xsl:with-param name="FileDirRef" select="@FileDirRef" />
<xsl:with-param name="FileLeafRef" select="@FileLeafRef" />
<xsl:with-param name="FileType" select="@FileType" />
<xsl:with-param name="Description" select="@Description" />
</xsl:call-template>
 
<xsl:template name="PictureThumbnail">
<xsl:param name="FileDirRef" />
<xsl:param name="FileLeafRef" />
<xsl:param name="FileType" />
<xsl:param name="Description" />
<img src="/{$FileDirRef}/_t/{concat(substring-before(translate($FileLeafRef,'QWERTYUIOPASDFGHJKLZXCVBNM','qwertyuiopasdfghjklzxcvbnm'),concat('.',$FileType)),'_',$FileType,'.jpg')}" alt="{$FileLeafRef}" title="{$Description}" /> </xsl:template>
 
 
 
 

 
For web preview sized (~640px x 480px)
 
 
 
 
<xsl:call-template name="PictureWebPreview">
<xsl:with-param name="FileDirRef" select="@FileDirRef" />
<xsl:with-param name="FileLeafRef" select="@FileLeafRef" />
<xsl:with-param name="FileType" select="@FileType" />
<xsl:with-param name="Description" select="@Description" />
</xsl:call-template>
 
<xsl:template name="PictureWebPreview">
<xsl:param name="FileDirRef" />
<xsl:param name="FileLeafRef" />
<xsl:param name="FileType" />
<xsl:param name="Description" />
<img src="/{$FileDirRef}/_w/{concat(substring-before(translate($FileLeafRef,'QWERTYUIOPASDFGHJKLZXCVBNM','qwertyuiopasdfghjklzxcvbnm'),concat('.',$FileType)),'_',$FileType,'.jpg')}" alt="{$FileLeafRef}" title="{$Description}" /> </xsl:template>

comments