Media

Table of Contents

• Image (Markdown)
• Image in AMP
• Using include picture.html
  • Image with Caption
  • Image with Link
  • Image with Disabling Lightbox
  • Image with Classes
• Video
  • Embedding a YouTube Video
  • Embedding a YouTube Playlist
• Audio

Image (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'?

Image 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 include picture.html

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

Video

You need to include the following front-matter variable to enable YouTube embeds.

amp:
   youtube: true

Embedding a YouTube Video

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

{% include youtube.html id="<YOUTUBE_VIDEO_UID>" %}

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

Sample:

Embedding a YouTube Playlist

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

{% include youtube.html id="<YOUTUBE_VIDEO_UID>" playlist="<YOUTUBE_PLAYLIST_UID>" %}

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

Audio

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: