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

Open in your IDE?
  1. <section class="content">
  3.     {% if (resource.images | length > 1) %}
  5.         <div class="gallery" id="gallery-{{ resource.id }}">
  7.             <div class="gallery-boxes">
  8.                 {% for image in resource.images %}
  9.                     {% if ( image.media and image.media.contentType != "application/octet-stream") %}
  10.                         <div class="gallery-box">
  12.                             {% set img = image ? image : null %}
  14.                             {% if img is not null and img is not empty %}
  16.                                 {% set imgUrl = croppedImgSrc(img.media.url, img.cropping, { w: 1400, q: 80 }) %}
  17.                                 {% set fullSrcUrl = croppedImgSrc(img.media.url, img.cropping, { w: 1920, q: 80 }) %}
  18.                                 {% set previewSrc = croppedImgSrc(img.media.url, img.cropping, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  20.                                 <a href="{{ asset(fullSrcUrl) }}"
  21.                                    data-gallery-id="{{ resource.id }}" data-gallery-slide="{{ img.id }}">
  22.                                     <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  23.                                          {% if img.altText %}alt="{{ img.altText }}"{% endif %} />
  24.                                 </a>
  25.                             {% endif %}
  27.                         </div>
  28.                     {% endif %}
  29.                 {% endfor %}
  30.             </div>
  32.             <div class="gallery-nav">
  33.                 {% for image in resource.images %}
  34.                     {% if ( image.media and image.media.contentType != "application/octet-stream") %}
  35.                         <div class="gallery-thumb">
  37.                             {% set img = image ? image : null %}
  39.                             {% if img is not null and img is not empty %}
  40.                                 {% set imgUrl = croppedImgSrc(img.media.url, img.cropping, { w: 180, q: 80, fit: 'crop' }) %}
  41.                                 {% set previewSrc = croppedImgSrc(img.media.url, img.cropping, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  43.                                 <img class="lazy"
  44.                                      src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  45.                                      {% if img.altText %}alt="{{ img.altText }}"{% endif %} />
  47.                             {% endif %}
  49.                         </div>
  50.                     {% endif %}
  51.                 {% endfor %}
  52.             </div>
  54.             <div class="gallery-clearfix"></div>
  55.         </div>
  57.         <div class="gallery fullscreen" id="gallery-fullscreen-{{ resource.id }}">
  58.             <div class="gallery-boxes">
  59.                 {% for image in resource.images %}
  60.                     {% if ( image.media and image.media.contentType != "application/octet-stream") %}
  61.                         <div class="gallery-box">
  62.                             {% set img = image ? image : null %}
  64.                             {% if img is not null and img is not empty %}
  65.                                 {% set imgUrl = croppedImgSrc(img.media.url, img.cropping, { w: 1920, q: 80 }) %}
  66.                                 {% set previewSrc = croppedImgSrc(img.media.url, img.cropping, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  68.                                 <a href="{{ asset(imgUrl) }}"
  69.                                    data-gallery-id="{{ resource.id }}" data-gallery-slide="{{ img.id }}">
  70.                                     <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  71.                                          {% if img.altText %}alt="{{ img.altText }}"{% endif %} />
  72.                                 </a>
  73.                             {% endif %}
  74.                         </div>
  75.                     {% endif %}
  76.                 {% endfor %}
  77.             </div>
  79.             <div class="gallery-nav">
  80.                 {% for image in resource.images %}
  81.                     {% if ( image.media and image.media.contentType != "application/octet-stream") %}
  82.                         <div class="gallery-thumb">
  83.                             {% set img = image ? image : null %}
  85.                             {% if img is not null and img is not empty %}
  86.                                 {% set imgUrl = croppedImgSrc(img.media.url, img.cropping, { w: 180, q: 80, fit: 'crop' }) %}
  87.                                 {% set previewSrc = croppedImgSrc(img.media.url, img.cropping, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  89.                                 <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  90.                                      {% if img.altText %}alt="{{ img.altText }}"{% endif %} />
  92.                             {% endif %}
  93.                         </div>
  94.                     {% endif %}
  95.                 {% endfor %}
  96.             </div>
  98.             <div class="gallery-clearfix"></div>
  99.             <div class="gallery-close"><i class="fas fa-times"></i></div>
  102.             <div class="gallery-caption">
  103.             </div>
  105.         </div>
  107.     {% else %}
  109.         <div class="gallery" id="gallery-{{ resource.id }}">
  110.             <div class="gallery-boxes">
  111.                 {% for image in resource.images %}
  113.                     {% if ( image.media and image.media.contentType != "application/octet-stream") %}
  114.                         <div class="gallery-box">
  115.                             {% set img = image ? image : null %}
  116.                             {% set cropSettings = "?fit=max&w=1400" %}
  118.                             {% if img is not null and img is not empty %}
  119.                                 {% set imgUrl = croppedImgSrc(img.media.url, img.cropping, { w: 1400, q: 80, fit: 'max' }) %}
  120.                                 {% set fullSrcUrl = croppedImgSrc(img.media.url, img.cropping, { w: 1920, q: 80 }) %}
  121.                                 {% set previewSrc = croppedImgSrc(img.media.url, img.cropping, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  123.                                 <a href="{{ asset(fullSrcUrl) }}"
  124.                                    data-gallery-id="{{ resource.id }}" data-gallery-slide="{{ img.id }}">
  125.                                     <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  126.                                          {% if img.altText %}alt="{{ img.altText }}"{% endif %} />
  127.                                 </a>
  128.                             {% endif %}
  129.                         </div>
  130.                     {% endif %}
  131.                 {% endfor %}
  132.             </div>
  133.         </div>
  135.         <div class="gallery fullscreen" id="gallery-fullscreen-{{ resource.id }}">
  137.             <div class="gallery-boxes">
  138.                 {% for image in resource.images %}
  139.                     {% if ( image.media and image.media.contentType != "application/octet-stream") %}
  140.                         <div class="gallery-box">
  141.                             {% set img = image ? image : null %}
  143.                             {% if img is not null and img is not empty %}
  144.                                 {% set imgUrl = croppedImgSrc(img.media.url, img.cropping, { w: 1920, q: 80, fit: 'max' }) %}
  145.                                 {% set previewSrc = croppedImgSrc(img.media.url, img.cropping, { w: 75, h: 60, q: 50, blur: 20, fit: 'crop' }) %}
  147.                                 <a href="{{ asset(imgUrl) }}"
  148.                                    data-gallery-id="{{ resource.id }}" data-gallery-slide="{{ img.id }}">
  149.                                     <img class="lazy" src="{{ previewSrc }}" data-src="{{ imgUrl }}"
  150.                                          {% if img.altText %}alt="{{ img.altText }}"{% endif %} />
  151.                                 </a>
  152.                             {% endif %}
  153.                         </div>
  154.                     {% endif %}
  155.                 {% endfor %}
  156.             </div>
  158.             <div class="gallery-clearfix"></div>
  159.             <div class="gallery-close"><i class="fas fa-times"></i></div>
  161.             <div class="gallery-caption">
  162.             </div>
  164.         </div>
  166.     {% endif %}
  168. </section>