Images in Hugo blog: TL;DRs

Render static images

1. Place your image file under static directory. E.g., static/cat1/my_image.png.
2. Refer the image without static. e.g., /cat1/my_image.png.

![alt text](/cat1/my_image.png "This is a caption.")

Add captions

Using Markdown render hooks The main idea is, we can overwrite how to convert image lines in markdown into HTML by create the template file layouts/_default/_markup/render-image.html.

I copied the logic from this page (Thank you, Sebastian!)

If title is specified, render by <figcaption> tag. Otherwise, just ignore it.

{{ if .Title }}
  <figure>
    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
    <figcaption>{{ .Title }}</figcaption>
  </figure>
{{ else }}
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
{{ end }}