2.24.0

Image

Image Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-image
Source code
View on Github
Dependencies
@bolt/components-ratio @bolt/core-v3.x @bolt/element @bolt/lazy-queue lazysizes

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 %}
Overview Usage Schema Edit this page Testing Steps

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
  • true or false
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
  • true or 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

Use the ratio prop instead.

 boolean true
  • true or false
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

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

 number , string —
  • —
height

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

 number , string —
  • —
cover

Set an image to fill its container.

 boolean false
  • true or false
imageAttributes

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
  • —
Debug Panel