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.