While modifying a webpart using a custom XSLT file I needed to include an image in the output. I did this by adding a “Rollup Image” column and then referencing it in the XSLT file. This column type is useful because it presents the user with an easy interface to select an existing image within SharePoint or to upload one from their computer.
By linking to a custom XSLT file you can change the way the list items are displayed on the page.
Within an XSLT file you can include references to the Rollup Image column by simply using :
<xsl:value-of select="@PublishingRollupImage" disable-output-escaping="yes"></xsl:value-of>
This will insert a fully populated IMG tag into your HTML :
<img style="border: 0px solid;" alt="" src="/sites/mySite/PublishingImages/myImage.jpg" width="200" height="100" />
However, you have to accept the form above. If user inserts a large image into the list item then that image will be inserted into your page at its full resolution. What if you want to apply a different style or fix the image dimensions? That can be done by using the following alternative syntax :
<img src="{substring-before(substring-after(@PublishingRollupImage,'src="'), '"')}" alt="{@Title}" width="80" height="60" />This gives you more control over the IMG tab and allows you to add additional attributes. In the example above the width and height of the image can be specified so that it is displayed as expected regardless of the size of the source image. You can also add “id” and “style” attributes as required.
Remember that if you are using an Announcements webpart the Rollup Image column must be added to the announcements list and also be included as a displayed column in the webparts current view.