Auto center with caption for images in Hugo
Create a file: layouts/_default/_markup/render-image.html: 1 2 3 4 5 6 <figure class="align-center "> <img loading="lazy" src="{{ .Destination | safeURL }}#center" alt="{{ .PlainText }}" > {{ with .Text }} <figcaption><p>{{ . | safeHTML }}</p></figcaption> {{ end }} </figure> Then magic happens: 1  Render as: sample
)](https://blog-assets.ringsaturn.me/pic/china-weather-radar/shanghai_wsr88d_002.jpg)


