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 6182 posts 24284 karma points MVP 8x 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 2800 posts 8791 karma points MVP 8x 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 524 posts 2890 karma points MVP 7x 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 6182 posts 24284 karma points MVP 8x admin c-trib

Nov 21, 2019 @ 10:50

0

Thanks for recommendations! #h5yr!

Copy Link

Paul Seal 524 posts 2890 karma points MVP 7x 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 524 posts 2890 karma points MVP 7x c-trib

Nov 21, 2019 @ 11:01

0

Finished editing it now 😀

Copy Link
Carlos Mosqueda 244 posts 435 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