amp in existing project

Go to solution

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 6132 posts 23951 karma points MVP 7x admin c-trib

Nov 21, 2019 @ 00:45

0

AMP in existing project

Using Umbraco And Getting Started

Umbraco 7

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 2798 posts 8788 karma points MVP 7x 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 2889 karma points MVP 6x 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 6132 posts 23951 karma points MVP 7x admin c-trib

Nov 21, 2019 @ 10:50

0

Thanks for recommendations! #h5yr!

Copy Link

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

Nov 21, 2019 @ 11:01

0

Finished editing it now 😀

Copy Link
Carlos Mosqueda 240 posts 431 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...

Please Sign in or register to post replies

Flag this post as spam?