Display Sitefinity CMS fields in Google AMP templates

Following is a list of examples of the markup that you need to include in your Google AMP templates for each kind of Sitefinity CMS field.

NOTE: Replace MyFieldName with the actual field name.

Razor
// Short text field:

<span>@Html.AmpHtml(Html.Encode((string)Model.Fields.MyFieldName))</span> 

// Long text field

<span>@Html.AmpHtml(Html.HtmlSanitize((string)Model.Fields.MyFieldName))</span>

// Radio button field, dropdown field

@if(Model.Fields.MyFieldName != null)
{
 <span>@Model.Fields.MyFieldName.Text</span> 
}

// Checkboxes field

<span>@Model.GetMultipleChoiceValueString("MyFieldName")</span>

// Yes/No field

<span>Model.GetBool("MyFieldName")</span>

//Date field

@if(Model.Fields.MyFieldName != null)
{
 <span>@Model.GetDateTime("MyFieldName", "MMM d, yyyy, HH:mm tt")</span>
}

// Number field

<span>@Model.Fields.MyFieldName</span>

// Classification field >> Categories field

@if(Model.Fields.Category!=null)
{
 <ul>
   @foreach (var taxon in Model.GetHierarchicalTaxons("Category"))
   {
     <li>@taxon.Title</li>
   }
 </ul>
}

// Classification field >> Tags field

@if(Model.Fields.Tags != null)
{
 var flatTaxon = Model.GetFlatTaxon("Tags");
 if (flatTaxon != null)
 {
   <span>@flatTaxon.Title</span>
 }
}

// Address field

@if(!string.IsNullOrEmpty(Model.Fields.MyFieldName.CountryCode))
{
 <address>
   @Model.GetAddressString("MyFieldName", "#=Street# #=City# #=State# #=Country#")
 </address>
}

// Related media field >> Images >> Single image (limitation set to only 1 image can be selected)

@if(Model.Fields.MyFieldName != null)
{
 string imgTag = $"<img src='{Model.Fields.MyFieldName.Fields.MediaUrl}' alt='{Model.Fields.MyFieldName.Fields.AlternativeText}' title='{Model.Fields.MyFieldName.Fields.Title}' />";
 @Html.AmpHtml(Html.Raw(imgTag))
}

//Related media field >> Images >> Multiple images

@if(Model.Fields.MyFieldName != null && Model.Fields.MyFieldName.Length > 0)
{
 @Html.AmpComponentScript("amp-carousel")
 <amp-carousel type="slides" controls layout="responsive" height="640" width="480">
   @foreach (var relatedItem in Model.Fields.MyFieldName)
   {
     string imgTag = $"<img src='{relatedItem.Fields.MediaUrl}' alt='{relatedItem.Fields.AlternativeText}' title='{relatedItem.Fields.Title}' />";
     <span>@Html.AmpHtml(Html.Raw(imgTag))</span>
   }
 </amp-carousel>
}

// Related media field >> Video >> Single video (limitation set to only 1 video can be selected)

@if(Model.Fields.MyFieldName != null)
{
 string videoTag = $"<video controls src='{Model.Fields.MyFieldName.Fields.MediaUrl}'></video>";
 @Html.AmpHtml(Html.Raw(videoTag))
}

// Related media field >> Video >> Multiple videos

@if(Model.Fields.MyFieldName != null && Model.Fields.MyFieldName.Length > 0)
{
 @Html.AmpComponentScript("amp-carousel")
 <amp-carousel type="slides" controls layout="responsive" height="640" width="480">
   @foreach (var relatedItem in Model.Fields.MyFieldName)
   {
     string videoTag = $"<video controls src='{relatedItem.Fields.MediaUrl}'></video>";
     @Html.AmpHtml(Html.Raw(videoTag))
   }
 </amp-carousel>
}

// Related media field >> Documents or other files >> Single file (limitation set to only 1 file can be selected)

@if(Model.Fields.MyFieldName != null)
{
 <a href='@Model.Fields.MyFieldName.Fields.MediaUrl'>@Model.Fields.MyFieldName.Fields.Title</a>
}

// Related media field >> Documents or other files >> Multiple files 

<ul>
 @foreach (var relatedItem in Model.Fields.MyFieldName)
 {
   <li class="media">
     <a href='@relatedItem.Fields.MediaUrl}'>@relatedItem.Fields.Title</a>
   </li>
 }
</ul>

// Related data field >> Single item (limitation set to only 1 item can be selected)

@if(Model.Fields.MyFieldName != null)
{
 <a href='@Model.Fields.MyFieldName.DefaultUrl'>
   @Model.Fields.MyFieldName.Identifier
 </a>
}

// Related data field >> Multiple items

<ul>
 @foreach (var relatedItem in Model.Fields.MyFieldName)
 {
   <li>
     <a href='@relatedItem.DefaultUrl'>
       @relatedItem.Identifier
     </a>
   </li>
 }
</ul>
Want to learn more?
Enhance your Sitefinity skills by enrolling in free training sessions. Become Sitefinity certified through Progress Education Community to strengthen your professional credentials.
New to Sitefinity?