Image

A responsive image embed.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
{% include '@bolt-elements-image/image.twig' with {
  fill: true,
  attributes: {
    alt: 'Image alt text',
    src: 'path/image.jpg',
    width: 500,
    height: 500,
  },
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this element.

object
fill

Render the image 100% wide, filling up the full width of its parent container.

boolean
background

Render the image as a background image. This sets the image to be absolute positioned, only use this prop if the image is inside a non-static container.

boolean
Install Install
npm install @bolt/elements-image
Dependencies @bolt/core-v3.x