vendor/store.shopware.com/netzpgallery6/src/Resources/views/storefront/partials/gallery.html.twig line 1

Open in your IDE?
  1. {% block netzp_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="netzp-gallery">
  11.             {% if showgallerytitle %}
  12.                 {% block netzp_gallery_title %}
  13.                     <h4>{{ gallery.translated.title }}</h4>
  14.                 {% endblock %}
  16.                 {% block netzp_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('NetzpGallery6.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 netzp_gallery_description %}
  40.                 {% if showgallerydescription %}
  41.                     <div class="description">{{ gallery.translated.description|raw }}</div>
  42.                 {% endif %}
  43.             {% endblock %}
  45.             {% block netzp_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 netzp_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 netzp_gallery_media_item_video %}
  115.                                                 <div class="item {% if not isSwiper %}item-margin{% endif %}">
  116.                                                     {% block netzp_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 netzp_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 netzp_gallery_media_item_document %}
  139.                                                 <div class="item {% if not isSwiper %}item-margin{% endif %}">
  140.                                                     {% block netzp_gallery_media_item_document_element %}
  141.                                                         <a href="{{ mediaItem.url }}" download
  142.                                                            alt="{{ "netzp.gallery.download"|trans }} {{ mediaItem.translated.alt }}"
  143.                                                            title="{{ "netzp.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 netzp_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 netzp_gallery_media_item_audio %}
  167.                                                 <div class="item {% if not isSwiper %}item-margin{% endif %}">
  168.                                                     {% block netzp_gallery_media_item_audio_element %}
  169.                                                         <a href="{{ mediaItem.url }}" download
  170.                                                            alt="{{ "netzp.gallery.download"|trans }} {{ mediaItem.translated.alt }}"
  171.                                                            title="{{ "netzp.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 netzp_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 netzp_gallery_media_item_image %}
  188.                                                 <div class="item {% if not isSwiper %}item-margin{% endif %}" {% if itemStyle %}style="{{ itemStyle }}{% endif %}">
  189.                                                     {% block netzp_gallery_media_item_image_element %}
  190.                                                         <a href="{{ mediaItem.url }}" class="lightbox"
  191.                                                            alt="{{ "netzp.gallery.open-gallery"|trans }} {{ mediaItem.translated.alt }}"
  192.                                                            title="{{ "netzp.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 netzp_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 netzp_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 netzp_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 netzp_gallery_plugin_gallery %}
  262.                 <template data-netzp-gallery data-netzp6-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 netzp_gallery_plugin_masonry %}
  272.                 {% if displayMode == 1 and not forceGrid %}
  273.                     {% set tabElement = config('NetzpGallery6.config.productposition') == 'tab' ? '#product-detail-tabs' : '' %}
  274.                     <template data-netzp-masonry data-netzp6-masonry-options='{
  275.                         "container": "#gallery-media-gallery_{{ galleryId }}",
  276.                         "tabElement": "{{ tabElement }}"
  277.                     }'></template>
  278.                 {% endif %}
  279.             {% endblock %}
  281.             {% block netzp_gallery_plugin_swiper %}
  282.                 {% if displayMode == 2 and not forceGrid %}
  283.                     <template data-netzp-swiper data-netzp6-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 %}