2.14.0Image
Image Component in Bolt
Published
- History
-
View changes - Install
-
yarn add @bolt/components-image - Source code
-
View on Github - Dependencies
-
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
|
|
640x480 jpg
500x500 jpg
1151x638 jpg
1151x638 jpeg
2712x2300 png
3000x5336 jpeg
124x33 svg
Src: Root Relative
src: "/images/placeholders/image.jpg",Src: Source Set
srcset: "/images/placeholders/500x500-200.jpg 200w,/images/placeholders/500x500-320.jpg 320w",Src only that won't be found in bolt.data.images
Src only that won't be found in bolt.data.images and not lazy loaded
Src and srcset that won't be found in bolt.data.images
Absolute src - not lazy loaded
Absolute src - lazy loaded
Jpg: Lazyload true
Jpg: Lazyload false
Png: Lazyload true
Png: Lazyload false
Svg: Lazyload: true
Svg: Lazyload: false
Custom Height and Width, JPEG (2:1)
Custom Height and Width, PNG (2:1)
Custom Height and Width, SVG (10:1)
Custom Max-Width, JPG (200px)
Image Zoom
When used with the device viewer component, the image component can used to create a "zoomed" state (`magnify` must be set to `true` on the device viewer).
