Images

Include media component "include @components/base/media/media.twig" to insert image or video.
Params :


{
  images: Array
  [
    {
        src: String,
        alt: String,
    }
    ..
  ],
  video: {
    options: {
      loop: Bool, default -> true,
      muted: Bool, default -> true,
      playsinline: Bool, default -> true,
      autoplay: Bool, default -> true,
      controls: Bool, default -> false,
    },
    sources: Array
    [
      src: String,
      srcset: String,
      sizes: String,
      height: String,
      width: String,
      type: String,
    ],
  }
}

Single image


include "@components/base/media/media.twig" with {
  images: [
    {
      src: 'media/images/mountains-01.jpg',
      alt: 'test image'
    }
  ]
}

Art direction image (with <picture/>)

Resize windows to see it in action


include "@components/base/media/media.twig" with {
  images: [
    {
      src: 'media/images/mountains-01.jpg',
      alt: 'test image'
    }, {
      src: 'media/images/mountains-02.jpg',
      alt: 'test image'
    }
  ]
}

Video


include "@components/base/media/media.twig" with {
  video: {
    options: {
      controls: true,
      autoplay: false,
    },
    sources: [
      {
        src: 'media/video/mountains.mp4',
        type: 'mp4'
      }, {
        src: 'media/video/mountains.webm',
        type: 'webm'
      },
    ]
  }
}