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 41 posts 202 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 6163 posts 24143 karma points MVP 8x admin c-trib
    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 41 posts 202 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 6163 posts 24143 karma points MVP 8x admin c-trib
    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 41 posts 202 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 6163 posts 24143 karma points MVP 8x admin c-trib
    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 41 posts 202 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 41 posts 202 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 it’s 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 6163 posts 24143 karma points MVP 8x admin c-trib
    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

  • pbl_dk 150 posts 551 karma points
    Sep 08, 2017 @ 12:34
    pbl_dk
    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