image-dialog

// src/components/elements/image-dialog/image-dialog.twig

{% set random_id = "image-dialog-" ~ random() %}
{% set dialog_content %}
	<div class="ImageDialog-content">
		{% include "@elements/image/image.twig" with {
			alt: dialog_image.alt,
			classes: dialog_image.classes,
			height: dialog_image.height,
			id: dialog_image.id,
			is_lazy: dialog_image.is_lazy,
			is_priority: dialog_image.is_priority,
			sources: dialog_image.sources,
			uri: dialog_image.uri,
			width: dialog_image.width,
		} only %}
	</div>
{% endset %}
<div class="ImageDialog">
	<button class="ImageDialog-button" data-dialog="{{ random_id }}" type="button">
		{% include "@elements/image/image.twig" with {
			alt: image.alt,
			classes: image.classes,
			height: image.height,
			id: image.id,
			is_lazy: image.is_lazy,
			is_priority: image.is_priority,
			sources: image.sources,
			uri: image.uri,
			width: image.width,
		} only %}
	</button>
	{% include "@elements/dialog/dialog.twig" with {
		close_label: "Close",
		content: dialog_content,
		id: random_id,
		title: dialog_title,
		hidden_title: true,
		full_size_mobile: true,
	} only %}
</div>