Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/gurusabarish/hugo-profile/llms.txt

Use this file to discover all available pages before exploring further.

Hugo Profile includes a standalone gallery page type powered by viewer.js for lightbox image browsing. Clicking any image opens a full-screen overlay with zoom, rotation, and navigation controls. Unlike the homepage sections, the gallery is not a params entry in hugo.yaml — it is a dedicated content page defined by a gallery.md file in your content/ directory.

​
Creating the Gallery Page

Create the file content/gallery.md with layout: "gallery" in its front matter. Hugo Profile’s gallery.html layout template handles the rest.

​
Front Matter Fields

​
title
string
required
The page title displayed as the large heading at the top of the gallery page.
​
description
string
A subtitle shown below the title. Supports emoji shortcodes (e.g., :camera:).
​
viewer
boolean
default:"true"
Enables the viewer.js lightbox. When set to false, images are displayed as a plain grid with no click-to-expand behaviour, and the viewer.js assets are not loaded.
​
viewerOptions
object
An optional JavaScript options object passed directly to the viewer.js constructor. Use this to customise lightbox behaviour such as hiding the title bar, changing the toolbar, or setting transition animations. See the viewer.js options reference for all available keys.
​
galleryImages
object[]
The list of images to display. Each entry requires a single src field containing the image URL or site-relative path.

​
Example gallery.md

---
title: "Image Gallery"
description: "My gallery :earth_asia:"
layout: "gallery"
galleryImages:
  - src: /images/gallery/photo1.jpg
  - src: /images/gallery/photo2.jpg
  - src: /images/gallery/photo3.jpg
viewer: true
viewerOptions:
  title: false
  # you can add more options here. refer https://github.com/fengyuanchen/viewerjs?tab=readme-ov-file#options
---

​
Adding Gallery to the Navigation Menu

To make the gallery accessible from the top navigation bar, add an entry to the Menus.main list in your hugo.yaml: 
Menus:
  main:
    - identifier: gallery
      name: Gallery
      title: Gallery
      url: /gallery
      weight: 2
The weight value controls the order of menu items. Lower numbers appear first. Adjust it alongside your other menu entries (e.g., Blog) to control placement.

​
viewer.js Options

The viewerOptions front matter field accepts any configuration object supported by viewer.js and is passed directly into the constructor call. For example, to disable the image title overlay: 
viewerOptions:
  title: false
  # you can add more options here. refer https://github.com/fengyuanchen/viewerjs?tab=readme-ov-file#options
Refer to the full viewer.js documentation for all available options.

​
Cloudinary Integration

If cloudinary_cloud_name is set in params, Hugo Profile can serve responsive, CDN-hosted images using the dynamic-img shortcode. Add the shortcode calls in the body of your gallery.md (below the front matter delimiter) instead of using galleryImages: 
{{</* dynamic-img src="/image/path.jpg" title="My Image" width="w_800" */>}}
The shortcode accepts the following parameters:
ParameterDescriptionDefault
srcImage path on Cloudinary (required)—
titleAlt text and tooltip for the image—
widthCloudinary width transformation (e.g., w_800)w_auto
styleInline CSS applied to the <img> elementmax-width:80%
The dynamic-img shortcode requires your images to be uploaded and hosted on Cloudinary. Set params.cloudinary_cloud_name to your Cloudinary cloud name in hugo.yaml to activate this feature.

Build docs developers (and LLMs) love

Get started for freeTalk to us