Working with Images

Images are the most important type of media used in the internet and are essential for any kind of blog or portfolio. Automad's template language provides handy methods for basic image processing like resizing and cropping. When using a single image or iterating a set of images, resizing options can simply be passed to a with statement or foreach loop. Please check out the images template shipped with theme skeleton package to get started quickly.

<@ foreach in '*.jpg, *.png' { width: 400, height: 300, crop: true } @>
    <# Code to be used for each image in the filelist. #>
    <img 
    src="@{ :fileResized }" 
    alt="@{ :basename }"
    title="@{ :file }"
    width="@{ :widthResized }"
    height="@{ :heightResized }"
    >
    <p>@{ :caption | markdown }</p>
<@ else @>
    <# Code to be used when the list of images is empty. #>
<@ end @>

Instead of using a glob pattern in the foreach loop, it is recommended to use the filelist object.

If you look at the example code above you will notice the use of certain runtime variables to access image properties within a code block. While the :file variable represents the original file, :fileResized refers to path of the resized and cached version. The :caption variable enables you to get the caption text stored along with the file.