2.6.0-beta.1

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

lazysizes

patch-package

postinstall-postinstall

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)
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` or `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` or `string`	—	—
height	Override the default height of the image. If no width is provided, aspect ratio will be maintained.	`number` or `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`	—