amp in existing project

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Alex Skrypnyk 5908 posts 22603 karma points MVP 4x admin c-trib

Nov 21, 2019 @ 00:45

0

AMP in existing project

Recently I got a task to make existing blog AMP compatible.

Can somebody recommend the steps? What should I do first?

Thanks, Alex

Copy Link
Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib

Nov 21, 2019 @ 05:28

1

Hi Alex,

I remember Carole wrote about this at some point. Don’t know how much is still valid but you can take a look:

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

/Chriztian

Copy Link
Paul Seal 428 posts 2354 karma points MVP 3x c-trib

Nov 21, 2019 @ 08:02

1

I did it using an alt template and therefore adding /amp/ to the url

Copy Link
Alex Skrypnyk 5908 posts 22603 karma points MVP 4x admin c-trib

Nov 21, 2019 @ 10:50

0

Thanks for recommendations! #h5yr!

Copy Link

Paul Seal 428 posts 2354 karma points MVP 3x c-trib

Nov 21, 2019 @ 10:58

Here's the template I used, it's a bit hard coded but you might find it a good starting point.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;

    string pageTitle = Model.Content.GetPropertyValue<string>("pageTitle");

    string imgUrl = "";
    if (Model.Content.HasValue("pageBannerImage"))
    {
        imgUrl = Umbraco.AssignedContentItem.GetPropertyValue<IPublishedContent>("pageBannerImage").Url;
    }
}


<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>@(Model.Content.HasValue("pageTitle") ? pageTitle : Model.Content.Name)</title>
<link rel="canonical" href="@Model.Content.Url"/>


<script src="https://cdn.ampproject.org/v0.js" async></script>


<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>


<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>


</head>
<body>
<amp-analytics type="googleanalytics" id="analytics1">


<script type="application/json">
{
  "vars": {
    "account": "UA-12345528-1"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
} 
</script>


</amp-analytics>
<nav class="amp-wp-title-bar">
<div>
<a href="https://codeshare.co.uk">
codeshare.co.uk </a>
</div>
</nav>
<div class="amp-wp-content">
<h1 class="amp-wp-title">@(Model.Content.HasValue("pageTitle") ? pageTitle : Model.Content.Name)</h1>
<ul class="amp-wp-meta">
<li class="amp-wp-byline">
<span class="amp-wp-author">Paul Seal</span>
</li>
<li class="amp-wp-posted-on">
<time datetime="@(Model.Content.GetPropertyValue<DateTime>("blogPostDate").ToString("yyyy-MM-ddTHH:mm:sszzz", System.Globalization.CultureInfo.InvariantCulture))">
@CodeShare.Library.Utility.Social.General.GetRelativeTime(Model.Content.GetPropertyValue<DateTime>("blogPostDate") ) </time>
</li>
</ul>
<a href="http://www.facebook.com/sharer/[email protected]" rel="nofollow">
<amp-img src="https://codeshare.co.uk/media/1127/fbamp-1.png" alt="FB-Share" width="105" height="39" class="amp-wp-enforced-sizes"></amp-img>
</a>
<a href="http://twitter.com/intent/tweet?text=@(Model.Content.HasValue("pageTitle") ? pageTitle : Model.Content.Name)&url=@(Model.Content.Url)&via=CodeSharePaul" rel="nofollow">
<amp-img src="https://codeshare.co.uk/media/1128/twamp-1.png" alt="Tw-Share" width="105" height="39" class="amp-wp-enforced-sizes"></amp-img>
</a>
<div class="media-credit-container alignnone"><amp-img class="size-full wp-image-264208 amp-wp-enforced-sizes" src="@imgUrl" alt="@Model.Content.Name" width="1200" srcset="@(imgUrl)?width=1200&mode=crop&anchor=center 1200w, @(imgUrl)?width=622&height=350&mode=crop&anchor=center 622w" sizes="(min-width: 800px) 800px, 100vw" height="675"></amp-img></div>
@Html.GetGridHtml(Model.Content, "contentGrid", "Amp")
</div>
</body>
</html>

And in my master template I have this for rendering the amp url in the head

@if (Model.Content.HasValue("enableAmp") && (bool)Model.Content.GetPropertyValue<bool>("enableAmp"))
{
    <link rel="amphtml" href="@(Model.Content.Url)amp/" />
}

I hope that helps

Paul

Copy Link

Paul Seal 428 posts 2354 karma points MVP 3x c-trib

Nov 21, 2019 @ 11:01

0

Finished editing it now 😀

Copy Link
Carlos Mosqueda 185 posts 277 karma points

Apr 07, 2020 @ 21:57

0

@Paul,

When you did the amp template. How is the alt template URL /amp/ ? How does that work. We are using Umbraco 7.12 still is it different in Umbraco 8? We get a 404 with the "/amp/" at the end of the URL.

Copy Link
is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies

Flag this post as spam?

AMP in existing project