templates/areas/galerie/view.html.twig line 1

Open in your IDE?
  1. {# settings #}
  2. {% extends ('areas_shared/settings.html.twig') %}
  4. {% block content %}
  6.     {# default margin #}
  7.     {% if marginBottom.isEmpty() %}
  8.         {% do marginBottom.setDataFromResource('full-margin-bottom') %}
  9.     {% endif %}
  11.     {# galleries #}
  12.     {% set galleries = pimcore_relations('galleries', {
  13.         'types': [
  14.             'object'
  15.         ],
  16.         'subtypes': {
  17.             'object': [
  18.                 'object'
  19.             ]
  20.         },
  21.         'classes': [
  22.             'Galerie'
  23.         ],
  24.         'reload': true
  25.     }) %}
  27.     {# editmode #}
  28.     {% if editmode %}
  29.         <div class="editmode">
  30.             <div class="accordion-container">
  31.                 <div class="accordion-button">
  32.                     <span class="accordion-button-text">Galerie</span>
  33.                     {{ include('svg/editmode/setting.html.twig') }}
  34.                 </div>
  35.                 <div class="panel">
  36.                     <div class="settings-container">
  37.                         
  38.                         <div class="setting input">
  39.                             <label>Anker:</label>
  40.                             {{ anchor|raw }}
  41.                         </div>
  43.                         <div class="setting select">
  44.                             <label>Abstand unten:</label>
  45.                             {{ marginBottom|raw }}
  46.                         </div>
  48.                         <div class="setting relation">
  49.                             <label>Galerien</label>
  50.                             {{ galleries|raw }}
  51.                         </div>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.         </div>
  57.     {% endif %}
  59.     <div class="galerie-brick brick-container {{ marginBottom.data }}">
  61.         {# anchor #}
  62.         {% if anchor.data %}
  63.             <div class="anchor" id="{{ anchor.data }}"></div>
  64.         {% endif %}
  66.         <div class="container-1420">
  68.             {# mobile toggle filter #}
  69.             <div class="toggle-gallery-filter" id="toggleGalleryFilter">
  71.                 <div class="icon">
  72.                     <div class="vertical">
  73.                         {{ include('svg/akkordeon/akkordeon-vertical-icon.html.twig') }}
  74.                     </div>
  75.                     
  76.                     <div class="horizontal">
  77.                         {{ include('svg/akkordeon/akkordeon-horizontal-icon.html.twig') }}
  78.                     </div>
  79.                 </div>
  81.                 <span>{{ 'gallery.filter.mobile-filter'|trans }}</span>
  82.                 
  83.             </div>
  85.             {# filters #}
  86.             <div class="filter-container">
  87.                 <div class="filters hidden" id="galleryFilters">
  89.                     {# all #}
  90.                     <div class="gallery-filter active show-all">
  91.                         <span>{{ 'gallery.filter.all'|trans }}</span>
  92.                     </div>
  94.                     {# galleries with images #}
  95.                     {% for gallery in galleries %}
  96.                         {% if gallery.images|length > 0 %}
  98.                             <div class="gallery-filter" data-id="{{ gallery.id }}">
  99.                                 <span>{{ gallery.title }}</span>
  100.                             </div>
  102.                         {% endif %}
  103.                     {% endfor %}
  104.                     
  105.                 </div>
  106.             </div>
  108.             {# galleries #}
  109.             <div class="galleries masonry-grid">
  111.                 {# columns #}
  112.                 <div class="grid-sizer"></div>
  114.                 {% for gallery in galleries %}
  115.                     {% for image in gallery.images %}
  117.                         <div class="gallery-image active" data-filter="{{ gallery.id }}">
  118.                             <a href="{{ image }}" class="glightbox" data-gallery="{{ toUrl(gallery.title) }}" style="display: block;">
  120.                                 {# <img src="{{ image.thumbnail('galerie') }}"> #}
  122.                                 {{ image.thumbnail('galerie').html({
  123.                                     'disableWidthHeightAttributes': true,
  124.                                     'imgAttributes': {
  125.                                         'loading': 'lazy'
  126.                                     }
  127.                                 })|raw }}
  129.                             </a>
  130.                         </div>
  132.                     {% endfor %}
  133.                 {% endfor %}
  135.             </div>
  136.         </div>
  137.     </div>
  139. {% endblock %}