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:

the configurations generated above must be imported via:
```
phab -cmbb drush cim
```
image's cache has to be cleaned via (press 1 when you are prompted to):
```
phab -cmbb drush 'image-flush --all'
```
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

Mocks

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 class="Image{% if rounded %} Image--rounded{% endif %}{% if classes %} {{ classes|join(' ') }}{% endif %}" 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 class="Image{% if rounded %} Image--rounded{% endif %}{% if classes %} {{ classes|join(' ') }}{% endif %}" 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 %}

Error: schema is invalid: data/properties must be object