I wasn’t quite happy with the way my last blog post looked so I decided to add captions to the images and make them a little prettier; I’ve documented what I did, (it wasn’t super hard) just in case anyone else wanted to do the same then they can checkout the previous post to see how it shakes out.

First Off

Firstly, you’ll need to add a new file into your _includes directory (I chose image.html), if don’t have an _includes directory, create one in the root of the directory, and then create a file named, (in my case) image.html:

mkdir /<myblog_repo_folder>/_includes
touch /<myblog_repo_folder>/_includes/image.html

Image.html Contents

Open the file and add HTML like the below, note the use of the include.url and include.description:

<figure class="image">
    <img 
        src="/" 
        alt=""
        class="img-responsive"
    >
    <figcaption>
        <center>
            <em></em>
        </center>
        </figcaption>
</figure>

The include.* works in the same way as props in react I guess, so what will happen here is when we add an image we require a caption on we can add url for the obvious, and description which we can use as alt text but also as a caption underneath it will look something like this in markdown:

{% include image.html url="assets/ios_mobile_app_testing_pt1/sideloadly.png" description="Sideloadly Screenshot showing upload of an IPA" %}

Once rendered, it will look like this:

A Screenshot of a Screenshot... very meta

Other Quirks…

When writing this blog post, I noticed that when I tried to put the Liquid syntax, Jekyll kept trying to interpret it and gave me weird results… To fix this you can wrap the offending code in the raw tag ending with the endraw tag…

These are wrapped with with the {% %} but trying to get that to display ends up with a loop of trying to render how we displayed each bit… so i’m not gonna do that :)

---

** NOTE: I’ve also added an actual alt property to the image “template” that way if the caption isn’t really descriptive enough for alt text alternative alt text can be provided by adding an alt property specifically in the liqiud syntax e.g.: **

{% include image.html url="someurl" description="caption goes here" alt="alt text for screenreaders"%}

---

Hopefully, This was useful

Phyu