templates/PageParts/FolderGalleryPagePart/view.html.twig line 1

Open in your IDE?
  1. <section class="content">
  3.     {% if (resource.getMedia | length > 1) %}
  5.         <div class="gallery" id="gallery-{{ resource.id }}">
  7.             <div class="gallery-boxes">
  8.                 {% for media in resource.getMedia %}
  9.                     {% if ( media and media.contentType != "application/octet-stream") %}
  10.                         <div class="gallery-box">
  12.                             {% set imgUrl = croppedImgSrc(media.url, null, { w: 1400, q: 80, fit: 'max' }) %}
  13.                             {% set fullSrcUrl = croppedImgSrc(media.url, null, { w: 1920, q: 80 }) %}
  14.                             {% set previewSrc = croppedImgSrc(media.url, null, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  16.                             <a href="{{ asset(fullSrcUrl) }}"
  17.                                data-gallery-id="{{ resource.id }}" data-gallery-slide="{{ media.id }}">
  18.                                 <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  19.                                      alt="{{ 'gallery.image_alt' | trans }}" />
  20.                             </a>
  22.                         </div>
  23.                     {% endif %}
  24.                 {% endfor %}
  25.             </div>
  27.             <div class="gallery-nav">
  28.                 {% for media in resource.getMedia %}
  29.                     {% if ( media and media.contentType != "application/octet-stream") %}
  30.                         <div class="gallery-thumb">
  32.                             {% set imgUrl = croppedImgSrc(media.url, null, { w: 180, q: 80, fit: 'crop' }) %}
  33.                             {% set previewSrc = croppedImgSrc(media.url, null, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  35.                             <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  36.                                  alt="{{ 'gallery.image_alt' | trans }}" />
  38.                         </div>
  39.                     {% endif %}
  40.                 {% endfor %}
  41.             </div>
  43.             <div class="gallery-clearfix"></div>
  44.         </div>
  46.         <div class="gallery fullscreen" id="gallery-fullscreen-{{ resource.id }}">
  47.             <div class="gallery-boxes">
  48.                 {% for media in resource.getMedia %}
  49.                     {% if ( media and media.contentType != "application/octet-stream") %}
  50.                         <div class="gallery-box">
  52.                             {% set imgUrl = croppedImgSrc(media.url, null, { w: 1920, q: 80, fit: 'max' }) %}
  53.                             {% set previewSrc = croppedImgSrc(media.url, null, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  55.                             <a href="{{ asset(imgUrl) }}"
  56.                                data-gallery-id="{{ resource.id }}" data-gallery-slide="{{ media.id }}">
  57.                                 <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  58.                                      alt="{{ 'gallery.image_alt' | trans }}" />
  59.                             </a>
  61.                         </div>
  62.                     {% endif %}
  63.                 {% endfor %}
  64.             </div>
  66.             <div class="gallery-nav">
  67.                 {% for media in resource.getMedia %}
  68.                     {% if ( media and media.contentType != "application/octet-stream") %}
  69.                         <div class="gallery-thumb">
  71.                             {% set imgUrl = croppedImgSrc(media.url, null, { w: 180, q: 80, fit: 'crop' }) %}
  72.                             {% set previewSrc = croppedImgSrc(media.url, null, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  74.                             <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  75.                                  alt="{{ 'gallery.image_alt' | trans }}" />
  77.                         </div>
  78.                     {% endif %}
  79.                 {% endfor %}
  80.             </div>
  82.             <div class="gallery-clearfix"></div>
  83.             <div class="gallery-close"><i class="fas fa-times"></i></div>
  86.             <div class="gallery-caption">
  87.             </div>
  89.         </div>
  91.     {% else %}
  93.         <div class="gallery" id="gallery-{{ resource.id }}">
  94.             <div class="gallery-boxes">
  95.                 {% for media in resource.getMedia %}
  96.                     {% if ( media and media.contentType != "application/octet-stream") %}
  97.                         <div class="gallery-box">
  99.                             {% set imgUrl = croppedImgSrc(media.url, null, { w: 1400, q: 80, fit: 'max' }) %}
  100.                             {% set fullSrcUrl = croppedImgSrc(media.url, null, { w: 1920, q: 80 }) %}
  101.                             {% set previewSrc = croppedImgSrc(media.url, null, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  103.                             <a href="{{ asset(fullSrcUrl) }}"
  104.                                data-gallery-id="{{ resource.id }}" data-gallery-slide="{{ media.id }}">
  105.                                 <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  106.                                      alt="{{ 'gallery.image_alt' | trans }}" />
  107.                             </a>
  109.                         </div>
  110.                     {% endif %}
  111.                 {% endfor %}
  112.             </div>
  113.         </div>
  115.         <div class="gallery fullscreen" id="gallery-fullscreen-{{ resource.id }}">
  117.             <div class="gallery-boxes">
  118.                 {% for media in resource.getMedia %}
  119.                     {% if ( media and media.contentType != "application/octet-stream") %}
  120.                         <div class="gallery-box">
  122.                             {% set imgUrl = croppedImgSrc(media.url, null, { w: 1920, q: 80, fit: 'max' }) %}
  123.                             {% set previewSrc = croppedImgSrc(media.url, null, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  125.                             <a href="{{ asset(imgUrl) }}"
  126.                                data-gallery-id="{{ resource.id }}" data-gallery-slide="{{ media.id }}">
  127.                                 <img class="lazy" src="previewSrc" data-src="{{ imgUrl }}"
  128.                                      alt="{{ 'gallery.image_alt' | trans }}" />
  129.                             </a>
  131.                         </div>
  132.                     {% endif %}
  133.                 {% endfor %}
  134.             </div>
  136.             <div class="gallery-clearfix"></div>
  137.             <div class="gallery-close"><i class="fas fa-times"></i></div>
  139.             <div class="gallery-caption">
  140.             </div>
  142.         </div>
  144.     {% endif %}
  146. </section>