with

The with statement processes a block of code within the context of a given page or file. When using the URL of a page or one of the keywords prev and next as argument, the context changes to that page. When using a file path, the related runtime variables can be used and images can be resized or cropped directly. In case there is no matching page or file, an optional else block is processed instead.

<@ with '/page/url' @>
  ...
<@ else @>
  ...
<@ end @>

Changing Context

The context within a with statement can either be changed to a page with a given URL or to the previous or next page in the current pagelist.

Using URLs

When using the URL of a page, either as string or as the value of a variable, the context within the statement changes to that page, in case the page exists. All variables that are used inside the statement are then associated with that page.

<@ with '/page/url' @>
  @{ title }
<@ else @>
  Page doesn't exist!
<@ end @>

Using a variable as argument, for example a url field that can be edited in the dashboard:

<@ with @{ urlFeaturedPage } @>
  <a href="@{ url }">@{ title }</a>
<@ end @>

Statements can also be nested in order to walk up the site tree. The following example changes the context to the grandparent of the current page:

<@ with @{ :parent } @>
  <@ with @{ :parent } @>
    @{ title }
  <@ end @>
<@ end @>

Previous and Next Pages

Instead of a URL, it is also possible to use the keywords prev and next in order to change the context to the previous or next page in the current pagelist.

<@ newPagelist { type: 'siblings' } @>
<@ with prev @>
  <a href="@{ url }">Previous: @{ title }</a>
<@ end @>
<@ with next @>
  <a href="@{ url }">Next: @{ title }</a>
<@ end @>

Using Files

Passing a file path as argument allows for using the meta data and runtime variables of that file inside the statement. In case the file is an image, options for resizing and cropping can be passed as well. The file path can either be a full path or a glob pattern. When using glob patterns, the first match is used.

<@ with @{ imageLogo | def ('/shared/*logo*') } {
  width: 100,
  height: 100,
  crop: true
} @>
  <img
    src="@{ :fileResized }"
    alt="@{ :basename }"
    width="@{ :widthResized }"
    height="@{ :heightResized }"
  >
<@ else @>
  <# Use the sitename in case there is no logo. #>
  @{ sitename }
<@ end @>

Options

Runtime Variables