Advanced Post Features - aav7fl/website GitHub Wiki

Videos

AMP has a special way to embed videos as opposed to a normal HTML5 implementation. In order to insert a video into a blog post, it must be correctly generated for both website layouts.

On the blog post frontmatter, if there is a YouTube video include:

amp:
  - YouTube

If there in an embedded video file, include:

amp:
  - Video

This information is used to build the <head> in the AMP Page whether to include the special JS files needed to play videos.

To insert a video into the post, use one of the following excerpts.

For a YouTube video:

{% include video.html
  type="YouTube"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
%}

For an embedded video file:

{% include video.html
  src="/assets/files/2016/03/bug_example.mp4"
  poster="/assets/files/2016/03/bug_example_poster.png"
  controls="loop"
%}

If special control options are known for the embedded video player, they can be used in the controls= option above.

Images

Images that are immediately followed by an em tag will be considered captions and shown as such with CSS.

Example:

![Image alt text](/assets/img/2016/03/comparison.jpg)*This is a caption*

Result:

Example

Post Frontmatter Tags

SEO

The SEO plug-in will understand the following webpage types and adjust the JSON-LD accordingly.

BlogPosting
Website
Webpage

It will accept any SEO Type, but only the listed above will properly adjust the meta tags.

A blog post frontmatter would contain the following:

seo:
  type: BlogPosting

Layouts

Change the frontmatter layout on a page to no-title to remove the page title generated by the default layout. Useful when the desired output is to generate a custom title on the page not fitting for the <meta> title. i.e. The name on a résumé page.