Sur cette page

• Exemple
  • Configuration
  • HTML généré

Générer des images responsives dans les templates

Le moyen le plus simple de générer des images responsives dans les templates est d’utiliser la fonction html :

{{ html(asset('image.jpg'), attributes={alt: 'Description alternative'}, options={responsive: true}) }}

Exemple

Voici un exemple avec une image PNG de 1000×1000 pixels :

{{ html(asset('cecil-logo-1000.png'), attributes={alt: 'Cecil logo'}, options={responsive: true}) }}

Configuration

assets:
  images:
    responsive:
      widths: [768, 1024]

HTML généré

Reformaté pour plus de lisibilité :

<img
  src="/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png"
  alt="Cecil logo"
  srcset="/thumbnails/768/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 768w,
          /cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 1000w"
  sizes="100vw"
  width="1000"
  height="1000"
>

Exemple en direct