custom/plugins/FroshPlatformThumbnailProcessor/src/Resources/views/storefront/utilities/thumbnail.html.twig line 1

Open in your IDE?
  1. {% if attributes is not defined %}
  2.     {% set attributes = {} %}
  3. {% endif %}
  5. {# activate load per default. If it is not activated only a data-src is set instead of the src tag. #}
  6. {% if load is not defined %}
  7.     {% set load = true %}
  8. {% endif %}
  10. {# uses cms block column count and all available thumbnails to determine the correct image size for the current viewport #}
  11. {% if media.thumbnails|length > 0 %}
  13.     {% if columns and sizes is not defined %}
  14.         {# set image size for every viewport #}
  15.         {% set sizes = {
  16.             'xs': (shopware.theme.breakpoint.sm - 1) ~'px',
  17.             'sm': (shopware.theme.breakpoint.md - 1) ~'px',
  18.             'md': ((shopware.theme.breakpoint.lg - 1) / columns)|round(0, 'ceil') ~'px',
  19.             'lg': ((shopware.theme.breakpoint.xl - 1) / columns)|round(0, 'ceil') ~'px'
  20.         } %}
  22.         {# set image size for largest viewport depending on the cms block sizing mode (boxed or full-width) #}
  23.         {% if layout == 'full-width' %}
  24.             {% set container = 100 %}
  25.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'vw'}) %}
  26.         {% else %}
  27.             {% set defaultContainerMaxSize = shopware.config.FroshPlatformThumbnailProcessor.config.DefaultContainerMaxSize %}
  28.             {% if defaultContainerMaxSize is defined %}
  29.                 {% set container = defaultContainerMaxSize %}
  30.             {% else %}
  31.                 {% set container = 1360 %}
  32.             {% endif %}
  33.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'px'}) %}
  34.         {% endif %}
  35.     {% endif %}
  37.     {% set thumbnails = media.thumbnails|filter((v) => v.width <= media.metaData.width and v.height <= media.metaData.height)|sort|reverse %}
  39.     {# generate srcset with all available thumbnails #}
  40.     {% set srcsetValue %}{% apply spaceless %}
  41.         {{ 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 %}
  42.     {% endapply %}{% endset %}
  44.     {# generate sizes #}
  45.     {% set sizesValue %}{% apply spaceless %}
  46.         {% set sizeFallback = 100 %}
  48.         {# set largest size depending on column count of cms block #}
  49.         {% if columns %}
  50.             {% set sizeFallback = (sizeFallback / columns)|round(0, 'ceil') %}
  51.         {% endif %}
  53.         {% for key, value in shopware.theme.breakpoint|reverse %}(min-width: {{ value }}px) {{ sizes[key] }}{% if not loop.last %}, {% endif %}{% endfor %}, {{ sizeFallback }}vw
  54.     {% endapply %}{% endset %}
  55. {% endif %}
  57. {% if load is same as(true) %}
  58.     {% if attributes.class %}
  59.         {% set attributes = attributes|merge({'class': 'lazyload ' ~ attributes.class}) %}
  60.     {% else %}
  61.         {% set attributes = attributes|merge({'class': 'lazyload'}) %}
  62.     {% endif %}
  64.     <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  65.         data-src="{{ media|sw_encode_media_url }}"
  66.         {% if media.thumbnails|length > 1 %}
  67.             data-srcset="{{ srcsetValue }}"
  68.             data-sizes="auto"
  69.         {% endif %}
  70.         {% for key, value in attributes %} {{ key }}="{{ value }}"{% endfor %}
  71.     />
  72. {% else %}
  73.     <img data-src="{{ media|sw_encode_media_url }}"
  74.         {% if media.thumbnails|length > 1 %}
  75.             data-srcset="{{ srcsetValue }}"
  76.             {% if sizes['default'] %}
  77.             sizes="{{ sizes['default'] }}"
  78.             {% elseif sizes|length > 0 %}
  79.             sizes="{{ sizesValue }}"
  80.             {% endif %}
  81.         {% endif %}
  82.         {% for key, value in attributes %} {{ key }}="{{ value }}"{% endfor %}
  83.     />
  84. {% endif %}