Peak comes with a picture partial that will add responsive sourcesets to your images. The variants generated are defined in config/statamic/assets.php and cover most use cases. In resources/views/components/_figure.antlers.html you can see an example of how to include the picture partial. It accepts the following arguments:

  • image: asset, the actual image variable.
  • class: string, optional css classes that should be applied to the image.
  • cover: boolean, true means the image should cover the containing element.
  • sizes: string, the sizes attribute that informs the browser how the image should be rendered.

The following example renders an image and object-fills it's wrapping container:

{{ partial:components/picture :image="image" cover="true" sizes="(min-width: 768px) 35vw, 90vw" }}

See this articleopen in new window for more information. Although it was written for Statamic V2, the concept of the partial remains te same. Some of the settings described in the article (like the preset definition) is replaced in V3.

Note: alternatively you could use the fantastic Responsive Images Addonopen in new window by Riasopen in new window from Spatie. It features more asset presets and uses Javascript to auto populate your sizes attribute.

Background images

Peak comes with a background image snippet you can use to apply responsive images (WebP included) to an elements background. Just use

{{ partial:snippets/background_image image="YOUR_IMAGE" class="CLASS_OF_ELEMENT_THAT_NEEDS_BG_IMAGE" }}

The predefined sizes used in resources/views/snippets/_background_image.antlers.html are defined in config/statamic/assets.php.

Note: You can use either a hardcoded image or an image from an asset field.