Adds basic carousel to attachments list on single item page. More customizer compatibility to archive pages.

functions.php

@@ -3,6 +3,9 @@ if (! defined('WP_DEBUG')) {
 	die( 'Direct access forbidden.' );
 }
 
+/** Theme version */
+const BLOCKSY_TAINACAN_VERSION = '0.0.1';
+
 /**
  * Enqueue scripts and styles.
  */
@@ -14,21 +17,6 @@ add_action( 'wp_enqueue_scripts', function () {
 	);
 });
 
-
-/**
- * Filters the content if we're in a single item page.
- */
-function blocksy_tainacan_filter_the_content_in_the_main_loop( $content ) {
-
-    if ( is_singular() && in_the_loop() && is_main_query() && function_exists('tainacan_get_item') && tainacan_get_item(get_the_ID()) != null ) {
-        return get_template_part( 'template-parts/single-items-page' );
-    }
- 
-    return $content;
-}
-add_filter( 'the_content', 'blocksy_tainacan_filter_the_content_in_the_main_loop', 10, 1 );
-
-
 /**
  * Retrieves an item adjacent link, either using WP strategy or Tainacan plugin tainacan_get_adjacent_items()
  */
@@ -190,4 +178,21 @@ function blocksy_tainacan_custom_post_types_supported_list( $potential_post_type
 	}
 	return $potential_post_types;
 }
-add_filter( 'blocksy:custom_post_types:supported_list', 'blocksy_tainacan_custom_post_types_supported_list', 10 );
+add_filter( 'blocksy:custom_post_types:supported_list', 'blocksy_tainacan_custom_post_types_supported_list', 10 );
+
+
+/**
+ * Enqueues js scripts related to swiper, only if in TainacanSingleItem pages
+ */
+function blocksy_tainacan_swiper_scripts() {
+	if ( defined ('TAINACAN_VERSION') ) {
+		$collections_post_types = \Tainacan\Repositories\Repository::get_collections_db_identifiers();
+		$post_type = get_post_type();
+
+		if ( in_array($post_type, $collections_post_types) ) {
+			wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), BLOCKSY_TAINACAN_VERSION, true );	
+			wp_enqueue_script( 'blocksy-tainacan-scripts', get_stylesheet_directory_uri() . '/js/attachments-carousel.js', ['swiper'], BLOCKSY_TAINACAN_VERSION, true );
+		}
+	}
+}
+add_action( 'wp_enqueue_scripts', 'blocksy_tainacan_swiper_scripts' );

js/attachments-carousel.js

@@ -0,0 +1,22 @@
+const attachmentsThumbsSwiper = new Swiper('.swiper-container-thumbs', {
+  spaceBetween: 10,
+  slidesPerView: 6,
+  freeMode: true,
+  watchSlidesVisibility: true,
+  watchSlidesProgress: true,
+  watchOverflow: true,
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+});
+const attachmentsMainSwiper = new Swiper('.swiper-container-main', {
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+  thumbs: {
+    swiper: attachmentsThumbsSwiper
+  },
+  watchOverflow: true
+});

sass/tainacan-item-archive.scss

@@ -51,6 +51,10 @@
     .tainacan-list-container .tainacan-list {
         background-color: var(--tainacan-item-background-color, white) !important;
     }
