Varun D Varun D - 2 months ago 13
HTML Question

Adding custom HTML tags to Ghost or Ghost Themes

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

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}}