Post with various images

There are a few different ways to display an image in a post.

Using regular Markdown syntax

Using regular Markdown syntax is possible. The image gets rendered as a figure with a caption. Clicking the image displays it in a lightbox.

![A little `markdown` can work be used _here_](/assets/images/image003.jpg)

Which results in:

Using the figure shortcode

The figure shortcode is similar to the above, but it has some extra features.
It produces a figure with an image, and a figcaption that supports Markdown.
There are some width options, and the lightbox can be disabled.

Here is the code:

{% figure "/assets/images/image001.jpg", "Your **caption**" %}

Here is the output:

Width options

The image width can also be set to default, half, third, or unconstrained. It’s the third argument to pass to the shortcode.

{% figure "/assets/images/image001.jpg", "Your **caption**", "third" %}

Here is the output:

Disable lightbox

The lightbox can be disabled, it is the fourth argument to pass to the shortcode.

{% figure "/assets/images/image001.jpg", "", "", false %}

Produces:

Unconstrained full width image

The unconstrained width option will let the image render to its full width, across the entire page. The lightbox is disabled if the width is set to unconstrained.

{% figure "https://live.staticflickr.com/65535/49241129673_0f0d5f2751_4k.jpg", 
          "Photo credit [mendhak](https://www.flickr.com/photos/mendhak/49241129673/)", 
          "unconstrained" %}

Produces:

Straight up HTML

HTML can be directly used in Markdown. In this example no lightbox is produced.

<figure>
  <img src="/assets/images/image002.jpg" alt="Image served using HTML">
  <figcaption>
    An image served using HTML figure and figcaption
  </figcaption>
</figure>

Which results in:

…with a lightbox

Adding a hyperlink to the image will make it appear in a lightbox.

<figure>
  <a href="/assets/images/image002.jpg">
    <img src="/assets/images/image002.jpg" alt="Image served using HTML">
  </a>
  <figcaption>
    An image served using HTML figure and figcaption
  </figcaption>
</figure>

Which results in:

Standalone <img>

Using the <img> HTML tag, the image is shown as-is, no lightbox, no center alignment.

<img src="/assets/images/image002.jpg" alt="Image served using HTML">

Produces: