{"category":{"version":"58810495d172b61b00d73859","project":"542fe92a5eceb608003fddc8","_id":"58810495d172b61b00d7385c","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-05-18T14:06:32.423Z","from_sync":false,"order":2,"slug":"features","title":"Features"},"parentDoc":null,"project":"542fe92a5eceb608003fddc8","user":"572f1e7f9cd0501700b2fb36","version":{"__v":1,"_id":"58810495d172b61b00d73859","project":"542fe92a5eceb608003fddc8","createdAt":"2017-01-19T18:25:25.206Z","releaseDate":"2017-01-19T18:25:25.206Z","categories":["58810495d172b61b00d7385a","58810495d172b61b00d7385b","58810495d172b61b00d7385c","58810495d172b61b00d7385d","58810495d172b61b00d7385e","58810495d172b61b00d7385f"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.11.4","version":"0.11.4"},"_id":"58810495d172b61b00d7386c","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-08-22T14:46:05.392Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":19,"body":"## Description\n\nThe `amp` template is used to render an automatic AMP (Accelerated Mobile Pages) version of your post, which makes things load crazy-fast on mobile devices and puts you in Google's good-books.\n\n## Route\n\nTo access any post rendered using the `amp.hbs` template, just add `/amp/` to the end of your post URL. The parent post will also have a new canonical link to its AMP equivalent, to make it easily discoverable by machines.\n\n## Template\n\nThe amp context always uses the `amp.hbs` template. Ghost will first look for and use an `amp.hbs` template within your theme files and, if none exists, it will fall back to its own basic default amp template. \n\nThe custom `amp.hbs` template should live within the file structure like here:\n```\n.\n├── /assets\n|   └── /css\n|       ├── screen.css\n|   ├── /fonts\n|   ├── /images\n|   ├── /js\n├── default.hbs \n├── index.hbs [required]\n└── post.hbs [required]\n└── amp.hbs [optional]\n└── package.json [required]\n```\n\nIf you wanna see, how Ghost accesses the data for an AMP post or - even more important what information you need and what is prohibited - , you will find Ghost's default template in `/core/server/apps/amp/lib/views/amp.hbs`.\n\n## Data\n\nThe `amp` context provides access to the post object which matches the route. As with all contexts, all of the `:::at:::blog` global data is also available. \n\nWhen outputting the post, you can use a block expression (`{{#post}}{{/post}}`) to drop into the post scope and access all of the attributes. See a full list of attributes [here](doc:post-context#section-post-object-attributes).\n\n## Specific AMP features\n\nAMP consists of three different parts:\n- AMP HTML\n- AMP JS\n- Google AMP Cache\n\nAMP has many restrictions for optimal performance, which is why we can't use regular HTML in our AMP posts:\n\n* AMP pages can’t include any JavaScript, except under special circumstances. Follow [these official AMP HTML docs](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#the-amp-html-format) to create a valid `amp.hbs`.\n* CSS is prohibited in any other places than the AMP specific `<style amp-custom></style>` tag inside of the `<head>` section. See the [official AMP CSS docs](https://www.ampproject.org/docs/guides/responsive/style_pages.html) for best results.\n* AMP doesn't use common HTML, but **AMP HMTL**. That means, some HTML tags are prohibited, while others need to be transformed. Ghost uses a tool to transform the HTML of the **content** (e. g. `<img>` becomes `<amp-img>`) and strips out disallowed tags, like `embed` or `frame`. Check out the full list of prohibited HTML tags [here](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags).\n* AMP needs a [required mark-up](https://www.ampproject.org/docs/get_started/create/basic_markup.html#required-mark-up) to run.\n* Media needs `width` and `height` attributes\n* AMP provides two ways to validate your template. The first one is to add `#development=1` to the URL, in our case this would be `https://www.myblog.com/welcome-to-ghost/amp/#development=1` and check for any validation errors in your console. The second way is to copy your HTML into their online [validator](https://validator.ampproject.org/), but keep in mind, that this will not work with our handlebars helpers.\n\nIf you want more in depth information, check out the official [AMP documentation](https://www.ampproject.org/docs/get_started/about-amp.html).\n\n## Debugging AMP template\n\nWhen developing your `amp.hbs`, one of the most important things is to make sure that your code passes AMP validation, because only validated pages will be served from the Google AMP Cache.\n\nYou can access development mode by adding `#development=1` to the URL, like this: `http://localhost:2368/welcome-to-ghost/amp/#development=1`. Any validation errors will now be listed in your browser console.\n\nRead more about AMP validation [here](https://www.ampproject.org/docs/guides/validate.html).\n\nYou can also check, if your post gets served from the Google Cache:\n\nFor Blogs served on http:\n\n`https://cdn.ampproject.org/c/my-ghost-blog.com/welcome-to-ghost/amp/`\n\nFor Blogs served on https:\n\n`https://cdn.ampproject.org/c/s/my-ghost-blog.com/welcome-to-ghost/amp/`\n\n## Helpers\n\nBecause the `amp` context is using the `post` data, you can use almost every `post` helper inside of the `{{#post}}{{/post}}` block expression:\n\n[{{title}}](doc:title), [{{url}}](doc:url), [{{author}}](doc:author), [{{date}}](doc:date), [{{excerpt}}](doc:excerpt), [{{post_class}}](doc:post_class), [{{tags}}](doc:tags)\n\nIn addition to those, you can use three more helpers especially for `amp`:\n\n[{{amp_ghost_head}}](#section--amp_ghost_head-helper-), [{{amp_components}}](#section--amp_components-helper-), [{{amp_content}}](#section--amp_content-helper-).\n\n--------\n\n### Special case for `{{image}` helper in `amp` context:\n\nThe [{{image}}](doc:image) helper needs to be wrapped in an `<amp-img>` tag and *must* provide a `width` and `height` property and works only for post images. `{{author.image}}` is not supported, in `amp` context, but the `{{image}}` helper can still be used within the `{{#author}}{{/author}}` block expression. See the examples below:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{#post}}\\n  <amp-img src={{image absolute=\\\"true\\\"}} width=\\\"600\\\" height=\\\"400\\\" layout=\\\"responsive\\\"></amp-img>\\n{{/post}}\",\n      \"language\": \"html\",\n      \"name\": \"Image within post data\"\n    },\n    {\n      \"code\": \"{{#post}}\\n\\t{{#author}}\\n  \\t<amp-img src={{image absolute=\\\"true\\\"}} width=\\\"50\\\" height=\\\"50\\\"></amp-img>\\n\\t{{/author\\\"}}\\n{{/post}}\",\n      \"language\": \"html\",\n      \"name\": \"Image within author data\"\n    }\n  ]\n}\n[/block]\n\n--------\n\n### {{amp_ghost_head}} helper:\n[block:html]\n{\n  \"html\": \"<div class=\\\"github-deeplinks inline\\\">\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/lib/helpers/index.js\\\"><i class=\\\"fa fa-github-alt fa-right\\\"></i>Source</a>\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/test/unit/server_helpers/ghost_head_spec.js\\\" class=\\\"fa fa-check-square-o fa-right\\\">Tests</a>\\n</div>\"\n}\n[/block]\nUsage: `{{amp_ghost_head}}`\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Types\",\n    \"h-1\": \"Parameters\",\n    \"h-2\": \"Attributes\",\n    \"0-0\": \"[Output](/docs/helpers#section-output), [Ghost](/docs/helpers#section-ghost), [AMP](/docs/helpers#section-amp)\",\n    \"0-1\": \"n/a\",\n    \"0-2\": \"n/a\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n#### Description\n\n`{{amp_ghost_head}}` – belongs just before the `</head>` tag in `amp.hbs`, outputs the following:\n\n* Structured data Shema.org microformats in JSON/LD - no need to clutter your theme markup!\n* Structured data tags for Facebook Open Graph and Twitter Cards.\n* RSS url paths to make your feeds easily discoverable by external readers.\n* Link to regular post equivalent\n\nThis is a simplified version of `{{ghost_head}}` which prevents any AMP-incompatible/breaking tags from being loaded into your `head` section.\n\n--------\n\n### {{amp_components}} helper:\n[block:html]\n{\n  \"html\": \"<div class=\\\"github-deeplinks inline\\\">\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/lib/helpers/amp_components.js\\\"><i class=\\\"fa fa-github-alt fa-right\\\"></i>Source</a>\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/tests/amp_components_spec.js\\\" class=\\\"fa fa-check-square-o fa-right\\\">Tests</a>\\n</div>\"\n}\n[/block]\nUsage: `{{amp_components}}`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Types\",\n    \"h-1\": \"Parameters\",\n    \"h-2\": \"Attributes\",\n    \"0-0\": \"[Output](/docs/helpers#section-output), [AMP](/docs/helpers#section-amp)\",\n    \"0-1\": \"n/a\",\n    \"0-2\": \"n/a\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n#### Description\n\n`{{amp_components}}` – belongs just before the `</head>` tag in `amp.hbs`, outputs the following, depending on the HTML in your *content*:\n\n* if a `.gif` is detected in the HTML, it outputs the necessary javascript lib for [<amp-anim>](https://www.ampproject.org/docs/reference/extended/amp-anim.html).\n* if an `<iframe>` tag is detected in the HTML, it outputs the necessary javascript lib for [<amp-iframe>](https://www.ampproject.org/docs/reference/extended/amp-iframe.html).\n* if an `<audio>` tag is detected in the HTML, it outputs the necessary javascript lib for [<amp-audio>](https://www.ampproject.org/docs/reference/extended/amp-audio.html).\n\n\n--------\n\n### {{amp_content}} helper:\n[block:html]\n{\n  \"html\": \"<div class=\\\"github-deeplinks inline\\\">\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/lib/helpers/amp_content.js\\\"><i class=\\\"fa fa-github-alt fa-right\\\"></i>Source</a>\\n    <a href=\\\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/tests/amp_content_spec.js\\\" class=\\\"fa fa-check-square-o fa-right\\\">Tests</a>\\n</div>\"\n}\n[/block]\nUsage: `{{amp_content}}`\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Types\",\n    \"h-1\": \"Parameters\",\n    \"h-2\": \"Attributes\",\n    \"0-0\": \"[Output](/docs/helpers#section-output), [AMP](/docs/helpers#section-amp)\",\n    \"0-1\": \"n/a\",\n    \"0-2\": \"n/a\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n### Description\n\n`{{amp_content}}` is used for transforming post content into valid [AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).\n\n* `<img>` will be transformed into `<amp-img>`\n* `.gif` images will be transformed into `<amp-anim>`\n* `<iframe>` will be transformed into `<amp-iframe>`\n* `<audio>` will be transformed into `<amp-audio>`\n* Removes [prohibited HTML tags](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags) to validate AMP post.\n\n*Note:* More transforms coming soon! ✨\n\n## Example code\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html ⚡>\\n<head>\\n    {{!-- Document Settings --}}\\n    <meta charset=\\\"utf-8\\\">\\n\\n    {{!-- Page Meta --}}\\n    <title>{{meta_title}}</title>\\n    <meta name=\\\"description\\\" content=\\\"{{meta_description}}\\\" />\\n\\n    {{!-- Mobile Meta --}}\\n    <meta name=\\\"HandheldFriendly\\\" content=\\\"True\\\" />\\n    <meta name=\\\"viewport\\\" content=\\\"width=device-width,minimum-scale=1,initial-scale=1\\\">\\n\\n    {{!-- Brand icon --}}\\n    <link rel=\\\"shortcut icon\\\" href=\\\"{{asset \\\"favicon.ico\\\"}}\\\">\\n\\n    {{amp_ghost_head}}\\n\\n    {{!-- Styles'n'Scripts --}}\\n    <link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"https://fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,600,400\\\" />\\n    <style amp-custom>\\n      {{!-- All CSS styles have to go here and are strictly forbidden anywhere else in the template --}}\\n    </style>\\n\\n    {{!-- The AMP boilerplate --}}\\n    <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:[email protected] -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>\\n    <script async src=\\\"https://cdn.ampproject.org/v0.js\\\"></script>\\n\\t\\t{{!-- amp_components helper renders the necessary script tags for AMP depending on the HTML in the content --}}\\n    {{amp_components}}\\n\\n</head>\\n\\n<body class=\\\"amp-template\\\">\\n    {{#post}}\\n    <header class=\\\"main-header\\\">\\n        <nav class=\\\"blog-title\\\">\\n            <a href=\\\"[email protected]}}\\\">[email protected]}}</a>\\n        </nav>\\n    </header>\\n\\n    <main class=\\\"content\\\" role=\\\"main\\\">\\n        <article class=\\\"post\\\">\\n\\n            <header class=\\\"post-header\\\">\\n                <h1 class=\\\"post-title\\\">{{title}}</h1>\\n                <section class=\\\"post-meta\\\">\\n                    {{#author}}\\n                    <p class=\\\"author\\\">by <a href=\\\"{{url}}\\\">{{name}}</a></p>\\n                    {{/author}}\\n                    <time class=\\\"post-date\\\" datetime=\\\"{{date format=\\\"YYYY-MM-DD\\\"}}\\\">{{date format=\\\"YYYY-MM-DD\\\"}}</time>\\n                </section>\\n            </header>\\n\\n            <section class=\\\"post-content\\\">\\n\\n                {{amp_content}}\\n\\n            </section>\\n\\n        </article>\\n    </main>\\n    {{/post}}\\n    <footer class=\\\"site-footer clearfix\\\">\\n        <section class=\\\"copyright\\\"><a href=\\\"[email protected]}}\\\">[email protected]}}</a> &copy; {{date format=\\\"YYYY\\\"}}</section>\\n        <section class=\\\"poweredby\\\">Proudly published with <a href=\\\"https://ghost.org\\\">Ghost</a></section>\\n    </footer>\\n</body>\\n</html>\",\n      \"language\": \"html\",\n      \"name\": \"amp.hbs\"\n    }\n  ]\n}\n[/block]","excerpt":"Accelerated Mobile Pages support for your posts","slug":"amp","type":"basic","title":"AMP"}

AMP

Accelerated Mobile Pages support for your posts

## Description The `amp` template is used to render an automatic AMP (Accelerated Mobile Pages) version of your post, which makes things load crazy-fast on mobile devices and puts you in Google's good-books. ## Route To access any post rendered using the `amp.hbs` template, just add `/amp/` to the end of your post URL. The parent post will also have a new canonical link to its AMP equivalent, to make it easily discoverable by machines. ## Template The amp context always uses the `amp.hbs` template. Ghost will first look for and use an `amp.hbs` template within your theme files and, if none exists, it will fall back to its own basic default amp template. The custom `amp.hbs` template should live within the file structure like here: ``` . ├── /assets | └── /css | ├── screen.css | ├── /fonts | ├── /images | ├── /js ├── default.hbs ├── index.hbs [required] └── post.hbs [required] └── amp.hbs [optional] └── package.json [required] ``` If you wanna see, how Ghost accesses the data for an AMP post or - even more important what information you need and what is prohibited - , you will find Ghost's default template in `/core/server/apps/amp/lib/views/amp.hbs`. ## Data The `amp` context provides access to the post object which matches the route. As with all contexts, all of the [email protected]` global data is also available. When outputting the post, you can use a block expression (`{{#post}}{{/post}}`) to drop into the post scope and access all of the attributes. See a full list of attributes [here](doc:post-context#section-post-object-attributes). ## Specific AMP features AMP consists of three different parts: - AMP HTML - AMP JS - Google AMP Cache AMP has many restrictions for optimal performance, which is why we can't use regular HTML in our AMP posts: * AMP pages can’t include any JavaScript, except under special circumstances. Follow [these official AMP HTML docs](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#the-amp-html-format) to create a valid `amp.hbs`. * CSS is prohibited in any other places than the AMP specific `<style amp-custom></style>` tag inside of the `<head>` section. See the [official AMP CSS docs](https://www.ampproject.org/docs/guides/responsive/style_pages.html) for best results. * AMP doesn't use common HTML, but **AMP HMTL**. That means, some HTML tags are prohibited, while others need to be transformed. Ghost uses a tool to transform the HTML of the **content** (e. g. `<img>` becomes `<amp-img>`) and strips out disallowed tags, like `embed` or `frame`. Check out the full list of prohibited HTML tags [here](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags). * AMP needs a [required mark-up](https://www.ampproject.org/docs/get_started/create/basic_markup.html#required-mark-up) to run. * Media needs `width` and `height` attributes * AMP provides two ways to validate your template. The first one is to add `#development=1` to the URL, in our case this would be `https://www.myblog.com/welcome-to-ghost/amp/#development=1` and check for any validation errors in your console. The second way is to copy your HTML into their online [validator](https://validator.ampproject.org/), but keep in mind, that this will not work with our handlebars helpers. If you want more in depth information, check out the official [AMP documentation](https://www.ampproject.org/docs/get_started/about-amp.html). ## Debugging AMP template When developing your `amp.hbs`, one of the most important things is to make sure that your code passes AMP validation, because only validated pages will be served from the Google AMP Cache. You can access development mode by adding `#development=1` to the URL, like this: `http://localhost:2368/welcome-to-ghost/amp/#development=1`. Any validation errors will now be listed in your browser console. Read more about AMP validation [here](https://www.ampproject.org/docs/guides/validate.html). You can also check, if your post gets served from the Google Cache: For Blogs served on http: `https://cdn.ampproject.org/c/my-ghost-blog.com/welcome-to-ghost/amp/` For Blogs served on https: `https://cdn.ampproject.org/c/s/my-ghost-blog.com/welcome-to-ghost/amp/` ## Helpers Because the `amp` context is using the `post` data, you can use almost every `post` helper inside of the `{{#post}}{{/post}}` block expression: [{{title}}](doc:title), [{{url}}](doc:url), [{{author}}](doc:author), [{{date}}](doc:date), [{{excerpt}}](doc:excerpt), [{{post_class}}](doc:post_class), [{{tags}}](doc:tags) In addition to those, you can use three more helpers especially for `amp`: [{{amp_ghost_head}}](#section--amp_ghost_head-helper-), [{{amp_components}}](#section--amp_components-helper-), [{{amp_content}}](#section--amp_content-helper-). -------- ### Special case for `{{image}` helper in `amp` context: The [{{image}}](doc:image) helper needs to be wrapped in an `<amp-img>` tag and *must* provide a `width` and `height` property and works only for post images. `{{author.image}}` is not supported, in `amp` context, but the `{{image}}` helper can still be used within the `{{#author}}{{/author}}` block expression. See the examples below: [block:code] { "codes": [ { "code": "{{#post}}\n <amp-img src={{image absolute=\"true\"}} width=\"600\" height=\"400\" layout=\"responsive\"></amp-img>\n{{/post}}", "language": "html", "name": "Image within post data" }, { "code": "{{#post}}\n\t{{#author}}\n \t<amp-img src={{image absolute=\"true\"}} width=\"50\" height=\"50\"></amp-img>\n\t{{/author\"}}\n{{/post}}", "language": "html", "name": "Image within author data" } ] } [/block] -------- ### {{amp_ghost_head}} helper: [block:html] { "html": "<div class=\"github-deeplinks inline\">\n <a href=\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/lib/helpers/index.js\"><i class=\"fa fa-github-alt fa-right\"></i>Source</a>\n <a href=\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/test/unit/server_helpers/ghost_head_spec.js\" class=\"fa fa-check-square-o fa-right\">Tests</a>\n</div>" } [/block] Usage: `{{amp_ghost_head}}` [block:parameters] { "data": { "h-0": "Types", "h-1": "Parameters", "h-2": "Attributes", "0-0": "[Output](/docs/helpers#section-output), [Ghost](/docs/helpers#section-ghost), [AMP](/docs/helpers#section-amp)", "0-1": "n/a", "0-2": "n/a" }, "cols": 3, "rows": 1 } [/block] #### Description `{{amp_ghost_head}}` – belongs just before the `</head>` tag in `amp.hbs`, outputs the following: * Structured data Shema.org microformats in JSON/LD - no need to clutter your theme markup! * Structured data tags for Facebook Open Graph and Twitter Cards. * RSS url paths to make your feeds easily discoverable by external readers. * Link to regular post equivalent This is a simplified version of `{{ghost_head}}` which prevents any AMP-incompatible/breaking tags from being loaded into your `head` section. -------- ### {{amp_components}} helper: [block:html] { "html": "<div class=\"github-deeplinks inline\">\n <a href=\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/lib/helpers/amp_components.js\"><i class=\"fa fa-github-alt fa-right\"></i>Source</a>\n <a href=\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/tests/amp_components_spec.js\" class=\"fa fa-check-square-o fa-right\">Tests</a>\n</div>" } [/block] Usage: `{{amp_components}}` [block:parameters] { "data": { "h-0": "Types", "h-1": "Parameters", "h-2": "Attributes", "0-0": "[Output](/docs/helpers#section-output), [AMP](/docs/helpers#section-amp)", "0-1": "n/a", "0-2": "n/a" }, "cols": 3, "rows": 1 } [/block] #### Description `{{amp_components}}` – belongs just before the `</head>` tag in `amp.hbs`, outputs the following, depending on the HTML in your *content*: * if a `.gif` is detected in the HTML, it outputs the necessary javascript lib for [<amp-anim>](https://www.ampproject.org/docs/reference/extended/amp-anim.html). * if an `<iframe>` tag is detected in the HTML, it outputs the necessary javascript lib for [<amp-iframe>](https://www.ampproject.org/docs/reference/extended/amp-iframe.html). * if an `<audio>` tag is detected in the HTML, it outputs the necessary javascript lib for [<amp-audio>](https://www.ampproject.org/docs/reference/extended/amp-audio.html). -------- ### {{amp_content}} helper: [block:html] { "html": "<div class=\"github-deeplinks inline\">\n <a href=\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/lib/helpers/amp_content.js\"><i class=\"fa fa-github-alt fa-right\"></i>Source</a>\n <a href=\"https://github.com/TryGhost/Ghost/blob/0.10.0/core/server/apps/amp/tests/amp_content_spec.js\" class=\"fa fa-check-square-o fa-right\">Tests</a>\n</div>" } [/block] Usage: `{{amp_content}}` [block:parameters] { "data": { "h-0": "Types", "h-1": "Parameters", "h-2": "Attributes", "0-0": "[Output](/docs/helpers#section-output), [AMP](/docs/helpers#section-amp)", "0-1": "n/a", "0-2": "n/a" }, "cols": 3, "rows": 1 } [/block] ### Description `{{amp_content}}` is used for transforming post content into valid [AMP HTML](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md). * `<img>` will be transformed into `<amp-img>` * `.gif` images will be transformed into `<amp-anim>` * `<iframe>` will be transformed into `<amp-iframe>` * `<audio>` will be transformed into `<amp-audio>` * Removes [prohibited HTML tags](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#html-tags) to validate AMP post. *Note:* More transforms coming soon! ✨ ## Example code [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html ⚡>\n<head>\n {{!-- Document Settings --}}\n <meta charset=\"utf-8\">\n\n {{!-- Page Meta --}}\n <title>{{meta_title}}</title>\n <meta name=\"description\" content=\"{{meta_description}}\" />\n\n {{!-- Mobile Meta --}}\n <meta name=\"HandheldFriendly\" content=\"True\" />\n <meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\">\n\n {{!-- Brand icon --}}\n <link rel=\"shortcut icon\" href=\"{{asset \"favicon.ico\"}}\">\n\n {{amp_ghost_head}}\n\n {{!-- Styles'n'Scripts --}}\n <link rel=\"stylesheet\" type=\"text/css\" href=\"https://fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,600,400\" />\n <style amp-custom>\n {{!-- All CSS styles have to go here and are strictly forbidden anywhere else in the template --}}\n </style>\n\n {{!-- The AMP boilerplate --}}\n <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:[email protected] -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>\n <script async src=\"https://cdn.ampproject.org/v0.js\"></script>\n\t\t{{!-- amp_components helper renders the necessary script tags for AMP depending on the HTML in the content --}}\n {{amp_components}}\n\n</head>\n\n<body class=\"amp-template\">\n {{#post}}\n <header class=\"main-header\">\n <nav class=\"blog-title\">\n <a href=\"[email protected]}}\">[email protected]}}</a>\n </nav>\n </header>\n\n <main class=\"content\" role=\"main\">\n <article class=\"post\">\n\n <header class=\"post-header\">\n <h1 class=\"post-title\">{{title}}</h1>\n <section class=\"post-meta\">\n {{#author}}\n <p class=\"author\">by <a href=\"{{url}}\">{{name}}</a></p>\n {{/author}}\n <time class=\"post-date\" datetime=\"{{date format=\"YYYY-MM-DD\"}}\">{{date format=\"YYYY-MM-DD\"}}</time>\n </section>\n </header>\n\n <section class=\"post-content\">\n\n {{amp_content}}\n\n </section>\n\n </article>\n </main>\n {{/post}}\n <footer class=\"site-footer clearfix\">\n <section class=\"copyright\"><a href=\"[email protected]}}\">[email protected]}}</a> &copy; {{date format=\"YYYY\"}}</section>\n <section class=\"poweredby\">Proudly published with <a href=\"https://ghost.org\">Ghost</a></section>\n </footer>\n</body>\n</html>", "language": "html", "name": "amp.hbs" } ] } [/block]