Image

A container for displaying responsive image.

Published Last updated: 5.5.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-image/image.twig' with {
  src: '/src/images/turtle.jpg',
  alt: 'A Turtle'
} 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 component.

object
src

Source url for image.

string
alt

Alt tag for image.

string
lazyload

Lazyload can boost performance by loading images on demand, instead of on initial page load.

boolean true
no_lazy

Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to true.

boolean false
placeholder_color

A valid CSS background color property shown while image loads.

string hsl(233, 33%, 97%)
placeholder_image

Image path or image data shown while image loads.

string data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
srcset

A comma seperated string of image urls and image widths, used for optimizing image loading performance.

string
sizes

A list of one or more strings separated by commas indicating a set of source sizes. Each source size consists of a media condition omitted for the last item), and a source size value. Learn more.

string auto
useAspectRatio
(deprecated)

Use the ratio prop instead.

boolean true
ratio

Set the aspect ratio for the image via slash-separated width and height values, e.g. 4/3. Currently required for aspect ratio to be applied properly. Set to 'none' to opt out of aspect ratio.

string , boolean auto
max_width

Set the max-width of the image as a valid CSS value, e.g. '300px' or '50%'.

string
valign

Allows the image's vertical alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (top | center | bottom) or via specific pixel or percent offset (ex. 30%).

string center
align

Allows the image's horizontal alignment behavior to be customized in certain situations (ex. background images). This can be configured via a pre-defined position (left | center | right) or via specific pixel or percent offset (ex. 30%).

string center
cover

Set an image to fill its container.

boolean false
width
(deprecated)

Override the default width of the image. If no height is provided, aspect ratio will be maintained.

height
(deprecated)

Override the default height of the image. If no width is provided, aspect ratio will be maintained.

imageAttributes
(deprecated)

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

object
Advanced Schema Options
zoom
(deprecated)

Support will be dropped along with device viewer magnify

boolean false
Install Install
npm install @bolt/components-image
Dependencies @bolt/components-ratio @bolt/core-v3.x @bolt/element @bolt/lazy-queue lazysizes