Macros

Macros are templating rules that render a bigger chunk of HTML code (eventually featuring some complex logic). Macros are injected by using the following syntax:

{{@macroName(key=value, key2=value2)}}

Image

The image macro can be used to render images. This macro accepts the following parameters:

  • property - the property to be rendered as image (has to be first argument),

  • lazyload - whether to lazyload the image (default: true),

  • className - the class name of the image,

  • maxWidth - the max width of the image, the appropriately sized image will be loaded resulting in decreased data consumption.

For example the following image macro will render the featuredImage property as image with the attribute class="featured__image" while disabling the lazyloading and stating that the image won't be wider than 250px:

{{@image(featuredImage, maxWidth=250, className=featured__image, lazyload=false)}}

Pagination

The pagination macro can be used on the homepage/category pages to render the pagination. This macro does not accept any parameters.

{{@pagination()}}

To style a pagination, you can use the following classes:

  • .ph-pagination - the wrapping node

  • .ph-pagination__menu - a node wrapping all pagination entries

  • .ph-pagination__item - a pagination entry

  • .ph-pagination__item--active - an active pagination entry

  • .ph-pagination__item--spacer - an empty pagination entry

  • .ph-pagination__link - a pagination link

  • .ph-pagination__link--active - an active pagination link

  • .ph-pagination__arrow - a pagination arrow

  • .ph-pagination__arrow--prev - arrow left

  • .ph-pagination__arrow--next - arrow right

Component

The component macro can be used to render custom components. Receives a single parameter - the component name.

{{@component(my_image)}}