Prev Next

Print

Field of "Image" type contains image data. The easiest way to display it is by using Image XSL Control:

<sc:image field="My Image"/>

The same thing can be done with XslHelper.image function (sc:image):

<xsl:value-of select="sc:image('My Image',.)" disable-output-escaping="yes"/>

If you want to link an image, you can also do it in two ways:

• with XSL controls:
• • <sc:link field="My Link"><sc:image field="My Image"/></sc:link>
• Or with functions of XslHelper class:
• • <xsl:value-of select="sc:link('My link',.,sc:image('My image',.))" disable-output-escaping="yes"/>

If you want to make your own custom image you can use XslHelper.fld function (sc:fld) with subproperties:

source: <xsl:value-of select="sc:fld('image',.,'src')"/>

alt: <xsl:value-of select="sc:fld('image',.,'alt')"/>

width: <xsl:value-of select="sc:fld('image',.,'width')"/>

height: <xsl:value-of select="sc:fld('image',.,'height')"/>

hspace: <xsl:value-of select="sc:fld('image',.,'hspace')"/>

vspace: <xsl:value-of select="sc:fld('image',.,'vspace')"/>

For instance, you may use the following construct:

<img src="{sc:fld('My Image',.,'src')}" alt="{sc:fld('My Image',.,'alt')}" />

You can also extract Sitecore internal image properties if needed:

mediaid: <xsl:value-of select="sc:fld('image',.,'mediaid‘)"/>.

mediapath: <xsl:value-of select="sc:fld('image',.,'mediapath')"/>

showineditor: <xsl:value-of select="sc:fld('image',.,'showineditor')"/>

usethumbnail: <xsl:value-of select="sc:fld('image',.,'usethumbnail')"/>

Prev

Next