custom/plugins/WodkaGallery/src/Resources/views/storefront/partials/gallery.html.twig line 1

Open in your IDE?
  1. {% block wodka_gallery %}
  2.   {% set height = imageheight ?? 6 %}
  3.   {% if gallery.type == 0 %}
  4.     {% set mediaItems = gallery.gallerymedia %}
  5.   {% elseif gallery.type == 1 or gallery.type == 2 %}
  6.     {% set mediaItems = gallery.extensions.mediafolder.elements %}
  7.   {% endif %}
  9.   {% if mediaItems|length > 0 %}
  10.     <div class="wodka-gallery">
  11.       {% if showgallerytitle %}
  12.         {% block wodka_gallery_title %}
  13.           <h4>{{ gallery.translated.title }}</h4>
  14.         {% endblock %}
  16.         {% block wodka_gallery_mainimage %}
  17.           {% if gallery.mainImage %}
  18.             {% sw_thumbnails 'gallery_detail_media_image_thumbnail' with {
  19.               media: gallery.mainImage,
  20.               sizes: {
  21.                 'xs': '501px',
  22.                 'sm': '315px',
  23.                 'md': '427px',
  24.                 'lg': '333px',
  25.                 'xl': '284px',
  26.                 'default': '100vw'
  27.               },
  28.               attributes: {
  29.                 'class': 'main-image',
  30.                 'style': 'height: ' ~ config('WodkaGallery.config.mainimageheight') ~ 'rem;',
  31.                 'alt':   gallery.mainImage.translated.alt,
  32.                 'title': gallery.mainImage.translated.title
  33.               }
  34.             } %}
  35.           {% endif %}
  36.         {% endblock %}
  37.       {% endif %}
  39.       {% block wodka_gallery_description %}
  40.         {% if showgallerydescription %}
  41.           <div class="description">{{ gallery.translated.description|raw }}</div>
  42.         {% endif %}
  43.       {% endblock %}
  45.       {% block wodka_gallery_media %}
  46.         {% set containerStyle = '' %}
  47.         {% set itemStyle = '' %}
  48.         {% set captionStyle = '' %}
  50.         {% set isSwiper = displayMode == 2 %}
  51.         {% if displayMode == 0 or displayMode == 1 %}
  52.           {% set captionStyle = '' %}
  53.         {% elseif displayMode == 2 and not forceGrid %}
  54.           {% if swiperType == 1 %}
  55.             {% set containerStyle = 'max-width: calc(' ~ height  ~ 'rem * 3);' %}
  56.           {% elseif swiperType == 2 or swiperType == 3 %}
  57.             {% set containerStyle = 'width: ' ~ height ~ 'rem;' %}
  58.           {% elseif swiperType == 2 or swiperType == 4 %}
  59.             {% set containerStyle = 'width: 100%;' %}
  60.             {% set itemStyle = 'margin-right: 0 !important;' %}
  61.           {% endif %}
  62.           {% set captionStyle = 'margin-bottom: 2.25rem' %}
  63.         {% endif %}
  65.         <div class="gallery-media swiper-container" id="gallery-media-gallery_{{ galleryId }}" style="{{ containerStyle }}">
  66.           {% if displayMode == 2 and not forceGrid %}
  67.           <div class="swiper-wrapper">
  68.             {% endif %}
  69.             {% for media in mediaItems %}
  70.               {% block wodka_gallery_media_item %}
  71.                 <div class="{% if displayMode == 2 and not forceGrid %}swiper-slide{% endif %}">
  72.                   {% if media.media %}
  73.                     {% set mediaItem = media.media %}
  74.                   {% else %}
  75.                     {% set mediaItem = media %}
  76.                   {% endif %}
  78.                   {% if mediaItem %}
  79.                     {% set subHtml = '' %}
  80.                     {% set mediaTitle = '' %}
  82.                     {% if showimagecaption %}
  83.                       {% if not mediaItem.translated.title and showfilename %}
  84.                         {% set subHtml = mediaItem.fileName %}
  85.                         {% set mediaTitle = mediaItem.filename %}
  86.                       {% else %}
  87.                         {% set subHtml = mediaItem.translated.title ?? '' %}
  88.                         {% set mediaTitle = mediaItem.translated.title ?? '' %}
  89.                       {% endif %}
  90.                     {% endif %}
  92.                     {% if displayMode == 1 and not forceGrid %} {# masonry #}
  93.                       {% set thumbnailClass = 'type-image img-masonry' %}
  94.                       {% set thumbnailStyle = '' %}
  95.                     {% elseif displayMode == 2 and swiperType == 4 %}
  96.                       {% set thumbnailClass = 'type-hero img-fluid' %}
  97.                       {% set thumbnailStyle = 'height: ' ~ height ~ 'rem; width: 100%;' %}
  98.                     {% else %} {# grid #}
  99.                       {% set thumbnailClass = 'type-image img-fluid' %}
  100.                       {% if displayMode == 2 and swiperType == 0 and not slidesPerViewAuto %}
  101.                         {% set thumbnailStyle = 'max-height: ' ~ height ~'rem; width: 100%; aspect-ratio: 1/1;' %}
  102.                       {% elseif displayMode == 2 and swiperType == 1 %}
  103.                         {% set thumbnailStyle = 'max-height: ' ~ height ~ 'rem; max-width: 100%; aspect-ratio: 1/1' %}
  104.                       {% else %}
  105.                         {% set thumbnailStyle = 'height: ' ~ height ~ 'rem; width: ' ~ height ~ 'rem;' %}
  106.                       {% endif %}
  107.                     {% endif %}
  109.                     {% if mediaItem.mediatype.name == 'VIDEO' %}
  110.                       {% if displayMode == 1 and not forceGrid %} {# masonry #}
  111.                         {% set thumbnailStyle = 'min-height: 8rem' %}
  112.                       {% endif %}
  114.                       {% block wodka_gallery_media_item_video %}
  115.                         <div class="item {% if not isSwiper %}item-margin{% endif %}">
  116.                           {% block wodka_gallery_media_item_video_element %}
  117.                             <div data-html="#video_{{ loop.index }}"
  118.                                  data-sub-html="{{ subHtml }}"
  119.                                  class="lightbox type-video" style="{{ thumbnailStyle }}"
  120.                                  alt="{{ mediaItem.translated.alt }}" title="{{ mediaTitle }}">
  121.                               {% sw_icon 'video-camera' style { 'size': 'lg' } %}
  122.                               <div class="file-extension">{{ mediaItem.fileExtension|upper }}</div>
  123.                             </div>
  124.                           {% endblock %}
  125.                           {% block wodka_gallery_media_item_video_caption %}
  126.                             {% if showthumbnailcaption and mediaTitle %}
  127.                               <div class="caption" style="{{ captionStyle }}">{{ mediaTitle }}</div>
  128.                             {% endif %}
  129.                           {% endblock %}
  130.                         </div>
  131.                       {% endblock %}
  133.                     {% elseif mediaItem.mediatype.name == 'DOCUMENT' %}
  134.                       {% if displayMode == 1 and not forceGrid %} {# masonry #}
  135.                         {% set thumbnailStyle = 'min-height: 8rem' %}
  136.                       {% endif %}
  138.                       {% block wodka_gallery_media_item_document %}
  139.                         <div class="item {% if not isSwiper %}item-margin{% endif %}">
  140.                           {% block wodka_gallery_media_item_document_element %}
  141.                             <a href="{{ mediaItem.url }}" download
  142.                                alt="{{ "wodka.gallery.download"|trans }} {{ mediaItem.translated.alt }}"
  143.                                title="{{ "wodka.gallery.download"|trans }} {{ mediaTitle }}">
  144.                               <div class="type-document" style="{{ thumbnailStyle }}">
  145.                                 {% sw_icon 'file' style { 'size': 'lg' } %}
  146.                                 <div class="file-extension">{{ mediaItem.fileExtension|upper }}</div>
  147.                                 <div class="download-icon">
  148.                                   {% sw_icon 'cloud-download' style { 'size': 'sm' } %}
  149.                                 </div>
  150.                               </div>
  151.                             </a>
  152.                           {% endblock %}
  153.                           {% block wodka_gallery_media_item_document_caption %}
  154.                             {% if showthumbnailcaption and mediaTitle %}
  155.                               <div class="caption" style="{{ captionStyle }}">{{ mediaTitle }}</div>
  156.                             {% endif %}
  157.                           {% endblock %}
  158.                         </div>
  159.                       {% endblock %}
  161.                     {% elseif mediaItem.mediatype.name == 'AUDIO' %}
  162.                       {% if displayMode == 1 and not forceGrid %} {# masonry #}
  163.                         {% set thumbnailStyle = 'min-height: 8rem' %}
  164.                       {% endif %}
  166.                       {% block wodka_gallery_media_item_audio %}
  167.                         <div class="item {% if not isSwiper %}item-margin{% endif %}">
  168.                           {% block wodka_gallery_media_item_audio_element %}
  169.                             <a href="{{ mediaItem.url }}" download
  170.                                alt="{{ "wodka.gallery.download"|trans }} {{ mediaItem.translated.alt }}"
  171.                                title="{{ "wodka.gallery.download"|trans }} {{ mediaTitle }}">
  172.                               <div class="type-audio" style="{{ thumbnailStyle }}">
  173.                                 {% sw_icon 'micophone' style { 'size': 'lg' } %}
  174.                                 <div class="file-extension">{{ mediaItem.fileExtension|upper }}</div>
  175.                               </div>
  176.                             </a>
  177.                           {% endblock %}
  178.                           {% block wodka_gallery_media_item_audio_caption %}
  179.                             {% if showthumbnailcaption and mediaTitle %}
  180.                               <div class="caption" style="{{ captionStyle }}">{{ mediaTitle }}</div>
  181.                             {% endif %}
  182.                           {% endblock %}
  183.                         </div>
  184.                       {% endblock %}
  186.                     {% elseif mediaItem.mediatype.name == 'IMAGE' %}
  187.                       {% block wodka_gallery_media_item_image %}
  188.                         <div class="item {% if not isSwiper %}item-margin{% endif %}" {% if itemStyle %}style="{{ itemStyle }}{% endif %}">
  189.                           {% block wodka_gallery_media_item_image_element %}
  190.                             <a href="{{ mediaItem.url }}" class="lightbox"
  191.                                alt="{{ "wodka.gallery.open-gallery"|trans }} {{ mediaItem.translated.alt }}"
  192.                                title="{{ "wodka.gallery.open-gallery"|trans }} {{ mediaTitle }}"
  193.                                data-sub-html="{{ subHtml }}">
  194.                               {% sw_thumbnails 'gallery_detail_media_image_thumbnail' with {
  195.                                 media: mediaItem,
  196.                                 sizes: {
  197.                                   'xs': '501px',
  198.                                   'sm': '315px',
  199.                                   'md': '427px',
  200.                                   'lg': '333px',
  201.                                   'xl': '284px',
  202.                                   'default': '100vw'
  203.                                 },
  204.                                 attributes: {
  205.                                   'class': thumbnailClass,
  206.                                   'style': thumbnailStyle,
  207.                                   'alt':   mediaItem.translated.alt,
  208.                                   'title': mediaTitle
  209.                                 }
  210.                               } %}
  211.                             </a>
  212.                           {% endblock %}
  213.                           {% block wodka_gallery_media_item_image_caption %}
  214.                             {% if showthumbnailcaption and mediaTitle %}
  215.                               <div class="caption" style="{{ captionStyle }}">
  216.                                 {{ mediaTitle }}
  217.                               </div>
  218.                             {% endif %}
  219.                           {% endblock %}
  220.                         </div>
  221.                       {% endblock %}
  222.                     {% endif %}
  223.                   {% endif %}
  224.                 </div>
  225.               {% endblock %}
  226.             {% endfor %}
  227.             {% if displayMode == 2 and not forceGrid %}
  228.           </div> <!-- swiper wrapper -->
  229.           <div class="swiper-pagination"></div>
  230.           {% if displayMode == 2 and navigation != 0 %}
  231.             <div class="swiper-button-next {% if navigation != 2 %}hide-on-responsive{% endif %}"></div>
  232.             <div class="swiper-button-prev {% if navigation != 2 %}hide-on-responsive{% endif %}"></div>
  233.           {% endif %}
  234.           {% endif %}
  235.         </div>
  236.       {% endblock %}
  238.       {% block wodka_gallery_media_video %}
  239.         {% for media in mediaItems %}
  240.           {% if media.media %}
  241.             {% set mediaItem = media.media %}
  242.           {% else %}
  243.             {% set mediaItem = media %}
  244.           {% endif %}
  246.           {% block wodka_gallery_media_video_item %}
  247.             {% if mediaItem %}
  248.               {% if mediaItem.mediatype.name == 'VIDEO' %}
  249.                 <div style="display: none" id="video_{{ loop.index }}">
  250.                   <video class="lg-video-object lg-html5" controls preload="none">
  251.                     <source src="{{ mediaItem.url }}" type="{{ mediaItem.mimetype }}">
  252.                     Your browser does not support HTML5 video.
  253.                   </video>
  254.                 </div>
  255.               {% endif %}
  256.             {% endif %}
  257.           {% endblock %}
  258.         {% endfor %}
  259.       {% endblock %}
  261.       {% block wodka_gallery_plugin_gallery %}
  262.         <template data-wodka-gallery data-wodka-gallery-options='{
  263.                     "selectorId": "gallery-media-gallery_{{ galleryId }}",
  264.                     "selector": ".lightbox",
  265.                     "download": false,
  266.                     "captionFromTitleOrAlt": false,
  267.                     "counter": {{ showcounter ? 'true' : 'false' }}
  268.                 }'></template>
  269.       {% endblock %}
  271.       {% block wodka_gallery_plugin_masonry %}
  272.         {% if displayMode == 1 and not forceGrid %}
  273.           {% set tabElement = config('WodkaGallery.config.productposition') == 'tab' ? '#product-detail-tabs' : '' %}
  274.           <template data-wodka-masonry data-wodka-masonry-options='{
  275.                         "container": "#gallery-media-gallery_{{ galleryId }}",
  276.                         "tabElement": "{{ tabElement }}"
  277.                     }'></template>
  278.         {% endif %}
  279.       {% endblock %}
  281.       {% block wodka_gallery_plugin_swiper %}
  282.         {% if displayMode == 2 and not forceGrid %}
  283.           <template data-wodka-swiper data-wodka-swiper-options='{
  284.                         "container": "#gallery-media-gallery_{{ galleryId }}",
  285.                         "paginationEl": ".swiper-pagination",
  286.                         "type": "{{ swiperType }}",
  287.                         "autoplay": {% if autoplay == 1 %}true{% else %}false{% endif %},
  288.                         "autoplayDelay": {{ autoplayDelay }},
  289.                         "slidesPerViewAuto": "{{ slidesPerViewAuto }}",
  290.                         "slidesPerViewXS": "{{ slidesPerViewXS }}",
  291.                         "slidesPerViewSM": "{{ slidesPerViewSM }}",
  292.                         "slidesPerViewMD": "{{ slidesPerViewMD }}",
  293.                         "slidesPerViewLG": "{{ slidesPerViewLG }}",
  294.                         "slidesPerViewXL": "{{ slidesPerViewXL }}"
  295.                     }'></template>
  296.         {% endif %}
  297.       {% endblock %}
  298.     </div>
  299.   {% endif %}
  300. {% endblock %}