Image

Getting Started

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

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

Name	Type	Value(s)	Description	Default
src	`string`		Source url for image.	N/A
alt	`string`		Alt tag for image.	N/A
lazyload	`boolean`	`TRUE` OR `FALSE`	Lazyload can boost performance by loading images on demand, instead of on initial page load.	`true`
srcset	`string`		A comma seperated string of image urls and image widths, used for optimizing image loading performance.	N/A
sizes	`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.	`auto`
useAspectRatio	`boolean`	`TRUE` OR `FALSE`	Use the ratio wrapper around the image to maintain a specific image ratio. This ratio is either determined from the image, or by passing in `height` and `width` arguements.	`true`
width	`number` OR `string`		Override the default width of the image. If no height is provided, aspect ratio will be maintained.	N/A
height	`number` OR `string`		Override the default height of the image. If no width is provided, aspect ratio will be maintained.	N/A

Edit this page

640x480 jpg

500x500 jpg

,

1151x638 jpg

1151x638 jpeg

2712x2300 png

3000x5336 jpeg

124x33 svg

Src: Root Relative

src: "/pattern-lab/images/placeholders/image.jpg",

Src: Source Set

srcset: "/pattern-lab/images/placeholders/500x500-200.jpg 200w,/pattern-lab/images/placeholders/500x500-480.jpg 480w",

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`

Srcset only that won't be found in `bolt.data.images` and not lazy loaded

Srcset only that won't be found in `bolt.data.images` and lazy loaded

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)

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).