{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Alt text.',
src: 'https://via.placeholder.com/400x300',
width: 400,
height: 300,
},
} only %}
{% endset %}
{% include '@bolt-elements-ratio/ratio.twig' with {
content: image,
ratio: 'wide',
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal-style attributes object with extra attributes to append to this element. |
object
| — |
|
content
|
A nested element with proportions defined through ratio property. It can be for example image or video. |
any
| — |
|
ratio
|
An aspect ratio between the width and height. Expressed as width divided by height. You can choose from: standard(4/3), square(1/1), wide(16/9). Custom aspect ratio can be set via the CSS custom property |
string
|
standard
|
|
npm install @bolt/elements-ratio
width / height
. To measure the aspect ratio of an image or video, divide the width by the height. For example, an image or video that is 400x300 pixels and one that is 260x195 pixels have the same ratio 4/3 (standard).
ratio
prop is set to standard. The aspect ratio is 4/3.ratio
prop is set to square. The aspect ratio is 1/1.ratio
prop is set to wide. The aspect ratio is 16/9.ratio
prop is set with --e-bolt-aspect-ratio
via inline CSS style. The aspect ratio is 7/3.{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Alt text.',
src: 'https://via.placeholder.com/400x300',
width: 200,
height: 200,
},
} only %}
{% endset %}
{% include '@bolt-elements-ratio/ratio.twig' with {
content: image,
ratio: 'square',
} only %}
<div class="e-bolt-ratio e-bolt-ratio--square">
<!-- image or video goes here -->
</div>
{% set video %}
<video-js
data-account="1900410236"
data-player="O3FkeBiaDz"
data-embed="default"
data-video-id="6236693947001"
data-media-duration
data-media-title
controls
class="c-base-video"></video-js>
{% endset %}
{% include '@bolt-elements-ratio/ratio.twig' with {
content: video,
ratio: 'wide',
} only %}
<div class="e-bolt-ratio e-bolt-ratio--wide">
<video-js
data-account="1900410236"
data-player="O3FkeBiaDz"
data-embed="default"
data-video-id="6236693947001"
data-media-duration
data-media-title
controls
class="c-base-video"></video-js>
</div>
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
alt: 'Alt text.',
src: 'https://via.placeholder.com/400x250',
width: 400,
height: 250,
style: '--e-bolt-image-position: top right',
},
} only %}
{% endset %}
{% include '@bolt-elements-ratio/ratio.twig' with {
content: image,
ratio: 'square',
} only %}
<div class="e-bolt-ratio e-bolt-ratio--square">
<img src="https://via.placeholder.com/400x250" width=400 height=250 class="e-bolt-image" alt="" style="--e-bolt-image-position: top right">
</div>