Overview
An image. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
Install via NPM
npm install @bolt/components-image
Image sizes
IMPORTANT: This method of adding classes to images is DEPRECATED.
To specify image size (e.g u-bolt-width-1/1) pass the correct class like so:
{% set classes = create_attribute(imageAttributes | default({})).addClass([
"c-bolt-image__img",
"u-bolt-width-1/1",
])
%}
Then pass it into the component:
{% include '@bolt-components-image/image.twig' with {
src: "/images/placeholders/tout-4x3-climber.jpg",
alt: "A Rock Climber",
imageAttributes: classes,
} only %}
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) |
|---|---|---|---|---|
|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
|
Source url for image. |
string
| — |
|
|
|
Alt tag for image. |
string
| — |
|
|
|
Lazyload can boost performance by loading images on demand, instead of on initial page load. |
boolean
|
true
|
|
|
|
Override the default lazyload behavior. Used only on the web component, where the presence of a boolean property always equates to |
boolean
|
false
|
|
|
|
A valid CSS background color property shown while image loads. |
string
|
hsl(233, 33%, 97%)
|
|
|
|
Image path or image data shown while image loads. |
string
|
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
|
|
|
|
A comma seperated string of image urls and image widths, used for optimizing image loading performance. |
string
| — |
|
|
|
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
|
|
|
|
Use the |
boolean
|
true
|
|
|
|
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
|
|
|
|
Set the max-width of the image as a valid CSS value, e.g. "300px" or "50%". |
string
| — |
|
|
|
Override the default width of the image. If no height is provided, aspect ratio will be maintained. |
number , string |
— |
|
|
|
Override the default height of the image. If no width is provided, aspect ratio will be maintained. |
number , string |
— |
|
|
|
Set an image to fill its container. |
boolean
|
false
|
|
|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
|
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
|
|
