Skip to main
Table of Contents

Image Variant

This page demonstrates generated image variants using filename markers and option.image.variant rules.

Source Files

  • asset/image/content/example/image-variant/demo-1024.variant-thumb.png
  • asset/image/content/example/image-variant/demo-1024.variant-card.png
  • asset/image/content/example/image-variant/demo-1024.variant-hero.png

Each source file name uses a *.variant-name.* marker so a dedicated pattern can target it.

Generated Variant Examples

Thumb Variant

Pattern marker: .variant-thumb., size: 256, suffix: .thumb

thumb variant output

Card Variant

Pattern marker: .variant-card., size: 512, suffix: .card

card variant output

Hero Variant

Pattern marker: .variant-hero., size: 1024, suffix: .hero

hero variant output

Configuration 

"option": {
  "image": {
    "variant": [
      {
        "pattern": "asset/image/content/example/image-variant/**/*.variant-thumb.{png,jpg,jpeg,webp}",
        "size": 256,
        "suffix": ".thumb"
      },
      {
        "pattern": "asset/image/content/example/image-variant/**/*.variant-card.{png,jpg,jpeg,webp}",
        "size": 512,
        "suffix": ".card"
      },
      {
        "pattern": "asset/image/content/example/image-variant/**/*.variant-hero.{png,jpg,jpeg,webp}",
        "size": 1024,
        "suffix": ".hero"
      }
    ]
  }
}