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;
}
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:
