templates/default/components/atoms/image/image.html.twig line 1

Open in your IDE?
  1. {# Make the component not only compatible with Storyblok "Image (old)" type but also with the newer "Asset" type: #}
  2. {% if src is defined and src.filename is defined %}
  3. {% set asset = src %}
  4. {% set srcFocus = src.focus %}
  5. {% set src = src.filename %}
  6. {% endif %}
  8. {% if static|default(null) or not ('//' in src|default) %}
  9. <picture class="image">
  10. <img src="{{ src|default }}" alt="{{ alt|default(asset.alt|default) }}" class="image__src {{ class|default }}" {{ attributes|default([])|getAttributes }}>
  11. </picture>
  12. {% else %}
  13. <image-wrapper
  14. base-url="{{ imageservice }}"
  15. src-url="{{ src|default }}"
  16. css-class="{{ class|default }}"
  17. alt="{{ alt|default }}"
  18. attributes="{{ attributes|default([])|json_encode }}"
  19. {% if lazyload is defined and lazyload == false %} no-lazy-load{% endif %}
  20. {% if resize is defined and resize == false %} no-resize{% endif %}
  21. object-fit="{{ objectFit|default('width') }}"
  22. focus="{{ srcFocus|default }}"
  23. :width="{{ width|default('null') }}"
  24. :height="{{ height|default('null') }}"
  25. >
  26. </image-wrapper>
  28. {% if imageSimilar|default(false) %}
  29. <span class="imagesimilar">
  30. {{ "product_image_similar"|trans }}
  31. </span>
  32. {% endif %}
  34. <noscript>
  35. <picture>
  36. <img src="{{ src|default }}" alt="{{ alt|default }}" class="image__src {{ class|default }}">
  37. </picture>
  38. </noscript>
  39. {% endif %}