Dialog is only supported in Safari 15.4 and newer. Use Modal component instead if you need to support older browsers.
Image Dialog
Dialog can be used to display just an image or an image with text caption.
Important Notes:When building an image only dialog, set spacing prop to none and transparent prop to true.When building an image dialog with caption, use the footer for the caption text.If width and height are defined on the image, set the dialog’s width prop to auto. This allows the dialog to be as big as the image size.
Demo
Twig
{# Image only dialog #}
{% set image_dialog_content %}
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
src: '/images/placeholders/16x9.jpg',
alt: 'Alt text.',
loading: 'lazy',
width: 640,
height: 480,
}
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: image,
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: image_dialog_content,
spacing: 'none',
width: 'auto',
transparent: true,
attributes: {
id: 'dialog-image'
},
} only %}
{# Image + caption dialog #}
{% set caption_dialog_content %}
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
src: '/images/placeholders/16x9.jpg',
alt: 'Alt text.',
loading: 'lazy',
width: 640,
height: 480,
}
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog-body.twig' with {
content: image,
} only %}
{% include '@bolt-components-dialog/dialog-footer.twig' with {
content: 'This is the image caption.',
} only %}
{% endset %}
{% include '@bolt-components-dialog/dialog.twig' with {
content: caption_dialog_content,
spacing: 'small',
width: 'auto',
attributes: {
id: 'dialog-caption'
},
} only %}