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
1when 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"
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"
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 %}