Media

Table of Contents

• Images (Markdown)
• Images in AMP
• Using picture.html Template
  • Image with Caption
  • Image with Link
  • Image with Disabling Lightbox
  • Image with Classes
• YouTube Videos
• Audios

Images (Markdown)

You should AVOID using Markdown to add an image. Otherwise, you will get the following AMP validation error:

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

Images in AMP

For AMP pages, you need to display an image with the <amp-img> tag.

You can use inline HTML to add an image in Jekyll, like is:

<amp-img src="/YOUR_BASE_URL/PATH/FILENAME.jpg" \
    width="IMG_WIDTH" height="IMG_HEIGHT" layout="responsive"></amp-img>

Sample:

Advanced bi-additives stabilize the vanadium electrolyte at higher energy content and in a wider temperature range at Pacific Northwest National Laboratories. Photo by Science in HD on Unsplash

I know that you absolutely don’t want to type in this way because it is easy to make mistakes.

Therefore, I created the picture.html as the template for you to include images in AMP valid format properly and quickly.

Using picture.html Template

The picture.html is an integrated image container in AMP designed for supporting lightbox and WebP image with fallback. It bundles the amp-img component with figure, figcaption, and <a> elements to provide rich features. You can configure caption, classes, hyperlink, layout, Alt text, and source directory.

The basic usage:

{% include picture.html img="FILENAME.jpg" width="IMG_WIDTH" height="IMG_HEIGHT" %}

Options:

• alt (if not specific, Image in <YOUR_POST_TITLE> will be automatically generated as the Alt text for SEO purpose)
• caption (support HTML codes)
• class (e.g. text-center)
• layout (amp-img supported layouts: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay or responsive. default: intrinsic)
• lightbox (default: true)
• link (assign a URL for the HTML <a> tag that wraps the <amp-img> tag when the key is present)
• source (assets, projects or raw)
  • default - get image from the /images/posts/ directory (, or the path configured as the image_path.default in _config.yml)
  • assets - get image from the /assets/images/ directory (, or the path configured as the image_path.assets in _config.yml)
  • projects - get image from the /images/projects/ directory (, or the path configured as the image_path.projects in _config.yml)
  • raw - get image from the specified URL

Sample:

Photo captured during office hours of a company in Brazil. Photo by Lucas Vasques on Unsplash

Image with Caption

{% include picture.html ... caption="__descriptions__<br>__attributions__" %}

Sample:

Image with Link

{% include picture.html ... link="DESTINATION_URL" %}

Sample:

Click the Image Above to View the Original Image on Unsplash 👆

Image with Disabling Lightbox

Sample:

{% include picture.html ... lightbox=false %}

Image with Classes

Sample 1:

{% include picture.html ... class="text-center shadow-none" %}

Sample 2:

{% include picture.html ... class="text-center fa-rotate-180" %}

YouTube Videos

This theme fully supports embedding YouTube videos, allowing you to easily integrate video content into your pages.

To enable YouTube embeds, include the following front-matter variable:

amp:
   youtube: true

To embed a single video, use the following tag to include the youtube.html template.

{% include youtube.html id="VIDEO_ID" title="VIDEO_TITLE" %}

• id - required
• title - optional
• indent - optional

Example Video:

To embed a playlist, set both the playlist ID and the ID of the first video within the playlist.

{% include youtube.html id="VIDEO_ID" playlist="PLAYLIST_ID" %}

• id - required
• playlist - required
• title - optional
• indent - optional

Example Playlist:

For more details on how to use this feature, refer to the Using AMP YouTube Components page.

Audios

By default, this theme does not include the amp-audio components. But you can enable the feature by adding the following to your post’s front matter:

custom_head: >-
  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

In your post body, use inline HTML to embed audio using the <amp-audio> tag, e.g.:

<amp-audio width="auto" height="50" src="HTTPS_URL_TO_LOAD_AUDIO">
  <div fallback>Your browser doesn’t support HTML5 audio</div>
</amp-audio>

Sample: