Deliver superior customer experiences with an AI-driven platform for creating and deploying cognitive chatbots
Deliver Awesome UI with the most complete toolboxes for .NET, Web and Mobile development
Automate UI, load and performance testing for web, desktop and mobile
A complete cloud platform for an app or your entire digital business
Detect and predict anomalies by automating machine learning to achieve higher asset uptime and maximized yield
Automate decision processes with a no-code business rules engine
Optimize data integration with high-performance connectivity
Connect to any cloud or on-premises data source using a standard interface
Build engaging multi-channel web and digital experiences with intuitive web content management
Personalize and optimize the customer experience across digital touchpoints
Build, protect and deploy apps across any platform and mobile device
Sitefinity 10.1 comes with Accelerated Mobile Pages (AMP) support. The feature is in Beta, so further improvements will come with the next version of the product.
Sitefinity automatically generates an AMP version for your blog posts, news and events. For the dynamic content types, you must define your own template in order to have those pages out of the box.
The first step to start using the AMP functionality is to enable the Mobile Formats (BETA) module from Administration -> Modules & Services. The second step is to choose which content types Sitefinity should create AMP counterparts for. Go to Administration -> Settings -> Global Settings -> Mobile formats. Activate the Google AMP format and select the content type you want.
Once you create a post, news or event, Sitefinity will automatically create an AMP page for you with the respective content.
One of the limitations of the Beta version of this feature is that you don’t have direct access to the AMP page URL—you have to do some work to get it :). Even though you don’t have the links in a convenient place in the CMS, the AMP pages of your website are indexed by the search engine properly. The easiest way to find this “secret” link is to open the details view of the article that you want (in our case a blog post) and look at its source (Ctrl + U). Find the amphtml attribute and get the URL.
The AMP page should look like this:
There are two templates that are used to build the AMP pages— the layout and content templates. The first one is used to make the shell of your AMP page, e.g. navigation and footer. The second one renders the content of your article.
The default implementation of the templates comes with each Sitefinity project. Go to MVC -> AMP and include that folder in your solution. The Layout.Default.cshtml contains the markup for your page layout. In the News.NewsItem.Default.cshtml and Blogs.BlogPost.Default.cshtml files you can find the default implementation for the News and Posts items. In case you delete those files or want to revert them, open the Telerik.Sitefinity.MobileFormats.dll and look at the embedded resources.
For new templates, you have to follow particular naming conventions:
To choose between templates, go to Administration -> Settings -> Global Settings -> Mobile formats and click on the data type you want to change. From the drop-down menu select the desired template.
Let’s create a new content module Animals, name the type Animal and add two fields: Title and Age. By following the above pattern we have to create a Animals.Animal.MyZooTemplate.cshtml file in the MVC-> AMP folder to visualize the content for the AMP version of each Animal.
The template is created and we need to add some markup to complete the exercise. Keep in mind that the Fields collection of the Model is a dynamic type and to access the fields you need get them directly, e.g. Model.Fields.
Here is the full implementation:
@Html.AmpHtml(DataResolver.Resolve(Model.DataItem, "Author", null))
@Html.AmpHtml(Model.GetDateTime("PublicationDate", "MMM d, yyyy, HH:mm tt"))
The last step is to add the Animal type in the Publish Content list and to select the MyZooTemplate. Go to Administration -> Settings -> Global Settings -> Mobile formats and click on the Animal data type. From the drop-down menu select the MyZooTemplate.
To get the AMP URL and test the appearance of your page, you should use the approach previously described above.
Sitefinity provides a quick way to create AMP version of your articles with click of a button. With minimal efforts, the used templates could be extended as well. The feature is still in Beta and we would like to hear your thoughts from a marketing and developer perspective, as we work to make it as great as we can for your needs.
Peter Filipov (Pepi) is a Developer Advocate focused on Sitefinity. He is passionate about web development and sports. Prior joining the DevRel team, Pepi was one of the team leaders in the Telerik Web Components division.
Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.