Skip to main content

Pretty Good Hat

Hugo: render hooks and partial for displaying images

Markdown render hooks allow for adding customization to the default markdown to html rendering in hugo. When placed in _default/_markup/render-image.html, this example overrides the standard rendering of images from markdown to include a call to Glightbox.

    <a href="{{ .Destination | safeURL }}" class="glightbox" data-gallery="{{ .Page.Permalink }}">
    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" style="max-height: 720px" />
    </a>

This grabs the page’s permalink for the data-gallery property.

For photos specified in a post’s yaml frontmatter, I call a partial in my article template, photos.html:

    {{ range .Params.photo }}  
    <a href="{{ replace .value " " "" }}" class="glightbox" 
            data-gallery="{{ replace .value " " "" }}">
    <img src="{{ replace .value " " "" }}" alt="{{ .alt }} "
    style="max-height: 720px;"  />
    </a>
    {{ end }}

Both of these assign the data-gallery property in order to avoid overlapping galleries on index or other pages with multiple posts. One future improvement to try is building a shortcode to replace the partial, so that the gallery ID or other properties can be customized at call time.