vendor/shopware/storefront/Resources/views/storefront/element/cms-element-image.html.twig line 1

Open in your IDE?
  1. {% block element_image %}
  2. {% set config = element.fieldConfig.elements %}
  4. <div class="cms-element-{{ element.type }}{% if config.verticalAlign.value %} has-vertical-alignment{% endif %}">
  5. {% block element_product_slider_alignment %}
  6. {% if config.verticalAlign.value %}
  7. <div class="cms-element-alignment{% if config.verticalAlign.value == "center" %} align-self-center{% elseif config.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  8. {% endif %}
  9. {% block element_image_inner %}
  10. {% set imageElement %}
  11. {% block element_image_container %}
  12. {% if element.data.media.url %}
  13. <div class="cms-image-container is-{{ element.translated.config.displayMode.value }}"
  14. {% if element.translated.config.minHeight.value and element.translated.config.displayMode.value == "cover" %} style="min-height: {{ element.translated.config.minHeight.value }};"{% endif %}>
  15. {% block element_image_media %}
  16. {% set attributes = {
  17. 'class': 'cms-image',
  18. 'alt': (element.data.media.translated.alt ?: ''),
  19. 'title': (element.data.media.translated.title ?: '')
  20. } %}
  22. {% if element.translated.config.displayMode.value == 'cover' or element.translated.config.displayMode.value == 'contain' %}
  23. {% set attributes = attributes|merge({ 'data-object-fit': element.translated.config.displayMode.value }) %}
  24. {% endif %}
  26. {% sw_thumbnails 'cms-image-thumbnails' with {
  27. media: element.data.media
  28. } %}
  29. {% endblock %}
  30. </div>
  31. {% endif %}
  32. {% endblock %}
  33. {% endset %}
  35. {% if element.translated.config.url.value %}
  36. <a href="{{ element.translated.config.url.value }}"
  37. class="cms-image-link"
  38. {% if element.translated.config.newTab.value %}target="_blank" rel="noopener"{% endif %}>
  39. {{ imageElement }}
  40. </a>
  41. {% else %}
  42. {{ imageElement }}
  43. {% endif %}
  44. {% endblock %}
  45. {% if config.verticalAlign.value %}
  46. </div>
  47. {% endif %}
  48. {% endblock %}
  49. </div>
  50. {% endblock %}