img

adds the markup for a resized image with an optional link.

@t(img{ Options })

Options

file: "" - string

The file name of the image.
The value can be just a file name, a relative path, an absolute path or a glob pattern, for example "*.jpg". When using a glob pattern, always the first matching file is used.

Note that all specified paths always represent a file system path of an image and not an URL. All absolute paths are relative to the Automad base directory. For example "/pages/shared/logo.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.

link: false - string or false

Optional URL to link to.

target: false - string or false

The link's target window. "_blank" or "_self". If the option is set to false, the target attribute gets skipped.

class: false - string or false

An optional class for the generated <img> tag.


Examples

The following example will simply place the first JPG image found within the current page's directory:

@t(img{ file: "*.jpg" })

Also other locations can be specified, outside the current page's directory (relative the Automad base directory). Here, the placed image will be resized and cropped to 800x600px and will link to "http://domain.com":

@t(img{
    file: "/shared/image.jpg",
    width: 800,
    height: 600,
    crop: true,
    link: "http://domain.com",
    target: "_blank",
    class: "classname"
})

It is also possible to pass a page variable as parameter:

@t(img{ file: @p(logo) })
See also