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.