custom/plugins/LogBchange/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.     {% if attributes.alt is not defined and media.translated.alt is defined %}
  24.         {% set attributes = attributes|merge({'alt': media.translated.alt}) %}
  25.     {% endif %}
  27.     {% if attributes.title is not defined and media.translated.title is defined %}
  28.         {% set attributes = attributes|merge({'title': media.translated.title}) %}
  29.     {% endif %}
  31.     {# uses cms block column count and all available thumbnails to determine the correct image size for the current viewport #}
  32.     {% if media.thumbnails|length > 0 %}
  33.         {% if autoColumnSizes and columns and sizes is not defined %}
  34.             {# set image size for every viewport #}
  35.             {% set sizes = {
  36.                 'xs': (theme_config('breakpoint.sm') - 1) ~'px',
  37.                 'sm': (theme_config('breakpoint.md') - 1) ~'px',
  38.                 'md': ((theme_config('breakpoint.lg') - 1) / columns)|round(0, 'ceil') ~'px',
  39.                 'lg': ((theme_config('breakpoint.xl') - 1) / columns)|round(0, 'ceil') ~'px'
  40.             } %}
  42.             {# set image size for largest viewport depending on the cms block sizing mode (boxed or full-width) #}
  43.             {% if layout == 'full-width' %}
  44.                 {% set container = 100 %}
  45.                 {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'vw'}) %}
  46.             {% else %}
  47.                 {% set container = 1360 %}
  48.                 {% set sizes = sizes|merge({ 'xl': (container / columns)|round(0, 'ceil') ~'px'}) %}
  49.             {% endif %}
  50.         {% endif %}
  52.         {% set thumbnails = media.thumbnails|sort|reverse %}
  54.         {# generate srcset with all available thumbnails #}
  55.         {% set srcsetValue %}{% apply spaceless %}
  56.             {% if loadOriginalImage %}{{ media|sw_encode_media_url }} {{ thumbnails|first.width + 1 }}w, {% endif %}{% for thumbnail in thumbnails %}{{ thumbnail.url | sw_encode_url }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
  57.         {% endapply %}{% endset %}
  59.         {# generate sizes #}
  60.         {% set sizesValue %}{% apply spaceless %}
  61.             {% set sizeFallback = 100 %}
  63.             {# set largest size depending on column count of cms block #}
  64.             {% if autoColumnSizes and columns %}
  65.                 {% set sizeFallback = (sizeFallback / columns)|round(0, 'ceil') %}
  66.             {% endif %}
  68.             {% set breakpoint = {
  69.                 'xs': theme_config('breakpoint.xs'),
  70.                 'sm': theme_config('breakpoint.sm'),
  71.                 'md': theme_config('breakpoint.md'),
  72.                 'lg': theme_config('breakpoint.lg'),
  73.                 'xl': theme_config('breakpoint.xl')
  74.             } %}
  76.             {% if thumbnails|first.width > breakpoint|reverse|first %}
  77.                 {# @deprecated tag:v6.5.0 - Variable `maxWidth` and parent condition will be removed #}
  78.                 {% set maxWidth = thumbnails|first.width %}
  79.             {% endif %}
  81.             {% for key, value in breakpoint|reverse %}(min-width: {{ value }}px) {{ sizes[key] }}{% if not loop.last %}, {% endif %}{% endfor %}, {{ sizeFallback }}vw
  82.         {% endapply %}{% endset %}
  83.     {% endif %}
  85.     {% block thumbnail_utility_img %}
  86. {#    {% if (media) and (media.mimeType == 'video/mp4') %}
  87.     <style>
  88.         .showControlButton{
  89.             display: block;
  90.         }
  91.         .hideControlButton{
  92.             display: none;
  93.         }
  94.     </style>
  95.     <video id="{{ media.fileName }}" class="cms-block-background media-mode--unset" muted="" loop="" autoplay playsinline>
  96.             <source src="{{ media|sw_encode_media_url }}" type="video/mp4">
  97.     </video>
  99.         <div class="video-hero-cover">
  100.             <div class="video-buttons-container">
  101.                 <button id="playButton" class="heroVideoButton hideControlButton " onclick="playVid()" type="button">
  102.                     <span class="heroVideoButtonContent">
  103.                         {% sw_icon 'play' style {'pack' : 'MeineIcons', 'color':'black', 'size':'md'} %}
  104.                         <span class="" style="font-weight: bold; color:black;">{{ 'hero.video.play'|trans|sw_sanitize }}</span>
  105.                     </span>
  107.                 </button>
  108.                 <button id="pauseButton" class="heroVideoButton showControlButton" onclick="pauseVid()" type="button">
  109.                     <span class="heroVideoButtonContent">
  110.                         {% sw_icon 'pause' style {'pack' : 'MeineIcons', 'color':'black', 'size':'md'} %}
  111.                         <span class="" style="font-weight: bold; color:black;">{{ 'hero.video.pause'|trans|sw_sanitize }}</span>
  112.                     </span>
  113.                 </button>
  114.             </div>
  115.         </div>
  117.     <script>
  118.         let vid = document.getElementById("{{ media.fileName }}");
  119.         let playBtn = document.getElementById("playButton");
  120.         let pauseBtn = document.getElementById("pauseButton");
  122.         function playVid() {
  123.             playBtn.classList.remove('showControlButton');
  124.             playBtn.classList.add('hideControlButton');
  126.             pauseBtn.classList.remove('hideControlButton');
  127.             pauseBtn.classList.add('showControlButton');
  128.             vid.play();
  129.         }
  131.         function pauseVid() {
  132.             pauseBtn.classList.remove('showControlButton');
  133.             pauseBtn.classList.add('hideControlButton');
  135.             playBtn.classList.remove('hideControlButton');
  136.             playBtn.classList.add('showControlButton');
  138.             vid.pause();
  139.         }
  140.         document.addEventListener('DOMContentLoaded', function(event) {
  141.             vid.play();
  142.         });
  143.     </script>
  144.     {% else %}#}
  145.     <img {% if load %}src="{{ media|sw_encode_media_url }}" {% else %}data-src="{{ media|sw_encode_media_url }}" {% endif %}
  146.             {% if media.thumbnails|length > 0 %}
  147.                 {% if load %}srcset="{{ srcsetValue }}" {% else %}data-srcset="{{ srcsetValue }}" {% endif %}
  148.                 {% if sizes['default'] %}
  149.                 sizes="{{ sizes['default'] }}"
  150.                 {% elseif sizes|length > 0 %}
  151.                 sizes="{{ sizesValue }}"
  152.                 {% endif %}
  153.             {% endif %}
  154.             {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
  155.         />
  156. {#    {% endif %}#}
  158.     {% endblock %}
  159. {% endblock %}