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

Open in your IDE?
  1. {% block thumbnail_utility %}
  2.     {# activate load per default. If it is not activated only a data-src is set instead of the src tag. #}
  3.     {% if load is not defined %}
  4.         {% set load = true %}
  5.     {% endif %}
  7.     {# By default no original image will be loaded as soon as thumbnails are available. #}
  8.     {# When set to true the orginal image will be loaded when the viewport is greater than the largest available thumbnail. #}
  9.     {% if loadOriginalImage is not defined %}
  10.         {% set loadOriginalImage = false %}
  11.     {% endif %}
  13.     {# By default the srcset sizes will be calculated automatically if `columns` are present and no `sizes` are configured. #}
  14.     {# When set to false the sizes attribute will not be generated automatically. #}
  15.     {% if autoColumnSizes is not defined %}
  16.         {% set autoColumnSizes = true %}
  17.     {% endif %}
  19.     {% if attributes is not defined %}
  20.         {% set attributes = {} %}
  21.     {% endif %}
  23.     
  24.     {% if attributes.class %}
  25.         {% set attributes = attributes|merge({'class': 'weedesign-webp ' ~ attributes.class}) %}
  26.     {% else %}
  27.         {% set attributes = attributes|merge({'class': 'weedesign-webp'}) %}
  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 and columns 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) / columns)|round(0, 'ceil') ~'px',
  46.                 'lg': ((theme_config('breakpoint.xl') - 1) / columns)|round(0, 'ceil') ~'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 = 1360 %}
  55.                 {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'px'}) %}
  56.             {% endif %}
  57.         {% endif %}
  59.         {% set thumbnails = media.thumbnails|sort|reverse %}
  61.         {# generate srcset with all available thumbnails #}
  62.         {% set srcsetValue %}{% apply spaceless %}
  63.             {% if config('WeedesignImages2WebP.config.webp') %}
  64.                 {% if loadOriginalImage %}
  65.                     {{ media | weedesign_images2webp_webp_url_media }} {{ thumbnails|first.width + 1 }}w, 
  66.                 {% endif %}
  67.                 {% for thumbnail in thumbnails %}
  68.                     {{ thumbnail | weedesign_images2webp_webp_url_thumbnail }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}
  69.                 {% endfor %}
  70.             {% else %}
  71.                 {% if loadOriginalImage %}
  72.                     {{ media | sw_encode_media_url }} {{ thumbnails|first.width + 1 }}w, 
  73.                 {% endif %}
  74.                 {% for thumbnail in thumbnails %}
  75.                     {{ thumbnail.url | sw_encode_url }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}
  76.                 {% endfor %}
  77.             {% endif %}
  78.         {% endapply %}{% endset %}
  80.         {# generate sizes #}
  81.         {% set sizesValue %}{% apply spaceless %}
  82.             {% set sizeFallback = 100 %}
  84.             {# set largest size depending on column count of cms block #}
  85.             {% if autoColumnSizes and columns %}
  86.                 {% set sizeFallback = (sizeFallback / columns)|round(0, 'ceil') %}
  87.             {% endif %}
  89.             {% set breakpoint = {
  90.                 'xs': theme_config('breakpoint.xs'),
  91.                 'sm': theme_config('breakpoint.sm'),
  92.                 'md': theme_config('breakpoint.md'),
  93.                 'lg': theme_config('breakpoint.lg'),
  94.                 'xl': theme_config('breakpoint.xl')
  95.             } %}
  97.             {% if thumbnails|first.width > breakpoint|reverse|first %}
  98.                 {# @deprecated tag:v6.5.0 - Variable `maxWidth` and parent condition will be removed #}
  99.                 {% set maxWidth = thumbnails|first.width %}
  100.             {% endif %}
  102.             {% for key, value in breakpoint|reverse %}(min-width: {{ value }}px) {{ sizes[key] }}{% if not loop.last %}, {% endif %}{% endfor %}, {{ sizeFallback }}vw
  103.         {% endapply %}{% endset %}
  104.     {% endif %}
  106.     {% block thumbnail_utility_img %}
  108.         {% if config('WeedesignImages2WebP.config.webp') %}
  109.             <img 
  110.                 {% if load %}
  111.                     src="{{ media|weedesign_images2webp_webp_url_media }}"
  112.                 {% else %}
  113.                     data-src="{{ media|weedesign_images2webp_webp_url_media }}" 
  114.                 {% endif %}
  115.                 {% if config('WeedesignImages2WebP.config.fallback') %}
  116.                     data-fallback="{{ media.url|weedesign_images2webp_webp_url_nope }}"
  117.                 {% endif %}
  118.                 {% if media.thumbnails|length > 0 %}
  119.                     {% if load %}
  120.                         srcset="{{ srcsetValue }}" 
  121.                     {% else %}
  122.                         data-srcset="{{ srcsetValue }}" 
  123.                     {% endif %}
  124.                     {% if sizes['default'] %}
  125.                         sizes="{{ sizes['default'] }}"
  126.                     {% elseif sizes|length > 0 %}
  127.                         sizes="{{ sizesValue }}"
  128.                     {% endif %}
  129.                 {% endif %}
  130.                 {% for key, value in attributes %}
  131.                     {% if value != '' %} 
  132.                         {{ key }}="{{ value }}"
  133.                     {% endif %}
  134.                 {% endfor %}
  135.             />
  136.         {% else %}
  137.             <img 
  138.                 {% if load %}
  139.                     src="{{ media|sw_encode_media_url }}"
  140.                 {% else %}
  141.                     data-src="{{ media|sw_encode_media_url }}" 
  142.                 {% endif %}
  143.                 {% if media.thumbnails|length > 0 %}
  144.                     {% if load %}
  145.                         srcset="{{ srcsetValue }}" 
  146.                     {% else %}
  147.                         data-srcset="{{ srcsetValue }}" 
  148.                     {% endif %}
  149.                     {% if sizes['default'] %}
  150.                         sizes="{{ sizes['default'] }}"
  151.                     {% elseif sizes|length > 0 %}
  152.                         sizes="{{ sizesValue }}"
  153.                     {% endif %}
  154.                 {% endif %}
  155.                 {% for key, value in attributes %}
  156.                     {% if value != '' %} 
  157.                         {{ key }}="{{ value }}"
  158.                     {% endif %}
  159.                 {% endfor %}
  160.             />
  161.         {% endif %}
  163.     {% endblock %}
  164. {% endblock %}