Venti Genshin Impact PNG

This is example of Venti Genshin Impact Gallery of PNG PNG{: style=“color:red;” } 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'?

Venti is Male but beautiful

What is the best Venti Wallpaper:

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

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

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: {% include picture.html source=“assets” img=“lucas-vasques-9vnACvX2748-unsplash_1024x683.jpg” width=“1024” height=“683” alt=“Photo captured during office hours of a company in Brazil.” %} Photo captured during office hours of a company in Brazil. Photo by Lucas Vasques on Unsplash

Image with Caption

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

Sample:

{% include picture.html source=“assets” img=“science-in-hd-N4-deIU3kQI-unsplash_1024x682.jpg” width=“1024” height=“682” layout=“responsive” caption=‘NREL researcher holds a perovskite ink painted cell. NREL researchers have developed an interdigitated back contact solar cell design in which the metals and transport materials are solution processed by either ink jet or spray coating. Combined with a perovskite ink formulation with a low boiling point (<80 C) allows “paintable” solar cells.
Photo by Science in HD on Unsplash’ %}

{% raw %}
{% include picture.html ... link="<DESTINATION_URL>" %}
{% endraw %}

Sample:

{% include picture.html source=“assets” img=“science-in-hd-NP6JLl_2C-c-unsplash_1024x683.jpg” width=“1024” height=“683” layout=“responsive” caption=’Photo by Science in HD on Unsplash’ link=“https://unsplash.com/photos/NP6JLl_2C-c" %}

Click the Image Above to View the Original Image on Unsplash 👆 {: .text-center }

Image with Disabling Lightbox

Sample:

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

{% include picture.html source=“assets” img=“favicon_96x96.png” width=“96” height=“96” lightbox=false %}

Image with Classes

Sample 1:

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

{% include picture.html source=“assets” img=“favicon_96x96.png” width=“96” height=“96” class=“text-center shadow-none” %}

Sample 2:

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

{% include picture.html source=“assets” img=“favicon_96x96.png” width=“96” height=“96” 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.

{% raw %}
{% include youtube.html id="<YOUTUBE_VIDEO_UID>" %}
{% endraw %}
  • id - required
  • title - optional

Sample:

{% include youtube.html id=“8jumRGDgxiY” %}


Embedding a YouTube Playlist

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

{% raw %}
{% include youtube.html id="<YOUTUBE_VIDEO_UID>" playlist="<YOUTUBE_PLAYLIST_UID>" %}
{% endraw %}
  • id - required
  • playlist - required
  • title - 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 an 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