vendor/crehler/image-booster/src/Resources/views/storefront/utilities/thumbnail.html.twig line 1

Open in your IDE?
  1. {# uses cms block column count and all available thumbnails to determine the correct image size for the current viewport #}
  2. {% if media.thumbnails|length > 0 %}
  3.     {% if columns and sizes is not defined %}
  4.         {# set image size for every viewport #}
  5.         {% set sizes = {
  6.             'xs': (shopware.theme.breakpoint.sm - 1) ~'px',
  7.             'sm': (shopware.theme.breakpoint.md - 1) ~'px',
  8.             'md': ((shopware.theme.breakpoint.lg - 1) / columns)|round(0, 'ceil') ~'px',
  9.             'lg': ((shopware.theme.breakpoint.xl - 1) / columns)|round(0, 'ceil') ~'px'
  10.         } %}
  12.         {# set image size for largest viewport depending on the cms block sizing mode (boxed or full-width) #}
  13.         {% if layout == 'full-width' %}
  14.             {% set container = 100 %}
  15.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'vw'}) %}
  16.         {% else %}
  17.             {% set container = 1360 %}
  18.             {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'px'}) %}
  19.         {% endif %}
  20.     {% endif %}
  21.     
  22.     {% set boosters = media.extensions.mediaBoosters %}
  23.     {% if boosters.watermark %}
  24.         {% set thumbnails = boosters.watermarkThumbnails %}
  25.         {% set srcsetValue %}{% apply spaceless %}{{ boosters.watermark.generatedPath }} {{ thumbnails|first.width + 1 }}w,
  26.             {% for thumbnail in thumbnails %}
  27.                 {% if boosters.watermark.width > thumbnail.width %}
  28.                     {{ thumbnail.generatedPath | sw_encode_url }}
  29.                 {% else %}
  30.                     {{ boosters.watermark.generatedPath }}
  31.                 {% endif%}
  32.                 {{ thumbnail.width }}w
  33.                 {% if not loop.last %}, {% endif %}
  34.             {% endfor %}
  35.         {% endapply %}{% endset %}
  36.     {% else %}
  37.         {% set thumbnails = media.thumbnails %}
  38.         {% set srcsetValue %}{% apply spaceless %}{{ 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 %}
  39.         {% endapply %}{% endset %}
  40.     {% endif %}
  42.     {% set srcsetValueWebP %}{% apply spaceless %}
  43.         {% if boosters.webpMedia %}
  44.             {{ boosters.webpMedia.generatedPath }} {{ thumbnails|first.width + 1 }}w,
  45.             {% for thumbnail in boosters.webpThumbnails %}
  46.                 {% if thumbnail.width < boosters.webpMedia.width %}{{ thumbnail.generatedPath | sw_encode_url }} {% else %}{{ boosters.webpMedia.generatedPath }}{% endif %}
  47.                 {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
  48.         {% endif %}
  49.     {% endapply %}{% endset %}
  51.     {% set srcsetValueAvif %}{% apply spaceless %}
  52.         {% if boosters.avifMedia %}
  53.             {{ boosters.avifMedia.generatedPath }} {{ thumbnails|first.width + 1 }}w, {% for thumbnail in boosters.avifThumbnails %}
  54.             {% if thumbnail.width < boosters.avifMedia.width %}{{ thumbnail.generatedPath | sw_encode_url }} {% else %}{{ boosters.avifMedia.generatedPath }}{% endif %}
  55.             {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
  56.         {% endif %}
  57.     {% endapply %}{% endset %}
  61.     {# generate sizes #}
  62.     {% set sizesValue %}{% apply spaceless %}
  63.         {% set sizeFallback = 100 %}
  65.         {# set largest size depending on column count of cms block #}
  66.         {% if columns %}
  67.             {% set sizeFallback = (sizeFallback / columns)|round(0, 'ceil') %}
  68.         {% endif %}
  70.         {% if thumbnails|first.width > shopware.theme.breakpoint|reverse|first %}
  71.             {% set maxWidth = thumbnails|first.width %}
  72.         {% endif %}
  74.         {% 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
  75.     {% endapply %}{% endset %}
  76. {% endif %}
  77. <picture media-id="{{ media.id }}">
  78.         {% set mediaUrlCalculated %}{% apply spaceless %}
  79.                 {% if media.extensions.mediaBoosters.watermark and media.extensions.mediaBoosters.watermark.generatedPath %}
  80.                     {{ media.extensions.mediaBoosters.watermark.generatedPath }}
  81.                 {% else %}
  82.                     {{ media|sw_encode_media_url }}
  83.                 {% endif %}
  84.             {% endapply %}{% endset %}
  86.     <source
  87.             srcset="{{ srcsetValueAvif }}"
  88.             {% if sizes['default'] %}
  89.                 sizes="{{ sizes['default'] }}"
  90.             {% elseif sizes|length > 0 %}
  91.                 sizes="{{ sizesValue }}"
  92.             {% endif %}
  93.             type="image/avif"
  94.     >
  95.     <source
  96.             srcset="{{ srcsetValueWebP }}"
  97.             {% if sizes['default'] %}
  98.                 sizes="{{ sizes['default'] }}"
  99.             {% elseif sizes|length > 0 %}
  100.                 sizes="{{ sizesValue }}"
  101.             {% endif %}
  102.             type="image/webp"
  103.     >
  104.     <img src="{{ mediaUrlCalculated }}"
  105.         {% if media.thumbnails|length > 0 %}
  106.          srcset="{{ srcsetValue }}"
  107.         {% if sizes['default'] %}
  108.          sizes="{{ sizes['default'] }}"
  109.         {% elseif sizes|length > 0 %}
  110.          sizes="{{ sizesValue }}"
  111.     {% endif %}
  112.     {% endif %}
  113.     {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
  114.     />
  115. </picture>