Just a quick one regarding something I learned recently about Hugo. I don’t put all that many images in my blog posts- I suppose I should try and make them more readable, but in reality this blog is more for me than anyone else! However, I have been a bit frustrated with the way in which Hugo works with images. There is no easy way within markdown to support basic image manipulation. Centering images, for example, seemingly impossible without working with shortcodes!

I quite like the philosophy of this, in that markdown as a language is supposed to be as readable and free of code as possible. It’s really nice to write in and I definitely prefer it over using a full-blown CMS. Hugo suggests that any further formatting and manipulation be done in HTML through shortcodes. I did this with youtube for another post, but couldn’t work out how to do basic things with images. Hugo gives these instructions, but I have yet to really get my head around what this is doing.

A solution

I found this solution on someone’s blog. Rather than messing about with HTML shortcodes, CSS rules are added to the active theme. Taken from the blog;

img[src$='#center']{
  display: block;
  margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
                            whatever floats your boat, but keep the
                            horizontal 'auto' for this to work */
  /* whatever else styles you fancy here */
 }
img[src$='#floatleft']{
    float:left;
    margin: 0.7rem;
}
img[src$='#floatright']{
    float:right;
    margin: 0.7rem;
}

Then it’s simply a case of using this in the markdown when you insert an image;

![your_img](/img/your_img.png#center)
![your_img](/img/your_img.png#floatleft)
![your_img](/img/your_img.png#floatright)

A really nice little hack! This was inspired, in turn, by this conversation on the Hugo Discourse. This is certainly useful for me and I’ll come back to it in the future.