Adds gallery view mode. Improvements to carousel lightbox.

functions.php

@@ -512,8 +512,12 @@ function blocksy_tainacan_swiper_scripts() {
 
 		if ( in_array($post_type, $collections_post_types) ) {
 			wp_enqueue_style( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), BLOCKSY_TAINACAN_VERSION );
-			wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), BLOCKSY_TAINACAN_VERSION, true );	
+			wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), BLOCKSY_TAINACAN_VERSION, true );	 
-			wp_enqueue_script( 'blocksy-tainacan-scripts__swiper', get_stylesheet_directory_uri() . '/js/attachments-carousel.js', ['swiper'], BLOCKSY_TAINACAN_VERSION, true );
+			wp_enqueue_style( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css', array(), BLOCKSY_TAINACAN_VERSION );
+			wp_enqueue_style( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css', array(), BLOCKSY_TAINACAN_VERSION );
+			wp_enqueue_script( 'photoswipe', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js', array(), BLOCKSY_TAINACAN_VERSION, true );	 
+			wp_enqueue_script( 'photoswipe-skin', 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js', array(), BLOCKSY_TAINACAN_VERSION, true );	 
+			wp_enqueue_script( 'blocksy-tainacan-scripts__swiper', get_stylesheet_directory_uri() . '/js/attachments-carousel.js', ['swiper', 'photoswipe', 'photoswipe-skin'], BLOCKSY_TAINACAN_VERSION, true );
 		}
 
 		wp_enqueue_script( 'blocksy-tainacan-scripts', get_stylesheet_directory_uri() . '/js/scripts.js', [], BLOCKSY_TAINACAN_VERSION, true );

inc/options/posts/tainacan-item-single.php

@@ -9,6 +9,10 @@ if (! isset($is_bbpress)) {
 }
 
 $options = [
+	blocksy_get_options(get_stylesheet_directory() . '/inc/options/single-elements/gallery-mode.php', [
+		'prefix' => $post_type->name . '_single',
+		'enabled' => 'no'
+	], false),
 	blocksy_get_options(get_stylesheet_directory() . '/inc/options/single-elements/section-labels.php', [
 		'prefix' => $post_type->name . '_single',
 		'enabled' => 'yes'

inc/options/single-elements/gallery-mode.php

@@ -0,0 +1,24 @@
+<?php
+
+if (! isset($prefix)) {
+	$prefix = '';
+} else {
+	$prefix = $prefix . '_';
+}
+
+if (! isset($enabled)) {
+	$enabled = 'no';
+}
+
+$options = [	
+	$prefix . 'gallery_mode' => [
+		'label' => __( 'Gallery Mode', 'blocksy-tainacan' ),
+		'type' => 'ct-switch',
+		'value' => $enabled,
+		'setting' => [ 'transport' => 'postMessage' ],
+		'desc' => __( 'Merges Document and Attachments section in a single carousel.', 'blocksy-tainacan' ),
+		'sync' => blocksy_sync_single_post_container([
+			'prefix' => $prefix
+		])
+	]
+];

js/attachments-carousel.js

@@ -1,6 +1,6 @@
 const attachmentsThumbsSwiper = new Swiper('.swiper-container-thumbs', {
-  spaceBetween: 15,
+  spaceBetween: 12,
-  slidesPerView: 7,
+  slidesPerView: 8,
   // Responsive breakpoints
   breakpoints: {
     // when window width is >= 320px
@@ -32,14 +32,241 @@ const attachmentsThumbsSwiper = new Swiper('.swiper-container-thumbs', {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   },
+  autoplay: false
 });
 const attachmentsMainSwiper = new Swiper('.swiper-container-main', {
+  slidesPerView: 1,
+  slidesPerGroup: 1,
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   },
+  autoplay: false,
   thumbs: {
-    swiper: attachmentsThumbsSwiper
+    swiper: attachmentsThumbsSwiper,
-  },
+    autoScrollOffset: 1
-  watchOverflow: true
+  }
-});
+});
+
+// 2 of 4 : PHOTOSWIPE #######################################
+// https://photoswipe.com/documentation/getting-started.html //
+
+var initPhotoSwipeFromDOM = function(gallerySelector) {
+  // parse slide data (url, title, size ...) from DOM elements
+  // (children of gallerySelector)
+  var parseThumbnailElements = function(el) {
+    var thumbElements = el.childNodes,
+        numNodes = thumbElements.length,
+        items = [],
+        figureEl,
+        linkEl,
+        imgWidth,
+        imgHeight,
+        item;
+
+    for (var i = 0; i < numNodes; i++) {
+      figureEl = thumbElements[i]; // <figure> element
+
+      // include only element nodes
+      if (figureEl.nodeType !== 1) {
+        continue;
+      }
+      
+      linkEl = figureEl.children[0]; // <a> element
+      
+      if (linkEl.classList.contains('attachment-without-image')) {
+        item = {
+          html: '<div class="attachment-without-image"><iframe src="' + linkEl.href +  '"></iframe></div>'
+        }
+      } else {
+        imgWidth = linkEl.children[0] && linkEl.children[0].attributes.getNamedItem('width') ? linkEl.children[0].attributes.getNamedItem('width').value : 140;
+        imgHeight = linkEl.children[0] && linkEl.children[0].attributes.getNamedItem('height') ? linkEl.children[0].attributes.getNamedItem('height').value : 140;
+        
+        // create slide object
+        item = {
+          src: linkEl.getAttribute("href"),
+          w: parseInt(imgWidth, 10),
+          h: parseInt(imgHeight, 10)
+        };
+        
+        if (linkEl.children[1] && linkEl.children[1].classList.contains('single-item-file-name')) {
+          item.title = linkEl.children[1].innerText;
+        }
+      }
+
+      item.el = figureEl; // save link to element for getThumbBoundsFn
+      items.push(item);
+    }
+
+    return items;
+  };
+
+  // find nearest parent element
+  var closest = function closest(el, fn) {
+    return el && (fn(el) ? el : closest(el.parentNode, fn));
+  };
+
+  // triggers when user clicks on thumbnail
+  var onThumbnailsClick = function(e) {
+    e = e || window.event;
+    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
+
+    var eTarget = e.target || e.srcElement;
+
+    // find root element of slide
+    var clickedListItem = closest(eTarget, function(el) {
+      return el.tagName && el.tagName.toUpperCase() === "LI";
+    });
+   
+    if (!clickedListItem) {
+      return;
+    }
+
+    // find index of clicked item by looping through all child nodes
+    // alternatively, you may define index via data- attribute
+    var clickedGallery = clickedListItem.parentNode,
+        childNodes = clickedListItem.parentNode.childNodes,
+        numChildNodes = childNodes.length,
+        nodeIndex = 0,
+        index;
+
+    for (var i = 0; i < numChildNodes; i++) {
+      if (childNodes[i].nodeType !== 1) {
+        continue;
+      }
+
+      if (childNodes[i] === clickedListItem) {
+        index = nodeIndex;
+        break;
+      }
+      nodeIndex++;
+    }
+
+    if (index >= 0) {
+      // open PhotoSwipe if valid index found
+      openPhotoSwipe(index, clickedGallery);
+    }
+    return false;
+  };
+
+  // parse picture index and gallery index from URL (#&pid=1&gid=2)
+  var photoswipeParseHash = function() {
+    var hash = window.location.hash.substring(1),
+        params = {};
+
+    if (hash.length < 5) {
+      return params;
+    }
+
+    var vars = hash.split("&");
+    for (var i = 0; i < vars.length; i++) {
+      if (!vars[i]) {
+        continue;
+      }
+      var pair = vars[i].split("=");
+      if (pair.length < 2) {
+        continue;
+      }
+      params[pair[0]] = pair[1];
+    }
+
+    if (params.gid) {
+      params.gid = parseInt(params.gid, 10);
+    }
+
+    return params;
+  };
+
+  var openPhotoSwipe = function(
+  index,
+   galleryElement,
+   disableAnimation,
+   fromURL
+  ) {
+    var pswpElement = document.querySelectorAll(".pswp")[0],
+        gallery,
+        options,
+        items;
+
+    items = parseThumbnailElements(galleryElement);
+
+    // #################### 3/4 define photoswipe options (if needed) #################### 
+    // https://photoswipe.com/documentation/options.html //
+    options = {
+      showHideOpacity: false,
+      loop: false,
+      // Buttons/elements
+      closeEl: true,
+      captionEl: true,
+      fullscreenEl: true,
+      zoomEl: true,
+      shareEl: false,
+      counterEl: false,
+      arrowEl: true,
+      preloaderEl: true,
+      bgOpacity: 0.85,
+      // define gallery index (for URL)
+      galleryUID: galleryElement.getAttribute("data-pswp-uid"),
+      getThumbBoundsFn: function(index) {
+        // See Options -> getThumbBoundsFn section of documentation for more info
+        var thumbnail = items[index].el.getElementsByTagName("img")[0], // find thumbnail
+            pageYScroll =
+            window.pageYOffset || document.documentElement.scrollTop,
+            rect = thumbnail.getBoundingClientRect();
+
+        return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
+      }
+    };
+
+    // PhotoSwipe opened from URL
+    if (fromURL) {
+      if (options.galleryPIDs) {
+        // parse real index when custom PIDs are used
+        // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
+        for (var j = 0; j < items.length; j++) {
+          if (items[j].pid == index) {
+            options.index = j;
+            break;
+          }
+        }
+      } else {
+        // in URL indexes start from 1
+        options.index = parseInt(index, 10) - 1;
+      }
+    } else {
+      options.index = parseInt(index, 10);
+    }
+
+    // exit if index not found
+    if (isNaN(options.index)) {
+      return;
+    }
+
+    if (disableAnimation) {
+      options.showAnimationDuration = 0;
+    }
+
+    // Pass data to PhotoSwipe and initialize it
+    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+    gallery.init();
+  };
+
+  // loop through all gallery elements and bind events
+  var galleryElements = document.querySelectorAll(gallerySelector);
+ 
+  for (var i = 0, l = galleryElements.length; i < l; i++) {
+    galleryElements[i].setAttribute("data-pswp-uid", i + 1);
+    galleryElements[i].onclick = onThumbnailsClick;
+  }
+
+  // Parse URL and open gallery if it contains #&pid=3&gid=1
+  var hashData = photoswipeParseHash();
+
+  if (hashData.pid && hashData.gid) {
+    openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
+  }
+};
+
+// execute above function
+initPhotoSwipeFromDOM(".swiper-wrapper");
+

js/scripts.js

@@ -1 +0,0 @@
-import { render, createElement, Component, Fragment } from '@wordpress/element'

package.json

@@ -21,5 +21,6 @@
   "devDependencies": {
     "clean-css-cli": "^4.3.0",
     "node-sass": "^4.14.1"
-  }
+  },
+  "dependencies": {}
 }

sass/tainacan-item-single.scss

@@ -94,7 +94,7 @@
                 min-height: 429px;
             }
         }
