This post has no title specified in the YAML Front Matter. Jekyll should auto-generate a title from the filename.

Title should not overflow the content area

A few things to check for:

• Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality.
• Check the browser window / tab title.
• If you are a theme developer, check that this text does not break anything.

The following CSS properties will help you support non-breaking text.

-ms-word-wrap: break-word;
word-wrap: break-word;

This post has many tags.

This is the post content with inline code, (e.g. <span style="color: red;">red</span>. It should be displayed in place of the auto-generated excerpt in single-page views. Archive-index pages should display an auto-generated excerpt of this content.

Be sure to test the formatting of the auto-generated excerpt, to ensure that it doesn’t create any layout problems.

This post has its comments disabled.

There should be no comment form.

This post should display comments if a provider is enabled.

This is the post content. It should be displayed in place of the user-defined excerpt in archive-index pages.

This paragraph should be absent from an archive-index page where post.excerpt is shown.

This is the post content. Archive-index pages should display an auto-generated excerpt of this content.

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.

This post should display a header with a responsive video, if the theme supports it.

Settings

YouTube

To embed the following YouTube video at url https://www.youtube.com/watch?v=-PVofD2A9t8 (long version) or https://youtu.be/-PVofD2A9t8 (short version) into a post or page’s main content you’d use:

{% raw %}{% include video id="-PVofD2A9t8" provider="youtube" %}{% endraw %}

{% include video id="-PVofD2A9t8" provider=“youtube” %}

This content is before the excerpt separator tag.

Additional content before the more tag.

This post has reading time, comments, social sharing links, and related posts disabled.

Reading time, comments, social sharing and related post links should not appear.

This post has related posts disabled.

Related post links should not appear.

This post has related posts enabled.

This post has social sharing disabled.

Social sharing links should not appear.

This post should display social sharing links.

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

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

Check for long titles and how they might break a template.