This project is read-only.

Web-optimized image templates

May 24, 2011 at 3:54 PM

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>

Coordinator
May 25, 2011 at 4:04 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.