-        .tainacan-embed-container{
+        .tainacan-embed-container {
             width: 100%;
 
             iframe {
@@ -111,16 +111,11 @@
         transition: font-weight 0.3s ease;
 
         img {
+            border-radius: var(--borderRadius, 3px);
             border-bottom: 4px solid transparent;
             margin-bottom: 4px;
             transition: border 0.3s ease;
         }
-        .slick-current{
-            font-weight: bold;
-            img {
-                border-bottom: 4px solid #298596;
-            }
-        }   
     }
     .single-item-collection--attachments-file {
         &:hover {
@@ -129,24 +124,67 @@
                 transform: scale(1);
             }
         }
-    } 
+    }
+    .single-item-collection--gallery {
+        margin-bottom: 24px;
+        ul { 
+            list-style: none; 
+            padding: 0;
+        }
+        .tainacan-content {
+            margin: 0;
+            img {
+                max-height: 60vh;
+                width: auto;
+            }
+            video {
+                width: auto;
+            }
+            iframe {
+                min-height: 200px;
+                height: 60vh;
+            }
+        }
+    }
     .single-item-collection--gallery-items,
     .single-item-collection--attachments {
+        position: relative;
+        padding: 0 60px;
+        
+        .swiper-button-disabled {
+            display: none;
+        }
+        .swiper-button-next,
+        .swiper-button-prev {
+            top: 65px;
+        } 
+        .swiper-slide-thumb-active {
+            font-weight: bold;
+            img {
+                border-bottom: 4px solid var(--paletteColor1, #3eaf7c);
+            }
+        }
+
+        ul { 
+            list-style: none; 
+            padding: 0;
+        }
         .single-item-collection--attachments-file {
             text-align: center;
             vertical-align: top;
             cursor: pointer;
             word-break: break-all;
             font-size: 0.875em;
-            padding: 0 6px;
+            //padding: 0 6px;
             
             @media only screen and (max-width: 380px) {
                 margin: 10px 0;
             }
 
             img {
-                width: 130px;
+                border-radius: var(--borderRadius, 3px);
-                height: 130px;
+                width: 140px;
+                height: 140px;
                 object-fit: cover;
                 &:focus {
                     outline: none;
@@ -154,7 +192,7 @@
             }
             a {
                 width: 100%;
-                max-width: 130px;
+                max-width: 140px;
                 font-size: 0.875rem; 
                 text-align: center;
                 word-break: break-all;
@@ -175,6 +213,8 @@
             }
         }
     }
+    --swiper-theme-color: var(--paletteColor1, #3eaf7c);
+    --swiper-navigation-color: var(--paletteColor1, #3eaf7c);
     .single-item-collection--metadata {
         height: 100%;
         
@@ -254,35 +294,33 @@
         }
     }
 
-    --swiper-theme-color: var(--paletteColor1, #3eaf7c);
+    // Photoswip zoom
-    --swiper-navigation-color: var(--paletteColor1, #3eaf7c);
+    .pswp__zoom-wrap .attachment-without-image {
-    .swiper-container {
+        width: 100%;
-        .swiper-button-disabled {
+        height: 100%;
-            display: none;
+        display: flex;
-        }
+        align-items: center;
-        .swiper-button-next,
+        justify-content: center;
-        .swiper-button-prev {
-            top: calc(130px/2);
 
-            &:after {
+        & > iframe {
-                filter: drop-shadow(0px 0px 1px white);
+           min-height: 80vh;
-            }
+           width: 80%;
-        }  
+           border: none;
-        .swiper-button-prev {
-            left: -30px;
-            transition: left 0.3s ease;
         }
-        .swiper-button-next {
+
-            right: -30px;
+        & > a,
-            transition: right 0.3s ease;
+        & > p {
+            z-index: 99;
+            padding: 1rem 4.33337vw;
+            background: white;
+            border-radius: var(--borderRadius, 3px);
+            word-wrap: break-word;
         }
-        &:hover {
+        & > audio,
-            .swiper-button-prev {
+        & > video {
-                left: 10px;
+            min-height: 54px;
-            }
+            padding: 12px;
-            .swiper-button-next {
-                right: 10px;
-            }
         }
-    } 
+
+    }
 }

style.css

@@ -434,24 +434,78 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
 }
 
 .single-item-data-section .single-item-collection--gallery-items img {
+  border-radius: var(--borderRadius, 3px);
   border-bottom: 4px solid transparent;
   margin-bottom: 4px;
   transition: border 0.3s ease;
 }
 
-.single-item-data-section .single-item-collection--gallery-items .slick-current {
-  font-weight: bold;
-}
-
-.single-item-data-section .single-item-collection--gallery-items .slick-current img {
-  border-bottom: 4px solid #298596;
-}
-
 .single-item-data-section .single-item-collection--attachments-file:hover .tainacan-item-file-download {
   opacity: 1;
   transform: scale(1);
 }
 
+.single-item-data-section .single-item-collection--gallery {
+  margin-bottom: 24px;
+}
+
+.single-item-data-section .single-item-collection--gallery ul {
+  list-style: none;
+  padding: 0;
+}
+
+.single-item-data-section .single-item-collection--gallery .tainacan-content {
+  margin: 0;
+}
+
+.single-item-data-section .single-item-collection--gallery .tainacan-content img {
+  max-height: 60vh;
+  width: auto;
+}
+
+.single-item-data-section .single-item-collection--gallery .tainacan-content video {
+  width: auto;
+}
+
+.single-item-data-section .single-item-collection--gallery .tainacan-content iframe {
+  min-height: 200px;
+  height: 60vh;
+}
+
+.single-item-data-section .single-item-collection--gallery-items,
+.single-item-data-section .single-item-collection--attachments {
+  position: relative;
+  padding: 0 60px;
+}
+
+.single-item-data-section .single-item-collection--gallery-items .swiper-button-disabled,
+.single-item-data-section .single-item-collection--attachments .swiper-button-disabled {
+  display: none;
+}
+
+.single-item-data-section .single-item-collection--gallery-items .swiper-button-next,
+.single-item-data-section .single-item-collection--gallery-items .swiper-button-prev,
+.single-item-data-section .single-item-collection--attachments .swiper-button-next,
+.single-item-data-section .single-item-collection--attachments .swiper-button-prev {
+  top: 65px;
+}
+
+.single-item-data-section .single-item-collection--gallery-items .swiper-slide-thumb-active,
+.single-item-data-section .single-item-collection--attachments .swiper-slide-thumb-active {
+  font-weight: bold;
+}
+
+.single-item-data-section .single-item-collection--gallery-items .swiper-slide-thumb-active img,
+.single-item-data-section .single-item-collection--attachments .swiper-slide-thumb-active img {
+  border-bottom: 4px solid var(--paletteColor1, #3eaf7c);
+}
+
+.single-item-data-section .single-item-collection--gallery-items ul,
+.single-item-data-section .single-item-collection--attachments ul {
+  list-style: none;
+  padding: 0;
+}
+
 .single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file,
 .single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file {
   text-align: center;
@@ -459,7 +513,6 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
   cursor: pointer;
   word-break: break-all;
   font-size: 0.875em;
-  padding: 0 6px;
 }
 
 @media only screen and (max-width: 380px) {
@@ -471,8 +524,9 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
 
 .single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file img,
 .single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file img {
-  width: 130px;
+  border-radius: var(--borderRadius, 3px);
-  height: 130px;
+  width: 140px;
+  height: 140px;
   object-fit: cover;
 }
 
@@ -484,7 +538,7 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
 .single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file a,
 .single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file a {
   width: 100%;
-  max-width: 130px;
+  max-width: 140px;
   font-size: 0.875rem;
   text-align: center;
   word-break: break-all;
@@ -602,36 +656,33 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
   border-left: 1px solid #f2f2f2;
 }
 
-.single-item-data-section .swiper-container .swiper-button-disabled {
+.single-item-data-section .pswp__zoom-wrap .attachment-without-image {
-  display: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.single-item-data-section .swiper-container .swiper-button-next,
+.single-item-data-section .pswp__zoom-wrap .attachment-without-image > iframe {
-.single-item-data-section .swiper-container .swiper-button-prev {
+  min-height: 80vh;
-  top: calc(130px/2);
+  width: 80%;
+  border: none;
 }
 
-.single-item-data-section .swiper-container .swiper-button-next:after,
+.single-item-data-section .pswp__zoom-wrap .attachment-without-image > a,
-.single-item-data-section .swiper-container .swiper-button-prev:after {
+.single-item-data-section .pswp__zoom-wrap .attachment-without-image > p {
-  filter: drop-shadow(0px 0px 1px white);
+  z-index: 99;
+  padding: 1rem 4.33337vw;
+  background: white;
+  border-radius: var(--borderRadius, 3px);
+  word-wrap: break-word;
 }
 
-.single-item-data-section .swiper-container .swiper-button-prev {
+.single-item-data-section .pswp__zoom-wrap .attachment-without-image > audio,
-  left: -30px;
+.single-item-data-section .pswp__zoom-wrap .attachment-without-image > video {
-  transition: left 0.3s ease;
+  min-height: 54px;
-}
+  padding: 12px;
-
-.single-item-data-section .swiper-container .swiper-button-next {
-  right: -30px;
-  transition: right 0.3s ease;
-}
-
-.single-item-data-section .swiper-container:hover .swiper-button-prev {
-  left: 10px;
-}
-
-.single-item-data-section .swiper-container:hover .swiper-button-next {
-  right: 10px;
 }
 
 /*# sourceMappingURL=style.css.map */

tainacan/archive-items.php

@@ -1,7 +1,6 @@
 <?php 
 
 $prefix = blocksy_manager()->screen->get_prefix();
-
 ?>
 
 <?php get_header(); ?>

template-parts/single-items-attachments.php

@@ -16,101 +16,118 @@
         );
     }
     $prefix = blocksy_manager()->screen->get_prefix();
+
+    function render_attachment_thumbnail_slide_item($attachment) {
+        if ( function_exists('tainacan_get_attachment_html_url') ) {
+            $href = tainacan_get_attachment_html_url($attachment->ID);
+        } else {
+            $href = wp_get_attachment_url($attachment->ID, 'full');
+        }
+        if (!wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments')) :
+        ?>
+            <li class="single-item-collection--attachments-file swiper-slide">
+                <a 
+                    class="attachment-without-image"
+                    href="<?php echo $href; ?>">
+                    <?php
+                        echo wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
+                        echo '<br>';
+                    ?>
+                    <span class="single-item-file-name <?php if (get_theme_mod('tainacan_single_item_hide_files_name', false)) echo 'sr-only' ?>"><?php echo get_the_title( $attachment->ID ); ?></span>
+                </a>
+            </li>
+        <?php 
+            else: 
+            $img_scr = wp_get_attachment_image_src( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
+            ?>
+            <li class="single-item-collection--attachments-file swiper-slide">
+                <a 
+                    href="<?php echo $img_scr[0] ?>">
+                    <?php
+                        echo wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
+                        echo '<br>';
+                    ?>
+                    <span class="single-item-file-name <?php if (get_theme_mod('tainacan_single_item_hide_files_name', false)) echo 'sr-only' ?>"><?php echo get_the_title( $attachment->ID ); ?></span>
+                </a>
+            </li>
+        <?php endif;
+    }
 ?>
-<?php if ( !empty( $attachments )  || ( get_theme_mod( 'tainacan_single_item_gallery_mode', false) && tainacan_has_document() )) : ?>
+
+<?php if ( !empty( $attachments ) || ( get_theme_mod($prefix . '_gallery_mode', 'no')  == 'yes' && tainacan_has_document() ) ) : ?>
 
     <div>
-        <?php if ( get_theme_mod($prefix . '_display_section_labels', 'yes') == 'yes' && get_theme_mod($prefix . '_section_attachments_label', __( 'Attachments', 'blocksy-tainacan' )) != '' ) : ?>
+        <?php if ( get_theme_mod($prefix . '_display_section_labels', 'yes') != 'yes' && get_theme_mod($prefix . '_section_attachments_label', __( 'Attachments', 'blocksy-tainacan' )) != '' ) : ?>
             <h2 class="title-content-items" id="single-item-attachments-label">
                 <?php echo esc_html( get_theme_mod($prefix . '_section_attachments_label', __( 'Attachments', 'blocksy-tainacan' ) ) ); ?>
             </h2>
         <?php endif; ?>
-        <?php if ( get_theme_mod( 'tainacan_single_item_gallery_mode', false ) && get_theme_mod('tainacan_single_item_documents_section_label', __( 'Documents', 'blocksy-tainacan' )) != '') : ?>
+        <?php if ( get_theme_mod($prefix . '_gallery_mode', 'no') == 'yes' && get_theme_mod('tainacan_single_item_documents_section_label', __( 'Documents', 'blocksy-tainacan' )) != '') : ?>
             <h2 class="title-content-items" id="single-item-documents-label">
                 <?php echo esc_html( get_theme_mod('tainacan_single_item_documents_section_label', __( 'Documents', 'blocksy-tainacan' )) ); ?>
             </h2>
         <?php endif; ?>
-        <section class="tainacan-content single-item-collection margin-two-column">
+        <section class="tainacan-content single-item-collection">
-            <?php if (get_theme_mod( 'tainacan_single_item_gallery_mode', false )): ?>
+            <?php if ( get_theme_mod($prefix . '_gallery_mode', 'no') == 'yes' ): ?>
                 <div class="single-item-collection--gallery">
-                    <?php if ( tainacan_has_document() ) : ?>
+                    <div class="swiper-container-main swiper-container">
-                        <section class="tainacan-content single-item-collection margin-two-column">
+                        <ul class="swiper-wrapper">
-                            <div class="single-item-collection--document">
+                            <?php if ( tainacan_has_document() ) : ?>
-                                <?php 
+                                <li class="tainacan-content single-item-collection swiper-slide single-item-collection--document">
-                                    tainacan_the_document(); 
+                                    <?php 
-                                    if ( get_theme_mod( $prefix . '_hide_download_button', 'no' ) == 'no' && function_exists('tainacan_the_item_document_download_link') && tainacan_the_item_document_download_link() != '' ) {
+                                        tainacan_the_document(); 
-                                        echo '<span class="tainacan-item-file-download">' . tainacan_the_item_document_download_link() . '</span>';
+                                        if ( get_theme_mod( $prefix . '_hide_download_button', 'no' ) == 'no' && function_exists('tainacan_the_item_document_download_link') && tainacan_the_item_document_download_link() != '' ) {
-                                    } 
+                                            echo '<span class="tainacan-item-file-download">' . tainacan_the_item_document_download_link() . '</span>';
-                                ?>
+                                        } 
-                            </div>
+                                    ?>
-                        </section>
+                                </li>
-                    <?php endif; ?>
+                            <?php endif; ?>
-                    <?php foreach ( $attachments as $attachment ) { ?>
+                            <?php foreach ( $attachments as $attachment ) { ?>
-                        <section class="tainacan-content single-item-collection margin-two-column">
+                                <li class="tainacan-content single-item-collection swiper-slide single-item-collection--document">
-                            <div class="single-item-collection--document">
+                                    <?php 
-                                <?php 
+                                        if ( function_exists('tainacan_get_single_attachment_as_html') ) {
-                                    if ( function_exists('tainacan_get_single_attachment_as_html') ) {
+                                            tainacan_get_single_attachment_as_html($attachment->ID);
-                                        tainacan_get_single_attachment_as_html($attachment->ID);
+                                        }
-                                    }
+                                        if ( get_theme_mod( $prefix . '_hide_download_button', 'no' ) == 'no' && function_exists('tainacan_the_item_attachment_download_link') && tainacan_the_item_attachment_download_link($attachment->ID) != '' ) {
-                                    if ( get_theme_mod( $prefix . '_hide_download_button', 'no' ) == 'no' && function_exists('tainacan_the_item_attachment_download_link') && tainacan_the_item_attachment_download_link($attachment->ID) != '' ) {
+                                            echo '<span class="tainacan-item-file-download">' . tainacan_the_item_attachment_download_link($attachment->ID) . '</span>';
-                                        echo '<span class="tainacan-item-file-download">' . tainacan_the_item_attachment_download_link($attachment->ID) . '</span>';
+                                        } 
-                                    } 
+                                    ?>
-                                ?>
+                                </li>	
-                            </div>
+                            <?php } ?>
-                        </section>	
+                        </ul>
-                    <?php } ?>
+                    </div>
                 </div>
                 <?php if ( (tainacan_has_document() && $attachments && sizeof($attachments) > 0 ) || (!tainacan_has_document() && $attachments && sizeof($attachments) > 1 ) ) : ?>	
                     <div class="single-item-collection--gallery-items">
-                        <?php if ( tainacan_has_document() ) : ?>
+                        <div class="swiper-container-thumbs swiper-container">
-                            <div class="single-item-collection--attachments-file">
+                            <ul class="swiper-wrapper">
-                                <?php
+                                <?php if ( tainacan_has_document() ) : ?>
-                                    the_post_thumbnail('tainacan-medium-full', array('class' => 'item-card--thumbnail'));
+                                    <li class="single-item-collection--attachments-file swiper-slide">
-                                    echo '<br>';
+                                        <?php
-                                ?>
+                                            the_post_thumbnail('tainacan-medium', array('class' => 'item-card--thumbnail'));
-                                <span class="single-item-file-name <?php if (get_theme_mod('tainacan_single_item_hide_files_name', false)) echo 'sr-only' ?>"><?php echo __( 'Document', 'blocksy-tainacan' ); ?></span>
+                                            echo '<br>';
-                            </div>
+                                        ?>
-                        <?php endif; ?>
+                                        <span class="single-item-file-name <?php if (get_theme_mod('tainacan_single_item_hide_files_name', false)) echo 'sr-only' ?>"><?php echo __( 'Document', 'blocksy-tainacan' ); ?></span>
-                        <?php foreach ( $attachments as $attachment ) { ?>
+                                    </li>
-                            <div class="single-item-collection--attachments-file">
+                                <?php endif; ?>
-                                <div class="<?php if (!wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments')) echo'attachment-without-image'; ?>">
+                                <?php foreach ( $attachments as $attachment ) {
-                                    <?php
+                                    render_attachment_thumbnail_slide_item($attachment);
-                                        echo wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
+                                } ?>
-                                        echo '<br>';
+                            </ul>
-                                    ?>
+                        </div>
-                                    <span class="single-item-file-name <?php if (get_theme_mod('tainacan_single_item_hide_files_name', false)) echo 'sr-only' ?>"><?php echo get_the_title( $attachment->ID ); ?></span>
+                        <div class="swiper-button-prev"></div>
-                                </div>
+                        <div class="swiper-button-next"></div>
-                            </div>
-                        <?php } ?>
                     </div>
                 <?php endif; ?>
             <?php else : ?>
-                <div class="single-item-collection--attachments swiper-container-thumbs swiper-container">
+                <div class="single-item-collection--attachments"> 
-                    <div class="swiper-wrapper">
+                    <div class="swiper-container-thumbs swiper-container">
-                        <?php foreach ( $attachments as $attachment ) { ?>
+                        <ul class="swiper-wrapper">
-                            <?php
+                            <?php foreach ( $attachments as $attachment ) {
-                            if ( function_exists('tainacan_get_attachment_html_url') ) {
+                                render_attachment_thumbnail_slide_item($attachment);
-                                $href = tainacan_get_attachment_html_url($attachment->ID);
+                            } ?>
-                            } else {
+                        </ul>
-                                $href = wp_get_attachment_url($attachment->ID, 'large');
-                            }
-                            ?>
-                            <div class="single-item-collection--attachments-file swiper-slide">
-                                <a 
-                                    class="<?php if (!wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments')) echo'attachment-without-image'; ?>"
-                                    href="<?php echo $href; ?>"
-                                    data-toggle="lightbox"
-                                    data-gallery="example-gallery">
-                                    <?php
-                                        echo wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
-                                        echo '<br>';
-                                    ?>
-                                    <span class="single-item-file-name <?php if (get_theme_mod('tainacan_single_item_hide_files_name', false)) echo 'sr-only' ?>"><?php echo get_the_title( $attachment->ID ); ?></span>
-                                </a>
-                            </div>
-                        <?php } ?>
                     </div>
-
                     <div class="swiper-button-prev"></div>
                     <div class="swiper-button-next"></div>
                 </div>
@@ -118,4 +135,68 @@
         </section>
     </div>
 
+    <!-- add PhotoSwipe (.pswp) element to DOM - 
+    Root element of PhotoSwipe. Must have class pswp. -->
+    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+        <!-- Background of PhotoSwipe. 
+                It's a separate element, as animating opacity is faster than rgba(). -->
+        <div class="pswp__bg"></div>
+
+        <!-- Slides wrapper with overflow:hidden. -->
+        <div class="pswp__scroll-wrap">
+
+            <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
+            <!-- don't modify these 3 pswp__item elements, data is added later on. -->
+            <div class="pswp__container">
+                <div class="pswp__item"></div>
+                <div class="pswp__item"></div>
+                <div class="pswp__item"></div>
+            </div>
+
+            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+            <div class="pswp__ui pswp__ui--hidden">
+
+                <div class="pswp__top-bar">
+
+                <!--  Controls are self-explanatory. Order can be changed. -->
+                    <div class="pswp__counter"></div>
+
+                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+
+                    <button class="pswp__button pswp__button--share" title="Share"></button>
+
+                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+
+                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                    <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+                    <!-- element will get class pswp__preloader--active when preloader is running -->
+                    <div class="pswp__preloader">
+                        <div class="pswp__preloader__icn">
+                            <div class="pswp__preloader__cut">
+                                <div class="pswp__preloader__donut"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                    <div class="pswp__share-tooltip"></div>
+                </div>
+
+                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+                </button>
+
+                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+                </button>
+
+                <div class="pswp__caption">
+                    <div class="pswp__caption__center"></div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
 <?php endif; ?>

template-parts/single-items-document.php

@@ -1,14 +1,14 @@
 <?php 
     $prefix = blocksy_manager()->screen->get_prefix();
 ?>
-<?php if ( tainacan_has_document() && !get_theme_mod( 'tainacan_single_item_gallery_mode', false )) : ?>
+<?php if ( tainacan_has_document() && get_theme_mod($prefix . '_gallery_mode', 'no') != 'yes') : ?>
     <div>
         <?php if ( get_theme_mod($prefix . '_display_section_labels', 'yes') == 'yes' && get_theme_mod($prefix . '_section_document_label', __( 'Document', 'blocksy-tainacan' )) != '' ) : ?>
             <h2 class="title-content-items" id="single-item-document-label">
                 <?php echo esc_html( get_theme_mod($prefix . '_section_document_label', __( 'Document', 'blocksy-tainacan' ) ) ); ?>
             </h2>
         <?php endif; ?>
-        <section class="tainacan-content single-item-collection margin-two-column">
+        <section class="tainacan-content single-item-collection">
             <div class="single-item-collection--document">
                 <?php 
                     tainacan_the_document(); 

template-parts/single-items-metadata.php

@@ -7,7 +7,7 @@
             <?php echo esc_html( get_theme_mod($prefix . '_section_metadata_label', __( 'Metadata', 'blocksy-tainacan' ) ) ); ?>
         </h2>
     <?php endif; ?>
-    <section class="tainacan-content single-item-collection margin-two-column">
+    <section class="tainacan-content single-item-collection">
         <div class="single-item-collection--information justify-content-center">
             <div class="row">
                 <div class="col single-item-collection--metadata" style="column-width: <?php echo get_theme_mod( $prefix . '_metadata_columns', ['mobile' => '200px', 'tablet' => '300px', 'desktop' => '400px' ] )['desktop'] ?>">