Filelist

The filelist contains by default all images that are attached to the current page. The selection of files can be changed using the filelist function, which accepts one or more comma-separated glob patterns as well as a sort order. A foreach loop can then be used to iterate the files in the list.

<@ filelist {
  glob: '*.pdf, *.zip',
  sort: 'asc'
} @>
<@ foreach in filelist @>
  <a href="@{ :file }">@{ :basename }</a>
<@ end @>

Glob Patterns

Glob patterns are always resolved relative to the directory of the current page, unless they start with a /. Patterns starting with a / are resolved relative to the Automad base directory. It is also possible to include files from remote URLs, which are downloaded and cached automatically.

<@ filelist { glob: '*.jpg, /shared/*.jpg, https://domain.com/image.jpg' } @>

Runtime Variables

When iterating files, the current file and its properties can be accessed using the :file, :basename and :caption variables. For images, :width and :height as well as the resized versions :fileResized, :widthResized and :heightResized are available as well. Find more details on the runtime variables page.

Example

The following example uses a files variable that can be defined in the dashboard in order to make the selection of images configurable. In case the variable is empty, all PNG and JPG files are used. All images are resized to a width of 400 pixels.

<@ filelist {
  glob: @{ files | def ('*.png, *.jpg') },
  sort: 'asc'
} @>
<h2>@{ :filelistCount } Images</h2>
<@ foreach in filelist { width: 400 } @>
  <img
    src="@{ :fileResized }"
    width="@{ :widthResized }"
    height="@{ :heightResized }"
    alt="@{ :caption | stripTags }"
  >
<@ end @>

Learn more about resizing and cropping images in the working with images chapter.