Show Image Field

Show Image Field

Image Fields

  • Store field values as XML element 
  • Supported by <sc:image> web control in declarative markup
  • Supported by Sitecore.Data.Fields.ImageField class in Sitecore API
  • Field values can be displayed by the FieldRenderer.Render() method and FieldRenderer control
  • Natively supports displaying field values in the Page Editor

Image Field Options

  • Call GetMediaUrl()with MediaUrlOptions
  • Use FieldRenderer.Render() method
  • Get properties of Sitecore.Web.UI.WebControls.Image
  • Get attributes of <sc:Image>

Controls featured in this example:

  • Sitecore Web Control
  • XSLT Rendering

Classes featured in this example:

  • Sitecore.Context
  • Sitecore.Data.Database
  • Sitecore.Data.Fields.ImageField
  • Sitecore.Data.Items.Item

Show Image Field C# Web Control Code

//get Simple Fields metadata item from context database using item guid
Sitecore.Data.Database db = Sitecore.Context.Database;
Sitecore.Data.Items.Item item = db.GetItem("{EC44470F-FF45-4023-95C2-EC886FD33D0C}");
if (item == null) return;

Sitecore.Data.Fields.ImageField imgFld = item.Fields["example image"];
if (imgFld == null) return;

output.AddAttribute(System.Web.UI.HtmlTextWriterAttribute.Style, "font-weight:bold; width:100%; clear:both");
output.Write("C# Web Control Real-time Output");

output.AddAttribute(System.Web.UI.HtmlTextWriterAttribute.Style, "font-size:x-small; width:100%; clear:both");
output.AddAttribute(System.Web.UI.HtmlTextWriterAttribute.Style, "font-weight:bold");
//using &#58; for colon and &#160; for space
output.Write("{0}&#58;&#160;{1}", "Item", item.DisplayName);
output.RenderEndTag(); //P

output.Write("{0}&#58;&#160;{1}", imgFld.InnerField.DisplayName + " Field Value", "<b>" + imgFld.Value + "</b>");
output.RenderEndTag(); //Div

Show Image Field XSLT Rendering Code

<xsl:variable name="simpleFields" select="sc:item('{EC44470F-FF45-4023-95C2-EC886FD33D0C}',.)" />

<div style="font-weight:bold; width:100%; clear:both"> <br/>
<xsl:value-of select="'XSLT Rendering Real-time Output'"/>

<div style="font-size:x-small; width:100%; clear:both">
<p><b>Item: <xsl:value-of select="$simpleFields/@name"/></b></p>
<xsl:value-of select="'Example Image Field Value: '"/>
<!-- alternative to <xsl:value-of select="sc:fld('example image',$simpleFields)" /> -->
<b><sc:image field="example image" select="$simpleFields" /></b><br/>

Show Image Field C# Web Control Output

Item: Simple Fields

Example Image Field Value: 

Show Image Field XSLT Rendering Output

Item: Simple Fields

Example Image Field Value: