assets.md

Assets

Place static assets required for build inside the assets directory.

Reference images & other assets from the assets directory in Twig templates using asset():

{{ asset(article.thumbnail) }}

Contents' images

Place content's images inside the content/images directory.

Resize images

You can resize an image using a preset defined in config/packages/glide.yaml:

{{ article.thumbnail|glide_image_preset('article_thumbnail') }}

or with arbitrary options:

{{ article.thumbnail|glide_image_resize({
    w: 80,
    h: 60,
}) }}

See Glide's documentation for available options.

In order to automatically generate images for retina screens (dpr x2), you can either:

• use the backgroundImageSrcset macro in Twig for background images:

  {% import "macros.html.twig" as macros %}
  
  <div class="article-banner__cover" style="{{ macros.backgroundImageSrcset(article.thumbnail, 'article_banner') }}"></div>

• or the imageSrcset macro in Twig for <img /> tags:

  {% import "macros.html.twig" as macros %}
  
  <img {{ macros.imageSrcset(article.thumbnail, 'article_banner') }} />