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
MyFieldNamewith 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.
Get started with Integration Hub | Sitefinity Cloud
This free lesson teaches administrators, marketers, and other business professionals how to use Sitefinity Integration Hub to create automated workflows between Sitefinity and other business systems.
Web Security for Sitefinity Administrators
This free lesson teaches administrators the basics about protecting your Sitefinity instance and your sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.
Foundations of Sitefinity ASP.NET Core Development
The free on-demand video course teaches developers how to use Sitefinity ASP.NET Core and take advantage of its decoupled architecture and modern development model.