imgSet

generates a set of resized images, linking to their original sized version.
This tool returns the basic HTML for a simple image gallery. A page variable image_caption_FILENAME gets added for every image in the set to the page's Data & Settings panel automatically to be used as an optional content for the data-caption attribute of each <img> tag.

@t(imgSet{ Options })

Options

files: "*.jpg" - string

Filenames or pattern to select files. Multiple files/patterns can be defined, separated by comma.
For example: files: "image1.jpg, image2.jpg, *.png"

Note that all specified paths always represent a file system path and not an URL. All absolute paths are relative to the Automad base directory. For example: "/pages/shared/*.jpg"

width: false - integer or false

The width of the image in pixels. If not specified, the image's original width gets used.

height: false - integer or false

The height of the image in pixels. If not specified, the image's original height gets used.

crop: false - boolean

This option defines whether the image shall be cropped, in case the specified aspect ratio differs from the image's original aspect ratio. Possible values are true, false, 1 or 0.

order: false - string or false

Change the order of the images. Possible values are:

  • false - keep original order
  • "asc" - acending
  • "desc" - descending

class: "" - string

The optional class(es) of the <div></div> tags wrapping each image.

firstWidth: false - integer or false

Optional width for the first image.

firstHeight: false - integer or false

Optional height for the first image.

firstClass: false - string or false

Optional class for the first image.

enlargedWidth: false - integer or false

Maximum width of enlarged images in pixels.

enlargedHeight: false - integer or false

Maximum height of enlarged images in pixels.


Example

Simple gallery containing all JPG and all PNG images in /shared:

@t(imgSet{
    files: "/shared/*.jpg, /shared/*.png",
    width: 300,
    height: 200,
    crop: true
})
See also