Topics

All topics

Setup and maintenance

    Display Sitefinity CMS fields in Google AMP templates

    NEW TO SITEFINITY?

    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.

    // 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>
    view raw GoogleAMPFields.cshtml hosted with ❤ by GitHub

    Want to learn more?

    Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

    Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

    This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

    Web Security for Sitefinity Administrators

    This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its 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 .NET Core and leverage its decoupled architecture and new way of coding against the platform.

    Was this article helpful?