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.

HTML+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?