Image
A container for displaying responsive image.
{% include '@bolt-components-image/image.twig' with {
src: "/src/images/turtle.jpg",
alt: "A Turtle"
} only %}
| 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 |
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 |
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
| — |
|
|
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. |
|
— |
|
|
cover
|
Set an image to fill its container. |
boolean
|
false
|
|
|
imageAttributes
(deprecated) |
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
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
|
|
npm install @bolt/components-image
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)
