foreach

The foreach loop iterates over objects. Depending of the type of the object in use, Automad provides different runtime variables within the code block of the loop to refer to items of the object. The :i variable refers to the index of the current iteration in the loop.

Usage

The foreach loop has a simple syntax. When iteration over images, it is possible to pass a set of options to be applied to each file. It is also possible to define an else block to be processed instead when the list in use has no items.

<@ foreach in ... { options } @>
    ...
<@ else @>
    ...
<@ end @>

Pagelist

When iterating over the pagelist object, the context changes with each iteration to the current page in the loop. Every variable used in the loop's code block is then associated with the current page in the loop. Take a look at this template to get started.

<@ foreach in pagelist @>
    <li><a href="@{ url }">@{ :i }. @{ title }</a></li>
<@ else @>
    <li>No pages here!</li>
<@ end @>

Runtime Variables

:i

The index of the page in the pagelist.

Files

To iterate over a set of files you can either use the filelist object or one (or more) glob pattern(s) as string or stored in a variable. Options can be applied to process each image within the resulting set of images. Check out the images template of the theme skeleton for more details.

Note that glob patterns are always relative to the current page, unless they begin with a /. Patterns starting with a / are always relative to Automad's base URL.

<@ foreach in "*.jpg, *.png" { width: 400, height: 300, crop: true } @>
    <img 
    src="@{ :fileResized }" 
    alt="@{ :basename }" 
    title="@{ :file }"
    width="@{ :widthResized }"
    height="@{ :heightResized }"
    />
    <p>@{ :caption }</p>
<@ else @>
    <p>No images found!</p>
<@ end @>

Using a variable instead of a string:

<@ foreach in @{ images | def('*.jpg') } { width: 400 } @>
    <img src="@{ :fileResized }" alt="@{ :basename }" />
<@ end @>

Using the filelist object:

<@ filelist { 
    glob: @{ files | def('*.png') },
    sort: 'asc'
} @>
<@ foreach in filelist { width: 400 } @>
    <img src="@{ :fileResized }" alt="@{ :basename }" />
<@ end @>

Runtime

:caption

A caption associated with the current file in a loop.

:i

The index of the file in the list.

:file

The full path of the original file.

:basename

The basename (filename) of the original file.

:width

The original width in pixels.

:height

The original height in pixels.

:fileResized

The path to the resized version of the file. Every size has its own unique filename.

:widthResized

The resulting width after processing the file in pixes.

:heightResized

The resulting height after processing the file in pixes.

Tags and Filters

You can iterate over the list of tags associated with current context (page) as follows:

<ul>
    <@ foreach in tags @>
        <li>@{ :tag }</li>
    <@ end @>
</ul>

To iterate over a list of tags associated with all pages in the current pagelist, you can use the filters object. The example below demonstrates how to use the filters object to create a simple menu to filter a pagelist:

<ul>
    <@ foreach in filters @>
        <li>
            <a href="?<@ queryStringMerge { filter: @{ :filter } } @>">
                @{ :filter }
            </a>
        </li>
    <@ end @>
</ul>