Useful Template Snippets

Find below a collection of useful snippets for common tasks using Automad's template language.

Content

Defining a default value in case a variable is empty:

@{ subtitle | def ('Hello there') }

Shortening a text to 100 characters:

@{ +main | findFirstParagraph | stripTags | 100 }

Finding the first paragraph or the first image in a variable, to be used in a page preview card or similar:

<# Blocks #>
@{ +main | findFirstParagraph }
@{ +main | findFirstImage }
<# Markdown variable #>
@{ textTeaser | markdown | findFirstParagraph }
@{ textTeaser | markdown | findFirstImage }

Using the first image of each page within a pagelist loop:

<@ foreach in pagelist @>
  <@ set { :img: false } @>
  <@ set { :img: @{ +main | findFirstImage } } @>
  <@ with @{ :img } { width: 400 } @>
    <img src="@{ :fileResized }" alt="@{ title }">
  <@ end @>
<@ end @>

Formatting the date of a page using the currently active language:

@{ date | dateFormat ('j. F Y', @{ :lang }) }

Creating a copyright notice with the current year:

&copy; @{ :now | dateFormat ('Y') } @{ sitename }

Using the template name as a class name:

<html class="@{ template | sanitize }">

Loops

Looping over a list of files with resizing and cropping:

<@ foreach in '*.png, *.jpg' { width: 400, height: 400, crop: true } @>
  <img src="@{ :fileResized }" alt="@{ :basename }">
<@ end @>

Creating a recursive navigation tree that only expands the current path:

<# Create a snippet to be used recursively. #>
<@ snippet tree @>
  <# Only show children in the current path. #>
  <@~ if @{ :currentPath } @>
    <# Only create a new list in case the current context has children. #>
    <@~ if @{ :pagelistCount } @>
      <ul>
        <@~ foreach in pagelist @>
          <li<@ if @{ :current } @> class="active"<@ end @>>
            <a href="@{ url }">@{ title | stripTags }</a>
            <# Call the tree snippet recursively. #>
            <@~ tree ~@>
          </li>
        <@~ end @>
      </ul>
    <@~ end @>
  <@~ end @>
<@~ end ~@>
<# Create a new pagelist including all children of the current context. #>
<@~ newPagelist { type: 'children' } ~@>
<# Change the context to the homepage. #>
<@~ with '/' @>
  <# Start the recursion. #>
  <@~ tree @>
<@~ end @>

Looping over the tags of a page in order to create a comma separated list of tags that link to the parent page:

<@~ foreach in tags ~@>
  <@~ if @{ :i } > 1 @>,&nbsp;<@ end ~@>
  <a href="@{ :parent }?filter=@{ :tag }">@{ :tag }</a>
<@~ end ~@>

Pagelists

Creating a searchable, filterable and paginated list of pages using query string parameters:

<@ newPagelist {
  type: 'children',
  filter: @{ ?filter },
  search: @{ ?search },
  sort: @{ ?sort | def ('date desc') },
  limit: 10,
  page: @{ ?page | def (1) }
} @>
<@ foreach in pagelist @>
  <a href="@{ url }">@{ title }</a>
<@ else @>
  <p>No pages found.</p>
<@ end @>
<@ for 1 to @{ :paginationCount } @>
  <a href="?<@ queryStringMerge { page: @{ :i } } @>">@{ :i }</a>
<@ end @>

Linking to the previous and next page:

<@ newPagelist { type: 'siblings', sort: 'date desc' } @>
<@ with prev @>
  <a href="@{ url }">&larr; @{ title }</a>
<@ end @>
<@ with next @>
  <a href="@{ url }">@{ title } &rarr;</a>
<@ end @>

Custom Functions

Defining a simple icon helper as a custom function, as it is done in the Standard Lite theme:

<?php

use Automad\Core\Automad;

func('icon', function (array $options, Automad $Automad): string {
  return '<i class="icon-' . $options['name'] . '"></i>';
});

<@ icon { name: 'arrow-left' } @>