Adding custom HTML tags to Ghost or Ghost Themes

Question

Hello wonderful people.

Challenge

I am trying to create a custom Ghost theme which supports Google's Accelerated Mobile Pages, i.e. Google AMP but I am facing a problem with a specific custom tag used for images.

Google AMP custom img tag

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Note the amp-img HTML tag.

Probable Solution

I believe in order to create a custom HTML tag for Ghost, I would need to modify core "server" Ghost files?

Current Progess

Progress so far is here on my GitHub project, Ampsper v0.0

Answer 1

Solution

Finally, Ghost release 0.10.0 has AMP (Google Accelerated Mobile Pages) support built right into the system.

Extract from Ghost's AMP Documentation:

The {{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.

examples below:

For post images:

{{#post}}
    <amp-img src={{image absolute="true"}} width="600" height="400" layout="responsive"></amp-img>
{{/post}}

For author images:

{{#post}}
  {{#author}}
    <amp-img src={{image absolute="true"}} width="50" height="50"></amp-img>
  {{/author"}}
{{/post}}