image-dialog

// src/components/elements/image-dialog/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/image-dialog
additionalProperties: false
type: object
required:
  - image
  - dialog_image
  - dialog_title
properties:
  image:
    $ref: /elements/image
  dialog_image:
    $ref: /elements/image
  dialog_title:
    type: string

// src/components/elements/image-dialog/mocks.yaml

image:
  $ref: elements/image
dialog_image:
  $ref: /elements/image#srcset-with-same-ratio
dialog_title: 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>