Dark Post

This is a sample post to show the dark post theme. To use this dark theme, just add:

on your post. This theme adds a dark background with a white panel to show your content.

Post with a Background Image

Here be a sample post with a custom background image. To utilize this “feature” just add the following YAML to a post’s front matter.

This little bit of YAML makes the assumption that your background image asset is in the /images folder. If you place it somewhere else or are hotlinking from the web, just include the full http(s):// URL. Either way you should have a background image that is tiled.

This theme supports link posts, made famous by John Gruber. To use, just add link: https://url-you-want-linked to the post’s YAML front matter and you’re done.

A Post with a Video

Video embeds are responsive and scale with the width of the main content block with the help of FitVids.

Adding YouTube video embeds causes errors when building your Jekyll site. To fix wrap the html within {::nomarkdown} tags. Example below:

A Post with Images

Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use figure with the appropriate class. Each instance of figure is auto-numbered and displayed in the caption.

Figures (for images or video)

Two Up

Apply the half class like so to display two images side by side that share the same caption.

And you’ll get something that looks like this:

Three Up

Apply the third class like so to display three images side by side that share the same caption.

And you’ll get something that looks like this:

Alternative way

Another way to achieve the same result is to include gallery Liquid template. In this case you don’t have to write any HTML tags – just copy a small block of code, adjust the parameters (see below) and fill the block with any number of links to images. You can mix relative and external links.

Here is the block you might want to use:

Parameters:

• caption: Sets the caption under the gallery (see figcaption HTML tag above);
• cols: Sets the number of columns of the gallery. Available values: [1..3].

It will look something like this: