custom/plugins/NextagTheme/src/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 %}
  6. {# By default no original image will be loaded as soon as thumbnails are available. #}
  7. {# When set to true the orginal image will be loaded when the viewport is greater than the largest available thumbnail. #}
  8. {% if loadOriginalImage is not defined %}
  9.     {% set loadOriginalImage = false %}
  10. {% endif %}
  12. {# By default the srcset sizes will be calculated automatically if `columns` are present and no `sizes` are configured. #}
  13. {# When set to false the sizes attribute will not be generated automatically. #}
  14. {% if autoColumnSizes %}
  15.     {% set autoColumnSizes = true %}
  16. {% endif %}
  18. {% if attributes is not defined %}
  19.     {% set attributes = {} %}
  20. {% endif %}
  22. {% if attributes == null %}
  23.     {% set attributes = { 'loading': 'lazy' } %}
  24. {% else %}
  25.     {% if loadingLazy is not defined %}
  26.         {% set attributes = attributes|merge({ 'loading': 'lazy' }) %}
  27.     {% endif %}
  28. {% endif %}
  30. {% if attributes.alt is not defined and media.translated.alt is defined %}
  31.     {% set attributes = attributes|merge({'alt': media.translated.alt}) %}
  32. {% endif %}
  34. {% if attributes.title is not defined and media.translated.title is defined %}
  35.     {% set attributes = attributes|merge({'title': media.translated.title}) %}
  36. {% endif %}
  38. {# uses cms block column count and all available thumbnails to determine the correct image size for the current viewport #}
  39. {% if media.thumbnails|length > 0 %}
  40.     {% if autoColumnSizes is not defined and columns is defined and sizes is not defined %}
  41.         {# set image size for every viewport #}
  42.         {% set sizes = {
  43.             'xs': (theme_config('breakpoint-sm') - 1) ~'px',
  44.             'sm': (theme_config('breakpoint-md')- 1) ~'px',
  45.             'md': (theme_config('breakpoint-lg') - 1) ~'px',
  46.             'lg': (theme_config('breakpoint-xl') - 1) ~'px'
  47.         } %}      
  49.         {# set image size for largest viewport depending on the cms block sizing mode (boxed or full-width) #}
  50.         {% if layout == 'full-width' %}
  51.             {% set container = 100 %}
  52.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'vw'}) %}
  53.         {% else %}
  54.             {% set container = 489 %}
  55.             {% set sizes = sizes|merge({ 'sm': (container)|round(0, 'ceil') ~'px'}) %}
  56.             {% set container = 681 %}
  57.             {% set sizes = sizes|merge({ 'md': (container)|round(0, 'ceil') ~'px'}) %}
  58.             {% set container = 749 - 30 %}
  59.             {% set sizes = sizes|merge({ 'lg': (container / columns)|round(0, 'ceil') ~'px'}) %}
  60.             {% set container = 1136 - 30 %}
  61.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'px'}) %}
  62.         {% endif %}
  63.     
  64.     {% elseif layout == "product-single" %}
  66.         {# set image size for every viewport #}
  67.         {% set sizes = {
  68.             'xs': '90px',
  69.             'sm': '90px',
  70.             'md': '200px',
  71.             'lg': '200px',
  72.             'xl': '200px'
  73.         } %}
  75.     {% endif %}
  76.     
  77.     {% set thumbnails = media.thumbnails|sort|reverse %}
  79.     {# generate srcset with all available thumbnails #}
  80.     {% if layout == "product-single" %}
  81.         {% set srcsetValue %}{% apply spaceless %}
  82.             {% for thumbnail in thumbnails %}
  83.                 {{ thumbnail.url | sw_encode_url }} 
  84.                 {% if thumbnail.width == 1172 %}
  85.                     1172w
  86.                     {% if not loop.last %}, {% endif %}
  87.                 {% elseif thumbnail.width == 744 %}
  88.                     744w
  89.                     {% if not loop.last %}, {% endif %}
  90.                 {% elseif thumbnail.width == 586 %}
  91.                     586w
  92.                     {% if not loop.last %}, {% endif %}
  93.                 {% elseif thumbnail.width == 480 %}
  94.                     480w
  95.                     {% if not loop.last %}, {% endif %}
  96.                 {% elseif thumbnail.width == 372 %}
  97.                     372w
  98.                     {% if not loop.last %}, {% endif %}
  99.                 {% elseif thumbnail.width == 240 %}
  100.                     240w
  101.                     {% if not loop.last %}, {% endif %}
  102.                 {% elseif thumbnail.width == 170 %}
  103.                     170w
  104.                     {% if not loop.last %}, {% endif %}
  105.                 {% else %}
  106.                     {% if not loop.last %}, {% endif %}
  107.                 {% endif %}
  108.             {% endfor %}
  109.         {% endapply %}{% endset %}
  110.     {% else %}
  111.         {% set srcsetValue %}{% apply spaceless %}
  112.             {# {{ 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 %} #}
  113.             {% for thumbnail in thumbnails %}{{ thumbnail.url | sw_encode_url }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
  114.         {% endapply %}{% endset %}
  115.     {% endif %}
  117.     {# generate sizes #}
  118.     {% set sizesValue %}{% apply spaceless %}
  119.             {% if layout == "product-single" %}
  120.                 {% set sizeFallback = "240px" %}
  121.             {% else %}
  122.                 {% set sizeFallback = "calc(100vw - 30px)" %}
  123.             {% endif %}
  125.             {# set largest size depending on column count of cms block #}
  126.             {% if autoColumnSizes and columns %}
  127.                 {% set sizeFallback = (sizeFallback / columns)|round(0, 'ceil') %}
  128.             {% endif %}
  130.             {% set breakpoint = {
  131.                 'sm': theme_config('breakpoint-sm'),
  132.                 'md': theme_config('breakpoint-md'),
  133.                 'lg': theme_config('breakpoint-lg'),
  134.                 'xl': theme_config('breakpoint-xl')
  135.             } %}
  137.             {% if thumbnails|first.width > breakpoint|reverse|first %}
  138.                 {% set maxWidth = thumbnails|first.width %}
  139.             {% endif %}
  141.             {% for key, value in breakpoint|reverse %}(min-width: {{ value }}px) {{ sizes[key] }}{% if not loop.last %}, {% endif %}{% endfor %}, {{ sizeFallback }}
  142.         {% endapply %}{% endset %}
  143. {% endif %}
  144. <img {% if load %}
  145.         {# src="{{ media|sw_encode_media_url }}"  #}
  146.         {% if layout == "product-single" %}
  147.             src="{{ media|sw_encode_media_url }}"
  148.         {% else %}
  149.             src="{% if thumbnails|last.url %}{{ thumbnails|last.url }}{% else %}{{ media|sw_encode_media_url }}{% endif %}"
  150.         {% endif %}
  151.     {% else %}
  152.         src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
  153.         {# data-src="{{ media|sw_encode_media_url }}" #}
  154.         data-src="{% if thumbnails|last.url %}{{ thumbnails|last.url }}{% else %}{{ media|sw_encode_media_url }}{% endif %}"
  155.     {% endif %}
  156.     {% if media.thumbnails|length > 0 %}
  157.         {% if load %}srcset="{{ srcsetValue }}" {% else %}data-srcset="{{ srcsetValue }}" {% endif %}
  158.         {% if load %}
  159.             {% if layout == "product-single" %}
  160.                 sizes="(max-width: 767px) 240px, 586px"
  161.             {% else %}
  162.                 {% if sizes['default'] %}
  163.                     sizes="{{ sizes['default'] }}"
  164.                 {% elseif sizes|length > 0 %}
  165.                     sizes="{{ sizesValue }}"
  166.                 {% endif %}
  167.             {% endif %}
  168.         {% else %}
  169.             {% if layout == "product-single" %}
  170.                 data-sizes="(max-width: 767px) 83px, 201px"
  171.             {% else %}
  172.                 {% if sizes['default'] %}
  173.                     data-sizes="{{ sizes['default'] }}"
  174.                 {% elseif sizes|length > 0 %}
  175.                     data-sizes="{{ sizesValue }}"
  176.                 {% endif %}
  177.             {% endif %}
  178.         {% endif %}
  179.     {% endif %}
  180.     {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
  181. />