vendor/shopware/storefront/Resources/views/storefront/utilities/thumbnail.html.twig line 1

Open in your IDE?
  1. {# activate load per default. If it is not activated only a data-src is set instead of the src tag. #}
  2. {% if load is not defined %}
  3.     {% set load = true %}
  4. {% endif %}
  5. {# uses cms block column count and all available thumbnails to determine the correct image size for the current viewport #}
  6. {% if media.thumbnails|length > 0 %}
  7.     {% if columns and sizes is not defined %}
  8.         {# set image size for every viewport #}
  9.         {% set sizes = {
  10.             'xs': (shopware.theme.breakpoint.sm - 1) ~'px',
  11.             'sm': (shopware.theme.breakpoint.md - 1) ~'px',
  12.             'md': ((shopware.theme.breakpoint.lg - 1) / columns)|round(0, 'ceil') ~'px',
  13.             'lg': ((shopware.theme.breakpoint.xl - 1) / columns)|round(0, 'ceil') ~'px'
  14.         } %}
  15.         {# set image size for largest viewport depending on the cms block sizing mode (boxed or full-width) #}
  16.         {% if layout == 'full-width' %}
  17.             {% set container = 100 %}
  18.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'vw'}) %}
  19.         {% else %}
  20.             {% set container = 1360 %}
  21.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'px'}) %}
  22.         {% endif %}
  23.     {% endif %}
  24.     {% set thumbnails = media.thumbnails|sort|reverse %}
  25.     {# generate srcset with all available thumbnails #}
  26.     {% set srcsetValue %}{% apply spaceless %}
  27.         {{ media|sw_encode_media_url }} {{ thumbnails|first.width + 1 }}w, {% for thumbnail in thumbnails %}{{ thumbnail.url | sw_encode_url }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
  28.     {% endapply %}{% endset %}
  29.     {# generate sizes #}
  30.     {% set sizesValue %}{% apply spaceless %}
  31.         {% set sizeFallback = 100 %}
  32.         {# set largest size depending on column count of cms block #}
  33.         {% if columns %}
  34.             {% set sizeFallback = (sizeFallback / columns)|round(0, 'ceil') %}
  35.         {% endif %}
  36.         {% if thumbnails|first.width > shopware.theme.breakpoint|reverse|first %}
  37.             {% set maxWidth = thumbnails|first.width %}
  38.         {% endif %}
  39.         {% for key, value in shopware.theme.breakpoint|reverse %}{% if maxWidth %}(max-width: {{ maxWidth }}px) and {% endif %}(min-width: {{ value }}px) {{ sizes[key] }}{% set maxWidth = value-1 %}{% if not loop.last %}, {% endif %}{% endfor %}, {{ sizeFallback }}vw
  40.     {% endapply %}{% endset %}
  41. {% endif %}
  42. <img {% if load %}src="{{ media|sw_encode_media_url }}" {% else %}data-src="{{ media|sw_encode_media_url }}" {% endif %}
  43.     {% if media.thumbnails|length > 0 %}
  44.         {% if load %}srcset="{{ srcsetValue }}" {% else %}data-srcset="{{ srcsetValue }}" {% endif %}
  45.         {% if sizes['default'] %}
  46.         sizes="{{ sizes['default'] }}"
  47.         {% elseif sizes|length > 0 %}
  48.         sizes="{{ sizesValue }}"
  49.         {% endif %}
  50.     {% endif %}
  51.     {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
  52. />