Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Anil Kumar 7 posts 107 karma points
    Aug 14, 2017 @ 17:22
    Anil Kumar
    0

    Implementing Umbraco Amp in Umbraco Website

    I am trying to implement Umbraco Amp on my current Umbraco Website . In the process , I have found a link https://stackoverflow.com/questions/36402712/amp-accelerated-mobile-pages-in-an-already-developed-site . Is there a plugin to implement Umbraco Amp or is there any ETA on the plugin to implement Umbraco Amp in exiting website or How can we implement Umbraco Amp in exiting Umbraco Website ?

  • Alex Skrypnyk 3910 posts 13841 karma points mvp
    Aug 29, 2017 @ 11:21
    Alex Skrypnyk
    0

    Hi Anil

    There are no plugins for AMP in Umbraco and in other CMS, you have to do it manually.

    Great articles how to do it -

    http://carolelogan.net/blog/amp-implementation-in-umbraco/

    http://skrift.io/articles/archive/amp-up-your-website-with-umbraco/

    Thanks,

    Alex

  • Anil Kumar 7 posts 107 karma points
    Sep 05, 2017 @ 13:45
    Anil Kumar
    0

    Hi Alex,

    Thanks for the response .

    The Url http://carolelogan.net/blog/amp-implementation-in-umbraco/ says it is using the Fanoe starter kit . My site is not using Fanoe starter kit currently. Does it really matter ? Can i add it now ? If so, can you provide me the process of adding it to my site umbraco 7.5.3 .

    I have found an extension for umbraco https://www.nuget.org/packages/MarcelDigital.Umbraco.Amp/ which creates boiler plate to the site. How can we convert existing Templates and Views (.cshtml files) to amp-views . I have a master page and Templates that fit into Master . Can you tell how the architecture of amp works using Boiler plate , Master page and Templates .

  • Alex Skrypnyk 3910 posts 13841 karma points mvp
    Sep 05, 2017 @ 13:53
    Alex Skrypnyk
    0

    Hi Anil

    You don't need "Fanoe starter kit", using "https://www.nuget.org/packages/MarcelDigital.Umbraco.Amp/" is a good idea.

    Thanks,

    Alex

  • Anil Kumar 7 posts 107 karma points
    Sep 05, 2017 @ 14:02
    Anil Kumar
    0

    Alex,

    Is there any example which you can provide on converting existing templates and Views to amp-views ?

    As mentioned in last post , I have a master page and Templates that fit into Master . Can you tell how the architecture of amp works using Boiler plate , Master page and Templates .

  • Alex Skrypnyk 3910 posts 13841 karma points mvp
    Sep 08, 2017 @ 12:30
    Alex Skrypnyk
    0

    Hi Anil,

    Did you find out how to achieve AMP on your site? Share with our community, please.

    Thanks,

    Alex

  • Anil Kumar 7 posts 107 karma points
    Sep 08, 2017 @ 14:07
    Anil Kumar
    0

    Hi Alex ,

    I am using extension https://www.nuget.org/packages/MarcelDigital.Umbraco.Amp/ . I am still having trouble in invoking the amp templates instead of the regular templates . I am unable to find any proper links that provides the steps/procedure to invoke the amp templates in umbraco .

    Can anyone help me on this?

  • Anil Kumar 7 posts 107 karma points
    Sep 13, 2017 @ 18:34
    Anil Kumar
    100

    Hello Alex,

    I have successfully achieved AMP version to my site .The following are the steps required to achieve AMP Version for the Umbraco Websites .

    1. Add the umbraco extension https://www.nuget.org/packages/MarcelDigital.Umbraco.Amp/ to the project .

    2. This extension creates the following Views and Controller . Amp(Folder) _ViewStart.cshtml (View) Shared(Folder) _LayoutAmp.cshtml (View) RenderAmpMvcController

    LayoutAmp.cshtml This is a AMP boilerplate that every amp page needs. We would add a sub layout that fills in the sections that the base layout provides to add in style customization and global layouts. The Layouts should chain up to each other. LayoutAmp.cshtml is the base amp layout. For example, MasterAmp.cshtml will have the site specific layout and use LayoutAmp.cshtml as its layout, and finally Amp/Home.cshtml is the page specific amp html with the site specific layout Master_Amp.cshtml as its layout.

    1. As we are going to use custom MarcelDigital.Umbraco.Amp.Controllers.RenderAmpMvcController the view will be expected to be in the /Views/Amp/[DocumentAliasName].cshtml. This Controller will serve up the amp page when there is amp at the end of the url. For example mydomain.com/something for the normal content , and mydomain.com/something/amp for the AMP version.

    You can make this controller the default by creating a class called Bootstrapper.cs under the App_Start folder with the following code.

    using MarcelDigital.Umbraco.Amp.Controllers;

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.Optimization;

    using Umbraco.Core;

    using Umbraco.Web.Mvc;

    namespace selectrucks

    {

    public class Bootstrapper :IApplicationEventHandler
    
    {
    
        public void OnApplicationInitialized(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
    
        {
    
        }
    
        public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
    
        }
    
        public void OnApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            BundleConfig.RegisterBundles(BundleTable.Bundles);
    
            DefaultRenderMvcControllerResolver.Current.SetDefaultControllerType(typeof(RenderAmpMvcController));
        }
    
    }
    

    }

    4 . Create all the AMP Templates/ AMP Partial Views in their respective AMP folders(Create new folder under Partial Views and move/create all amp version of partial views in the folder)

  • Alex Skrypnyk 3910 posts 13841 karma points mvp
    Sep 06, 2017 @ 10:33
    Alex Skrypnyk
    0

    Hi Anil,

    There are no Umbraco ways to do AMP, you just have to manage all rules that AMP requires.

    Umbraco provides full control over markup for you, so you can easily do AMP templates.

    Thanks,

    Alex

  • Elitenet 77 posts 320 karma points
    Sep 08, 2017 @ 12:34
    Elitenet
    1

    There's tutorials at Googles website for AMP on how to convert HTML to AMP.

    https://www.ampproject.org/docs/tutorials/converting

    Also an AMP checker:

    https://validator.ampproject.org/

    Just in case that would help someone.

Please Sign in or register to post replies

Write your reply to:

Draft