Media
Table of Contents
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
orresponsive
. 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
orraw
)- default - get image from the
/images/posts/
directory (, or the path configured as theimage_path.default
in_config.yml
) assets
- get image from the/assets/images/
directory (, or the path configured as theimage_path.assets
in_config.yml
)projects
- get image from the/images/projects/
directory (, or the path configured as theimage_path.projects
in_config.yml
)raw
- get image from the specified URL
- default - get image from the
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:
This browser does not support the YouTube video player. Watch on YouTube
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:
<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:
Your browser doesn’t support HTML5 audio