This post has many tags.

This post should display a header image, if the theme supports it.

Featured image is an external asset and should load.

This post should display a header image, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests a horizontal header image.

This post should display a header image, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests a vertical header image.

This post should display a header with an overlay image, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests overlay header images.

Overlay filter

You can use it by specifying the opacity (between 0 and 1) of a black overlay like so:


excerpt: "This post should [...]"
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "More Info"
      url: "https://unsplash.com"

Or if you want to do more fancy things, go full rgba:

This post should display a header with an overlay image and custom tagline, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests overlay header images with custom page.tagline.

tagline: "This is a custom tagline content which overrides the default page excerpt."
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"

This post should display a header with a solid background color, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests overlay headers.

Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started.

{: .align-center}

The image above happens to be centered.

{: .align-left} The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

This post has a header image with an OpenGraph override.

header:
  image: /assets/images/page-header-image.png
  og_image: /assets/images/page-header-og-image.png

{% capture fig_img %}  {% endcapture %}

{% capture fig_img %} {% endcapture %}

{% capture fig_caption %} Image with a caption. {% endcapture %}

The preferred way of using images is placing them in the /assets/images/ directory and referencing them with an absolute path. Prepending the filename with {% raw %}{{ site.url }}{{ site.baseurl }}/assets/images/{% endraw %} will make sure your images display properly in feeds and such.

Standard image with no width modifier classes applied.

HTML:

{% raw %}<img src="{{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg" alt="">{% endraw %}

or Kramdown:

{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg){% endraw %}


This post has a header image with an OpenGraph override.

header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  og_image: /assets/images/page-header-og-image.png
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  actions:
    - label: "Learn more"
      url: "https://unsplash.com"

This post has a teaser image with an OpenGraph override.

header:
  teaser: /assets/images/page-header-teaser.png
  og_image: /assets/images/page-header-og-image.png