Wide Images and Code Blocks

You can make extra wide images, code blocks, figures, and arbitrary HTML by using {% include wideimage.html … %}, {% include widecode.html … %} and {% include wide.html … %}.

Wide Images

To insert a wide image do:

{% include wideimg.html src="/assets/images/clouds.jpg"
                        alt="A wide image"
                        title="A wide image" %}

That’ll output an image that’s slightly wider than the main article contents, like this:

Wide Image Figures

If you pass a figcaption argument to {% include wideimage.html … %} then it’ll output a wide figure image, with the caption underneath it. For example this:

{% include wideimg.html src="/assets/images/plant.jpg"
                        alt="A wide image"
                        title="A wide image"
                        figcaption="This is the caption" %}

will output this:

Wide Code Blocks

You can also make extra wide code blocks by using {% include widecode.html … %} For example this:

{% capture code %}static int
BaseException_init(PyBaseExceptionObject *self, PyObject *args, PyObject *kwds)
{
    …
}{% endcapture %}
{% include widecode.html content=code %}

will output this:

static int
BaseException_init(PyBaseExceptionObject *self, PyObject *args, PyObject *kwds)
{
    if (!_PyArg_NoKeywords(Py_TYPE(self)->tp_name, kwds))
        return -1;

    Py_INCREF(args);
    Py_XSETREF(self->args, args);

    return 0;
}

Unfortunately syntax highlighting isn’t supported in wide code blocks.

Wide Code Figures

As with {% include wideimage.html … %} if you pass a figcaption argument to {% include widecode.html … %} then it’ll output a wide code figure. For example this:

{% include widecode.html content=code figcaption="This is the code figure caption" %}

will output this:

static int
BaseException_init(PyBaseExceptionObject *self, PyObject *args, PyObject *kwds)
{
    if (!_PyArg_NoKeywords(Py_TYPE(self)->tp_name, kwds))
        return -1;

    Py_INCREF(args);
    Py_XSETREF(self->args, args);

    return 0;
}

This is the code figure caption

Again, syntax highlighting isn’t supported.

Wide Arbitrary HTML

You can use {% include wide.html … %} to make arbitrary HTML content extra wide. For example this:

{% capture html %}<p>This is some arbitrary HTML content that's a bit wider than the rest of the page.</p>
<blockquote>Here's a blockquote.</blockquote>{% endcapture %}
{% include wide.html content=html %}

will output this:

This is some arbitrary HTML content that's a bit wider than the rest of the page.

Here's a blockquote.

Full Bleed

Any of {% include wideimage.html … %}, {% include widecode.html … %} or {% include wide.html … %} can be made “full bleed” (the full width of the browser window, rather than just a little wider than the rest of the page) by passing fullbleed=true. For example this:

{% include wideimg.html fullbleed=true src="/assets/images/dog.jpg" alt="A full bleed image" title="A full bleed image" figcaption="This is a full bleed image of a dog" %}

will output this full bleed image figure:

A full bleed image — This is a full bleed image of a dog