Wide Images and Code Blocks
===========================

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

Wide Images
-----------

To insert a wide image do:

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

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

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

Wide Image Figures
------------------

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

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

will output this:

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

Wide Code Blocks
----------------

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

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

will output this:

{% capture code %}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;
}{% endcapture %}
{% include widecode.html content=code %}

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

Wide Code Figures
-----------------

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

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

will output this:

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

Again, syntax highlighting isn't supported.

Wide Arbitrary HTML
-------------------

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

```liquid
{% raw %}{% 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 %}{% endraw %}
```

will output 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 %}

Full Bleed
----------

Any of 
`{% raw %}{% include wideimage.html … %}{% endraw %}`,
`{% raw %}{% include widecode.html … %}{% endraw %}` or
`{% raw %}{% include wide.html … %}{% endraw %}`
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:

```liquid
{% raw %}{% 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" %}{% endraw %}
```

will output this full bleed image figure:

{% 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" %}