Modifying the size of an image stored in a Content Type

Here's a puzzle. We wanted to call a SharePoint Content Type that holds an image, but to use code to force the image to present at a different size. But the XSL call in the SharePoint page looks like this:

<PublishingWebControls:DateTimeField FieldName="PublishingPageImage" runat="server" />

... so there's not a lot of scope to add in height and width attributes. Using the SharePoint web browser image size controls wasn't an option because we needed the same Content Type image to appear at full size elsewhere.

After a bit of searching on Google, we realised that this wasn't going to be solved for us. So we looked back over our code snippets and found a way of splitting up the code that SharePoint renders into its component parts. Here's how we did it.

1. Create and populate a variable with the image URL from a Publishing Image (content type). Like this:

<xsl:variable name="picURL" select="substring-before(substring-after(@PublishingPageImage, 'src=&quot;'), '&quot;')" />

2. Now call the variable and drop it into an image call with different size attributes, like this:

 <img height="75" width="100">
   <xsl:attribute name="src">
     <xsl:value-of select="$picURL" />
   </xsl:attribute></img>

SPDesigner won't like the closing img tag, but just ignore the yellow highlight!