+    .tainacan-masonry-container .tainacan-masonry-item {
+        display: flex !important;
+        flex-direction: column-reverse;
+    }
     .tainacan-cards-container .tainacan-card {
         min-height: 215px;
         max-height: 215px;
@@ -65,6 +69,7 @@
         }
     }
     .tainacan-table {
+        padding: 0 12px;
         .column-main-content p { 
             font-weight: 500;
         }
@@ -92,6 +97,7 @@
         grid-area: itemslist;
         justify-self: start;
         align-self: normal;
+        width: 100%;
 
         .modal-content {
             padding: 16px 10px;
@@ -115,6 +121,7 @@
         grid-area: itemslist;
         justify-self: end;
         align-self: normal;
+        width: 100%;
 
         #items-list-results {
             .table-container {
@@ -212,6 +219,12 @@ body:not(.tainacan-admin-page) {
     background-size: cover;
     background-repeat: no-repeat;
 
+    // We also apply this here as we want to keep the same style of the .theme-items-list
+    --tainacan-secondary: var(--paletteColor1, #3eaf7c);
+    --tainacan-primary: var(--formBorderInitialColor, #e0e5eb);
+    --tainacan-background-color: var(--backgroundColor, #f8f9fb);
+    --tainacan-item-background-color: var(--cardBackground, white);
+
     .tainacan-collection-header__box {
         width: var(--maxSiteWidth, 1290px);
         border-radius: var(--borderRadius,3px);
@@ -220,9 +233,15 @@ body:not(.tainacan-admin-page) {
         box-shadow: var(--boxShadow,0 12px 18px -6px rgba(34,56,101,.04));
 
         h1 {
-            margin-bottom: 12px;
+            margin-bottom: 4px;
             display: inline-block;
         }
+        .ct-title-label {
+            font-weight: normal;
+            &::after {
+                content: ': ';
+            }
+        }
         .collection-thumbnail {
             max-width: var(--tainacan-filter-menu-width-theme, 20%);
             float: left;

sass/tainacan-item-single.scss

@@ -20,6 +20,9 @@
     h6 {
         --fontSize: 16px;
     }
+    section{
+        margin-bottom: 2.25rem;
+    }
     .tainacan-item-file-download {
         position: absolute;
         opacity: 0;
@@ -102,6 +105,83 @@
             }
         }
     }
+    .single-item-collection--gallery-items {
+        font-weight: normal;
+        transition: font-weight 0.3s ease;
+
+        img {
+            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 {
+            .tainacan-item-file-download {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+    } 
+    .single-item-collection--gallery-items,
+    .single-item-collection--attachments {
+        .single-item-collection--attachments-file {
+            margin: 10px;
+            text-align: center;
+            display: inline-block;
+            vertical-align: top;
+            cursor: pointer;
+            word-break: break-all;
+            font-size: 0.875em;
+            padding: 0 14px;
+            
+            @media only screen and (max-width: 380px) {
+                margin: 10px 0;
+            }
+
+            img {
+                width: 125px;
+                height: 125px;
+                display: inline-block;
+                object-fit: cover;
+                &:focus {
+                    outline: none;
+                }
+            }
+            a {
+                width: 100%;
+                max-width: 125px;
+                margin: 0 auto;
+                display: inline-block;
+                font-size: 0.875rem; 
+                text-align: center;
+                word-break: break-all;
+                line-height: 1.5rem
+            }
+            a,
+            a:focus,
+            a:hover {
+                outline: none;
+                text-decoration: none;
+                cursor: pointer;
+                color: black;
+            }
+            .attachment-without-image img {
+                padding: 36px;
+                background-color: #dbdbdb;
+                object-fit: contain;
+            }
+            .item-card--thumbnail {
+                margin: 0 0 4px 0 !important;
+            }
+        }
+    }
     .s-item-collection--metadata {
         height: 100%;
         

style.css

@@ -84,6 +84,11 @@
   background-color: var(--tainacan-item-background-color, white) !important;
 }
 
+.theme-items-list .tainacan-masonry-container .tainacan-masonry-item {
+  display: flex !important;
+  flex-direction: column-reverse;
+}
+
 .theme-items-list .tainacan-cards-container .tainacan-card {
   min-height: 215px;
   max-height: 215px;
@@ -98,6 +103,10 @@
   line-height: 1.25em;
 }
 
+.theme-items-list .tainacan-table {
+  padding: 0 12px;
+}
+
 .theme-items-list .tainacan-table .column-main-content p {
   font-weight: 500;
 }
@@ -123,6 +132,7 @@
   grid-area: itemslist;
   justify-self: start;
   align-self: normal;
+  width: 100%;
 }
 
 .theme-items-list #filters-modal .modal-content {
@@ -145,6 +155,7 @@
   grid-area: itemslist;
   justify-self: end;
   align-self: normal;
+  width: 100%;
 }
 
 .theme-items-list #items-list-area #items-list-results .table-container {
@@ -237,6 +248,10 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
   background-color: var(--backgroundColor, #f8f9fb);
   background-size: cover;
   background-repeat: no-repeat;
+  --tainacan-secondary: var(--paletteColor1, #3eaf7c);
+  --tainacan-primary: var(--formBorderInitialColor, #e0e5eb);
+  --tainacan-background-color: var(--backgroundColor, #f8f9fb);
+  --tainacan-item-background-color: var(--cardBackground, white);
 }
 
 .tainacan-collection-header .tainacan-collection-header__box {
@@ -248,10 +263,18 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
 }
 
 .tainacan-collection-header .tainacan-collection-header__box h1 {
-  margin-bottom: 12px;
+  margin-bottom: 4px;
   display: inline-block;
 }
 
+.tainacan-collection-header .tainacan-collection-header__box .ct-title-label {
+  font-weight: normal;
+}
+
+.tainacan-collection-header .tainacan-collection-header__box .ct-title-label::after {
+  content: ': ';
+}
+
 .tainacan-collection-header .tainacan-collection-header__box .collection-thumbnail {
   max-width: var(--tainacan-filter-menu-width-theme, 20%);
   float: left;
@@ -287,6 +310,10 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
   --fontSize: 16px;
 }
 
+.single-item-data-section section {
+  margin-bottom: 2.25rem;
+}
+
 .single-item-data-section .tainacan-item-file-download {
   position: absolute;
   opacity: 0;
@@ -376,6 +403,98 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
   bottom: 0;
 }
 
+.single-item-data-section .single-item-collection--gallery-items {
+  font-weight: normal;
+  transition: font-weight 0.3s ease;
+}
+
+.single-item-data-section .single-item-collection--gallery-items img {
+  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-items .single-item-collection--attachments-file,
+.single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file {
+  margin: 10px;
+  text-align: center;
+  display: inline-block;
+  vertical-align: top;
+  cursor: pointer;
+  word-break: break-all;
+  font-size: 0.875em;
+  padding: 0 14px;
+}
+
+@media only screen and (max-width: 380px) {
+  .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 {
+    margin: 10px 0;
+  }
+}
+
+.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: 125px;
+  height: 125px;
+  display: inline-block;
+  object-fit: cover;
+}
+
+.single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file img:focus,
+.single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file img:focus {
+  outline: none;
+}
+
+.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: 125px;
+  margin: 0 auto;
+  display: inline-block;
+  font-size: 0.875rem;
+  text-align: center;
+  word-break: break-all;
+  line-height: 1.5rem;
+}
+
+.single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file a,
+.single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file a:focus,
+.single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file a:hover,
+.single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file a,
+.single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file a:focus,
+.single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file a:hover {
+  outline: none;
+  text-decoration: none;
+  cursor: pointer;
+  color: black;
+}
+
+.single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file .attachment-without-image img,
+.single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file .attachment-without-image img {
+  padding: 36px;
+  background-color: #dbdbdb;
+  object-fit: contain;
+}
+
+.single-item-data-section .single-item-collection--gallery-items .single-item-collection--attachments-file .item-card--thumbnail,
+.single-item-data-section .single-item-collection--attachments .single-item-collection--attachments-file .item-card--thumbnail {
+  margin: 0 0 4px 0 !important;
+}
+
 .single-item-data-section .s-item-collection--metadata {
   height: 100%;
 }

tainacan/archive-items.php

@@ -10,27 +10,16 @@
                         <img src="<?php echo get_the_post_thumbnail_url( tainacan_get_collection_id() ); ?>" alt="<?php echo esc_attr($alt); ?>">
                     </div>
                 <?php endif; ?>
-                <h1 class="entry-title">
+                <?php 
-                    <?php tainacan_the_collection_name(); ?>
+                    echo blocksy_output_hero_section( 'type-1' );
-                </h1>
+                ?>
-                <?php $tainacan_collection_description = tainacan_get_the_collection_description(); ?>
-                <?php if ( ! empty( $tainacan_collection_description )) : ?>
-                    <?php if (has_post_thumbnail( tainacan_get_collection_id() )): ?>
-                        <div class="entry-description">
-                    <?php else: ?>
-                        <div class="entry-description">
-                    <?php endif; ?>
-                        <?php tainacan_the_collection_description(); ?>
-                    </div>
-                <?php endif; ?> 
             </div>
         </header>		
 
         <div class="entry-content">										
             <?php 
                 tainacan_the_faceted_search([
-                    'show-filters-button-inside-search-control' => true,
+                    'show-filters-button-inside-search-control' => true
-                    'filters-as-modal' => false
                 ]); 
             ?>
         </div>

tainacan/archive-repository.php

@@ -1,18 +1,23 @@
 <?php get_header(); ?>
 
     <article class="page type-page hentry singular">
-        <header class="entry-header has-text-align-center">
+
-            <div class="entry-header-inner section-inner medium">  
+        <header class="tainacan-collection-header">
-                <h1 class="entry-title">
+            <div class="tainacan-collection-header__box">  
-                    <?php the_archive_title(); ?>
+                <?php 
-                </h1>
+                    echo blocksy_output_hero_section( 'type-1' );
+                ?>
             </div>
         </header>
+
         <div class="entry-content">										
             <?php 
-                tainacan_the_faceted_search(); 
+                tainacan_the_faceted_search([
+                    'show-filters-button-inside-search-control' => true
+                ]); 
             ?>
         </div>
+
     </article>
     
 <?php get_footer(); ?>

tainacan/archive-taxonomy.php

@@ -4,40 +4,30 @@
 	$current_term = tainacan_get_term();
 	$current_taxonomy = get_taxonomy( $current_term->taxonomy );
 	$current_term = \Tainacan\Repositories\Terms::get_instance()->fetch($current_term->term_id, $current_term->taxonomy);
-	$image =  $current_term->get_header_image_id();
+	$image = $current_term->get_header_image_id();
 	$src = wp_get_attachment_image_src($image, 'full');
 ?>
 
     <article class="page type-page hentry singular">
-        <header class="entry-header has-text-align-center">
+
-            <div class="entry-header-inner section-inner medium">                     
+        <header class="tainacan-collection-header">
-                <h1 class="entry-title">
+            <div class="tainacan-collection-header__box">  
-                    <span style="font-weight: normal;">
+                <?php if ($src && $src[0]) : ?>
-                        <?php echo $current_taxonomy->labels->name . ':'; ?>
+                    <div class="collection-thumbnail">
-                    </span>
+                        <img src="<?php echo($src[0]) ?>">
-                    <?php tainacan_the_term_name(); ?>
-                </h1>
-                <br> 
-                <?php $tainacan_term_description = tainacan_get_the_term_description(); ?>
-                <?php if ( ! empty( $tainacan_term_description )) : ?>
-                    <?php if ($src): ?>
-                        <div class="entry-description">
-                    <?php else: ?>
-                        <div class="entry-description">
-                    <?php endif; ?>
-                        <?php echo $tainacan_term_description; ?>
                     </div>
                 <?php endif; ?>
-            </div> 
+                <?php 
-        </header>
+                    echo blocksy_output_hero_section( 'type-1' );
-        <?php if ($src && $src[0]) : ?>
+                ?>
-            <div class="tainacan-taxonomy-header">
-                <img src="<?php echo($src[0]) ?>" alt="Imagem do termo">
             </div>
-        <?php endif; ?>
+        </header>	
+
         <div class="entry-content">										
             <?php 
-                tainacan_the_faceted_search(); 
+                tainacan_the_faceted_search([
+                    'show-filters-button-inside-search-control' => true
+                ]); 
             ?>
         </div>
     </article>

template-parts/single-items-attachments.php

@@ -15,10 +15,6 @@
             )
         );
     }
-
-    function get_attachment_id($attachment) {
-        return $attachment->ID;
-    }
 ?>
 
 <?php if ( !empty( $attachments )  || ( get_theme_mod( 'tainacan_single_item_gallery_mode', false) && tainacan_has_document() )) : ?>
@@ -89,41 +85,34 @@
                     </div>
                 <?php endif; ?>
             <?php else : ?>
-                <div class="single-item-collection--attachments">
+                <div class="single-item-collection--attachments swiper-container-thumbs">
-                    <?php 
+                    <div class="swiper-wrapper">
-                        echo blocksy_flexy([
+                        <?php foreach ( $attachments as $attachment ) { ?>
-                            'images' => array_map('get_attachment_id', $attachments),
+                            <?php
-                            'size'  => 'full',
+                            if ( function_exists('tainacan_get_attachment_html_url') ) {
-                            'pills_images' => array_map('get_attachment_id', $attachments),
+                                $href = tainacan_get_attachment_html_url($attachment->ID);
-                            'pills_count' => '6'
+                            } else {
-                        ]);
+                                $href = wp_get_attachment_url($attachment->ID, 'large');
-                    ?>
+                            }
-                    
+                            ?>
-                    <?php /*
+                            <div class="single-item-collection--attachments-file swiper-slide">
-                    foreach ( $attachments as $attachment ) { ?>
+                                <a 
-                        <?php
+                                    class="<?php if (!wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments')) echo'attachment-without-image'; ?>"
-                        if ( function_exists('tainacan_get_attachment_html_url') ) {
+                                    href="<?php echo $href; ?>"
-                            $href = tainacan_get_attachment_html_url($attachment->ID);
+                                    data-toggle="lightbox"
-                        } else {
+                                    data-gallery="example-gallery">
-                            $href = wp_get_attachment_url($attachment->ID, 'large');
+                                    <?php
-                        }
+                                        echo wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
-                        ?>
+                                        echo '<br>';
-                        <div class="single-item-collection--attachments-file">
+                                    ?>
-                            <a 
+                                    <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>
-                                class="<?php if (!wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments')) echo'attachment-without-image'; ?>"
+                                </a>
-                                href="<?php echo $href; ?>"
+                            </div>
-                                data-toggle="lightbox"
+                        <?php } ?>
-                                data-gallery="example-gallery">
+
-                                <?php
+                        <div class="swiper-button-prev"></div>
-                                    echo wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments', true );
+                        <div class="swiper-button-next"></div>
-                                    echo '<br>';
+                    </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>
-                            </a>
-                        </div>
-                    <?php }
-                    */
-                    ?>
                 </div>
             <?php endif; ?>
         </section>