Recently I introduced two changes on Caspershire Meta, followed by the same kind of update on the CaspershireNet. The first change was that I updated the CSS to support image captioning. At first I tried using a cool CSS animation (tutorial here) and the js module CaptionJS.

The CSS animationn did not really work well with my current theme and I was too lazy to tinker around. CaptionJS did not work at all and I also did not have time to play around with it.

Then, I found this thread on the Stack Overflow, where this fella asked how to do image caption in Markdown. The fix is pretty simple.

So in Markdown, wrap your caption with emphasis single-asterisk tag directly underneath the image without adding a new line, like this:

![](path_to_image)
*image_caption*

This generates the following HTML:

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

Say, if you add a new line, you are making two <p>, so this trick does not work. Now, let’s do something with the CSS. Here is my code, derived from the Stack Overflow thread.

img + em {
	display: block;
	text-align: center;
	font-size: 0.9em;
	margin-top: -5px;
}

Okay, so that’s the first change. The second change is that I am now retiring my asset.caspershire.net image bucket on AWS S3 (see asset hosting with S3, written on 17 July 2014). So after this, instead of uploading image assets to the S3, I will upload the images directly within the Hugo blog folder. This further simplifies the workflow and makes updating my blogs easier.

I am not too concerned with not having S3+CloudFront anymore because all of my assets are pretty small (about 22 MB for all assets). Besides, all images are subjected to a pretty strict compression before being uploaded, so I don’t think this new workflow would adversely impact the speed.

Here is the uploaded directory tree:

.
├── config.toml
├── content
|   └── post
├── public
├── static
|   └── img
|		 ├── 2014	
|        ├── 2015
|        ├── 2016
|        └── 2017
└── themes

All images now will reside in the img directory within the static, and categorized by year. So now in earch Markdown file, I will have this:

![image1](/img/2017/image1.png)

… instead of this:

![image1](https://asset.caspershire.net/2017/image1.png)

… which, I think, makes is easier to write. Also, I no longer have to configure the CloudFront again in the future should the SSL certificate expires (see HTTPS them all, written on 01 September 2016).

However, the downside of using this internal image source (as opposed to storing on S3) is that when previewing the files on GitHub/GitLab/Gogs, the web markdown editor will no longer display pictures anymore. For now I do not consider this as a problem because when previewing the files, I prefer using hugo serve anyways because it shows the actual rendering of the page.