image

Image Styles

Whenever Drupal needs to provide an image in specific dimenions, FE needs to provide an image style.

Create a file in /.tools/es/responsive_image and define the height and width of the image for each breakpoint. Afterwards run phab scaffold .tools/es/index.yml to create the image styles. They are getting created in /config/sync. Don't forget to commit them and let the BE devs know what the relevant file is.

To see the changes locally:

  1. the configurations generated above must be imported via:
    phab -cmbb drush cim
  2. image's cache has to be cleaned via (press 1 when you are prompted to):
    phab -cmbb drush 'image-flush --all'
  3. clean cache via:
    phab -cmbb drush cr

Troubleshooting:

If you get any php errors during running phab scaffold .tools/es/index.yml you might need to update the scaffolder via composer update factorial-io/phab-entity-scaffolder

Information

Folder
src/components/elements/image

Files

Schema 
// src/components/elements/image/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/image
additionalProperties: false
type: object
required:
  - uri
  - width
  - height
  - alt
properties:
  uri:
    type: string
    format: uri-reference
  width:
    type: number
  height:
    type: number
  alt:
    type: string
  sources:
    type: array
    items:
      type: object
      properties:
        srcset:
          type: string
        media:
          type: string
        size:
          type: string
          enum:
            - xs
            - sm
            - md
            - lg
            - xl
        width:
          type: number
        height:
          type: number
      required:
        - srcset
        - media
        - size
        - width
        - height
  classes:
    type: array
    items:
      type: string
  is_lazy:
    type: boolean
Mocks 
// src/components/elements/image/mocks.yaml

uri: https://via.placeholder.com/320x240
height: 240
width: 320
alt: Sample alt text
$variants:
  - $name: src with lazy
    is_lazy: true
  - $name: srcset with same ratio
    uri: https://via.placeholder.com/320x240
    alt: alt text
    sources:
      - srcset: https://via.placeholder.com/2000x1504
        media: '(min-width: 90em)'
        size: xl
        height: 1920
        width: 2560
      - srcset: https://via.placeholder.com/1440x1080
        media: '(min-width: 64em) and (max-width: 89.9375em)'
        size: lg
        height: 1080
        width: 1440
      - srcset: https://via.placeholder.com/1024x768
        media: '(min-width: 48em) and (max-width: 63.9375em)'
        size: md
        height: 768
        width: 1024
      - srcset: https://via.placeholder.com/768x576
        media: '(min-width: 35.625em) and (max-width: 47.9375em)'
        size: sm
        height: 576
        width: 768
      - srcset: https://via.placeholder.com/570x427
        media: '(max-width: 35.5625em)'
        size: xs
        height: 427
        width: 570
  - $name: srcset with different ratio
    uri: https://via.placeholder.com/320x240
    alt: alt text
    sources:
      - srcset: https://via.placeholder.com/2560x120
        media: '(min-width: 90em)'
        size: xl
        height: 120
        width: 2560
      - srcset: https://via.placeholder.com/1440x1080
        media: '(min-width: 64em) and (max-width: 89.9375em)'
        size: lg
        height: 1080
        width: 1440
      - srcset: https://via.placeholder.com/1024x768
        media: '(min-width: 48em) and (max-width: 63.9375em)'
        size: md
        height: 768
        width: 1024
      - srcset: https://via.placeholder.com/576x768
        media: '(min-width: 35.625em) and (max-width: 47.9375em)'
        size: sm
        height: 768
        width: 576
      - srcset: https://via.placeholder.com/427x570
        media: '(max-width: 35.5625em)'
        size: xs
        height: 570
        width: 427
  - $name: srcset with lazy loading
    is_lazy: true
    uri: https://via.placeholder.com/320x240
    alt: alt text
    sources:
      - srcset: https://via.placeholder.com/2560x1920
        media: '(min-width: 90em)'
        size: xl
        height: 1920
        width: 2560
      - srcset: https://via.placeholder.com/1440x1080
        media: '(min-width: 64em) and (max-width: 89.9375em)'
        size: lg
        height: 1080
        width: 1440
      - srcset: https://via.placeholder.com/1024x768
        media: '(min-width: 48em) and (max-width: 63.9375em)'
        size: md
        height: 768
        width: 1024
      - srcset: https://via.placeholder.com/576x768
        media: '(min-width: 35.625em) and (max-width: 47.9375em)'
        size: sm
        height: 768
        width: 576
      - srcset: https://via.placeholder.com/427x570
        media: '(max-width: 35.5625em)'
        size: xs
        height: 570
        width: 427
Template 
// src/components/elements/image/image.twig

{% if sources and sources is not empty %}
	<picture>
		{% for source in sources %}
			<source
				{% if source.type %}
					type="{{ source.type }}"
				{% endif %}
				{% if source.media %}
					media="{{ source.media }}"
				{% endif %}
				{% if source.width %}
					width="{{ source.width }}"
				{% endif %}
				{% if source.height %}
					height="{{ source.height }}"
				{% endif %}
				srcset="{{ source.srcset }}"
			>
		{% endfor %}
		<img
			src="{{ uri }}"
			alt="{{ alt }}"
			{% if alt == "" %}
				aria-hidden="true"
			{% endif %}
			{% if width %}
				width="{{ width }}"
			{% endif %}
			{% if height %}
				height="{{ height }}"
			{% endif %}
			{% if is_lazy %}
				loading="lazy"
				decoding="async"
			{% elseif is_priority %}
				fetchpriority="high"
			{% endif %}
		>
	</picture>
{% else %}
	<img
		src="{{ uri }}"
		alt="{{ alt }}"
		{% if alt == "" %}
			aria-hidden="true"
		{% endif %}
		{% if width %}
			width="{{ width }}"
		{% endif %}
		{% if height %}
			height="{{ height }}"
		{% endif %}
		{% if is_lazy %}
			loading="lazy"
			decoding="async"
		{% elseif is_priority %}
			fetchpriority="high"
		{% endif %}
	>
{% endif %}

Variants

default
Open
Sample alt text
src with lazy
Open
Sample alt text
srcset with same ratio
Open
alt text
srcset with different ratio
Open
alt text
srcset with lazy loading
Open
alt text