image

// src/components/patterns/image/schema.yaml

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

// src/components/patterns/image/mocks.yaml

image:
  $ref: elements/image
$variants:
  - $name: with dialog
    dialog: true
    dialog_title: Image dialog title
    dialog_image:
      $ref: /elements/image#srcset-with-same-ratio

// src/components/patterns/image/image.twig

<div class="Image">
	{% if dialog %}
		{% include "@elements/image-dialog/image-dialog.twig" with {
			dialog_image: dialog_image,
			dialog_title: dialog_title,
			image: image,
		} only %}
	{% else %}
		{% 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 %}
	{% endif %}
</div>