templates/default/news/NewsGalleryContent.html.twig line 1

Open in your IDE?
  1. {% set randomId = 'swiper_' ~ random() %}
  2. <div class="row news_row">
  3.     <div class="col news_col">
  4.         {% if content.getShowType == "imageSliders" %}
  5.             <div id="gallery-content">
  6.                 <div class="news-gallery-row" >
  7.                     {% set imgmain = null %}
  8.                     {% set imgtop = [] %}
  9.                     {% set imgbottom = [] %}
  10.                     {% set i = 0 %}
  11.                     {% for image in content.gallery() %}
  12.                         {% if i == 0 %}
  13.                             {% set imgmain = image %}
  14.                         {% elseif i % 2 == 0 %}
  15.                             {% set imgtop = imgtop|merge([image]) %}
  16.                         {% else %}
  17.                             {% set imgbottom = imgbottom|merge([image]) %}
  18.                         {% endif %}
  19.                         {% set i = i + 1 %}
  20.                     {% endfor %}
  22.                     {% if imgtop %}
  23.                         <div id="{{content.getIndex()}}-top" class="news-gallery-side-image">
  24.                                 {% for image in imgtop %}
  25.                                     <a href="{{ image.getImage().fullPath }}" data-fancybox="{{content.getIndex()}}_gallery">
  26.                                         {{ image.thumbnail('seiko_newsGallerySmallSliderImage').getHtml({
  27.                                             'imgAttributes': {
  28.                                                 'class': '',
  29.                                                 'height': '150px'
  30.                                             }
  31.                                         }) | raw }}
  32.                                     </a>
  33.                                 {% endfor %}
  34.                         </div>
  35.                     {% endif %}
  36.                     <div class="col news-gallery-main-image d-none d-sm-block">
  37.                         <a href="{{ imgmain.getImage().fullPath }}" data-fancybox="{{content.getIndex()}}_gallery">
  38.                             {{ imgmain.thumbnail('seiko_newsGalleryBigSliderImage').getHtml({
  39.                                 'imgAttributes': {
  40.                                     'class': 'img-fluid',
  41.                                     'height': '250px'
  42.                                 }
  43.                             }) | raw }}
  44.                         </a>
  45.                     </div>
  46.                     <div class="col news-gallery-main-image d-block d-sm-none">
  47.                         <a href="{{ imgmain.getImage().fullPath }}" data-fancybox="{{content.getIndex()}}_gallery">
  48.                             {{ imgmain.thumbnail('seiko_newsGalleryBigSliderImage').getHtml({
  49.                                 'imgAttributes': {
  50.                                 'class': 'img-fluid'}
  51.                             }) | raw }}
  52.                         </a>
  53.                     </div>
  54.                     {% if imgbottom %}
  55.                         <div id="{{content.getIndex()}}-bottom" class="news-gallery-side-image">
  56.                             {% for image in imgbottom %}
  57.                                 <a href="{{ image.getImage().fullPath }}" data-fancybox="{{content.getIndex()}}_gallery">
  58.                                     {{ image.thumbnail('seiko_newsGallerySmallSliderImage').getHtml({
  59.                                         'imgAttributes': {
  60.                                             'class': '',
  61.                                             'height': '150px'
  62.                                         }
  63.                                     }) | raw }}
  64.                                 </a>
  65.                             {% endfor %}
  66.                         </div>
  67.                     {% endif %}
  68.                 </div>
  69.             </div>
  70.         {% endif %}
  71.         {% if content.getShowType == "allimage" %}
  72.             <div class="all-image-gallery">
  73.                 {% for image in content.gallery() %}
  74.                         <a href="{{ image.getImage().fullPath }}" data-fancybox="{{content.getIndex()}}_gallery">
  75.                             {{ image.thumbnail().getHtml({
  76.                                 'imgAttributes': {
  77.                                     'class': 'img-fluid all-image'
  78.                                 }
  79.                             }) | raw }}
  80.                         </a>
  81.                 {% endfor %}
  82.             </div>
  83.         {% endif %}
  84.         {% if content.getShowType == "singleimage" %}
  85.             {% for image in content.gallery() %}
  86.                 <a class="{{content.getIndex()}}-single-image single-image"
  87.                     href = "{{ image.getImage().fullPath }}"
  88.                     data-fancybox="{{content.getIndex()}}_gallery">
  89.                     <div style="position: relative; display: inline-block;">
  90.                         {{ image.getImage().getThumbnail().getHtml({
  91.                             'imgAttributes': {
  92.                                 'class' : 'img-fluid',
  93.                             }
  94.                         }) | raw }}
  95.                         <img class="zoom-icon" src="{{ asset('/themes/frontend/images/fancyzoomicon.png') }}" alt="Nagyítás">
  96.                     </div>
  97.                 </a>
  98.             {% endfor %}
  99.         {% endif %}
  100.     </div>
  101. </div>
  103.    
  105.     
  107. {% block scripts %}
  108.     {% do pimcore_head_script().appendFile(asset('themes/frontend/vendors/lightbox/js/lightbox.js')) %}
  109.     {% do pimcore_head_script().appendFile('https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js') %}
  110.     
  111.     <script>
  112.         content_type = "{{content.getShowType}}";
  113.         if(content_type == "imageSliders"){
  114.             let content = document.getElementById("gallery-content");
  115.             let top = document.getElementById("{{content.getIndex()}}-top");
  116.             let bottom = document.getElementById("{{content.getIndex()}}-bottom");
  118.            
  119.             if(bottom != null && bottom.scrollWidth == bottom.clientWidth){
  120.                 bottom.style.justifyContent = "center";
  121.             }
  122.             if(top != null && top.scrollWidth == top.clientWidth){
  123.                 top.style.justifyContent = "center";
  124.             }
  125.         }
  126.         if(content_type == "singleimage"){
  127.             let content = document.getElementsByClassName("{{content.getIndex()}}-single-image");
  128.             if(content != null){
  129.                 content[0].style.display = "flex";
  130.             }
  131.         }
  132.     </script>
  133. {% endblock %}
  135. {% block head_stylesheets %}
  136.     {% do pimcore_head_link().appendStylesheet(asset('themes/frontend/vendors/lightbox/css/lightbox.css')) %}
  137.     {% do pimcore_head_link().appendStylesheet('https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css') %}
  138. {% endblock %}