Ratio

A small helper-component that displays image or video children at a specific aspect ratio.

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-ratio/ratio.twig' with {
  children: '<img src="https://via.placeholder.com/350x150">',
  ratio: '350/150',
  attributes: {
    style: [
      'max-width: 400px;',
      'margin: 0 auto;',
    ]
  }
} 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 attributes object. Used to apply with extra HTML attributes to the outer <bolt-ratio> tag.

object
children

Nested content to nest inside the <bolt-ratio> component when used in a Twig template.

string , object , array
ratio

Set the aspect ratio for the ratio object via slash-separated width and height values, e.g. 4/3, 16/9, 1/1, etc.

string
aspectRatioWidth
(deprecated)

Twig-specific prop for setting the width portion of the component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead.

number
aspect-ratio-width
(deprecated)

Web component-specific prop for setting the width portion of the bolt-ratio web component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead.

number
aspectRatioHeight
(deprecated)

Twig-specific prop for setting the height portion of the component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead.

number
aspect-ratio-height
(deprecated)

Web component-specific prop for setting the height portion of the bolt-ratio web component's aspect ratio. Will be removed in Bolt v3.0. Use the simpler ratio prop instead.

number
Advanced Schema Options
no_css_vars

Manually disables CSS Variable-based rendering for <bolt-ratio> in Twig templates. Useful for testing cross browser functionality. By default this is automatically enabled / disabled based on browser support for CSS Vars.

boolean
no-css-vars

Manually disables CSS Variable-based rendering on the <bolt-ratio> custom element. Useful for testing cross browser functionality. By default this is automatically enabled / disabled based on browser support for CSS Vars.

boolean
no_shadow

Manually disables the component from rendering to the Shadow DOM in a Twig template. Useful for testing cross browser functionality / rendering behavior. By default this is enabled / disabled based on browser support.

boolean
no-shadow

Manually disables the web component from rendering to the Shadow DOM. Useful for testing cross browser functionality / rendering behavior. By default this is enabled / disabled based on browser support.

boolean
Install Install
npm install @bolt/components-ratio
Dependencies @bolt/core-v3.x @bolt/element @bolt/lazy-queue