Adds thumbnail options to items single page navigation.

src/assets/scss/_post.scss

@@ -899,6 +899,46 @@
         }
     }
 }
+#item-single-navigation {
+    .pagination {
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+    a {
+        position: relative;
+        left: 0;
+        transition: left 0.3s ease;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+    a[rel=prev]:hover {
+        left: -7px;
+    }
+    a[rel=next]:hover {
+        left: 7px;
+    }
+    a.has-small-thumbnail img {
+        height: 38px;
+        width: auto;
+        margin: 0.5rem;
+    }
+    a.has-large-thumbnail {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    a.has-large-thumbnail img {
+        height: 170px;
+        width: auto;
+        margin: 0.5rem;
+    }
+    @media screen and (max-width: 768px) {
+        a.has-large-thumbnail img {
+            height: 84px;
+        }
+    }
+}
 .tainacan-heading-section-pattern-pattern {
     h1,
     h2,

src/functions/customizer.php

@@ -630,19 +630,20 @@ function tainacan_customize_register( $wp_customize ) {
 		/**
 		 * Adds options to display previous/next links on item single page.
 		 */
-		$wp_customize->add_setting( 'tainacan_single_item_show_next_previous_links', array(
+		$wp_customize->add_setting( 'tainacan_single_item_navigation_options', array(
 			'type' 		 => 'theme_mod',
 			'capability' => 'edit_theme_options',
-			'default' 	 => false,
+			'default' 	 => 'none',
 			'transport'  => 'refresh',
-			'sanitize_callback' => 'tainacan_callback_sanitize_checkbox'
+			'sanitize_callback' => 'tainacan_sanitize_single_item_navigation_links_options',
 			) );
-		$wp_customize->add_control( 'tainacan_single_item_show_next_previous_links', array(
+		$wp_customize->add_control( 'tainacan_single_item_navigation_options', array(
-			'type' 	   	  => 'checkbox',
+			'type' 	   	  => 'select',
 			'priority' 	  => 3, // Within the section.
 			'section'  	  => 'tainacan_single_item_page',
-			'label'    	  => __( 'Show previous and next items links', 'tainacan-interface' ),
+			'label'    	  => __( 'Navigation links to other items', 'tainacan-interface' ),
-			'description' => __( 'Toggle to display previous and next items links at te end of the page. This pagination is sorted by creation date only.', 'tainacan-interface' )
+			'description' => __( 'Sets how next and previous items links will be displayed. This links only obey creation date order inside their collection.', 'tainacan-interface' ),
+			'choices'	  => tainacan_get_single_item_navigation_links_options()
 			) );
 
 		if (version_compare(TAINACAN_VERSION, '0.16RC') >= 0) {
@@ -1361,7 +1362,7 @@ endif; // tainacan_get_single_item_layout_sections_order_options
 
 if ( ! function_exists( 'tainacan_sanitize_single_item_layout_sections_order' ) ) :
 	/**
-	 * Handles sanitization for Tainacan Themeitem page laout sections order
+	 * Handles sanitization for Tainacan Themeitem page layout sections order
 	 *
 	 * Create your own tainacan_sanitize_single_item_layout_sections_order() function to override
 	 * in a child theme.
@@ -1382,6 +1383,51 @@ if ( ! function_exists( 'tainacan_sanitize_single_item_layout_sections_order' )
 	}
 endif; // tainacan_sanitize_single_item_layout_sections_order
 
+if ( ! function_exists( 'tainacan_get_single_item_navigation_links_options' ) ) :
+	/**
+	 * Retrieves an array of options for single item page navigation options for Tainacan Theme.
+	 *
+	 * Create your own tainacan_get_single_item_navigation_links_options() function to override
+	 * in a child theme.
+	 *
+	 * @since Tainacan Theme
+	 *
+	 * @return array $option - a string with options for displaying the naviation links.
+	 */
+	function tainacan_get_single_item_navigation_links_options() {
+		$navigation_options = array(
+			'none' => __('Do not display items links', 'tainacan-interface'),
+			'link' => __('Show only items Link', 'tainacan-interface'),
+			'thumbnail_small' => __('Show items links with a small thumbnail', 'tainacan-interface'),
+			'thumbnail_large' => __('Show items links with a large thumbnail', 'tainacan-interface'),
+		);
+		return $navigation_options;
+	}
+endif; // tainacan_get_single_item_navigation_links_options
+
+if ( ! function_exists( 'tainacan_sanitize_single_item_navigation_links_options' ) ) :
+	/**
+	 * Handles sanitization for Tainacan Theme item page navigation link options
+	 *
+	 * Create your own tainacan_sanitize_single_item_navigation_links_options() function to override
+	 * in a child theme.
+	 *
+	 * @since Tainacan Theme
+	 *
+	 * @param string $option - a string with options for displaying the naviation links.
+	 * @return string the selected option.
+	 */
+	function tainacan_sanitize_single_item_navigation_links_options( $option ) {
+		$navigation_options = tainacan_get_single_item_navigation_links_options();
+
+		if ( ! array_key_exists( $option, $navigation_options ) ) {
+			return 'none';
+		}
+
+		return $option;
+	}
+endif; // tainacan_sanitize_single_item_navigation_links_options
+
 /**
  * Enqueues front-end CSS for color scheme.
  *

src/tainacan/single-items.php

@@ -53,17 +53,8 @@
 							}
 							echo '</div>';
 						?>
-						
+
-						<?php if (get_theme_mod('tainacan_single_item_show_next_previous_links', false)): ?>
+						<?php get_template_part( 'template-parts/single-items-navigation' ); ?>
-							<div id="item-single-navigation" class="d-flex margin-pagination justify-content-between mt-0">
-								<div class="pagination">
-									<?php previous_post_link('<i class="tainacan-icon tainacan-icon-arrowleft tainacan-icon-1-25em"></i>&nbsp; %link'); ?>
-								</div>
-								<div class="pagination">
-									<?php next_post_link('%link &nbsp;<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-1-25em"></i>'); ?>
-								</div> 
-							</div>
-						<?php endif; ?>
 
 						<?php get_template_part( 'template-parts/single-items-comments' ); ?>
 

src/template-parts/single-items-navigation.php

@@ -0,0 +1,67 @@
+<?php 
+    $previous = '<i class="tainacan-icon tainacan-icon-arrowleft tainacan-icon-30px"></i>&nbsp; %link';
+    $next = '%link &nbsp;<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-30px"></i>';
+
+    switch (get_theme_mod('tainacan_single_item_navigation_options', 'none')) {
+
+        case 'link':
+        break;
+        case 'thumbnail_small':
+            //Get the thumnail url of the previous and next post
+            $previous_thumb = get_the_post_thumbnail_url( get_previous_post(), 'tainacan-small' );
+            $next_thumb = get_the_post_thumbnail_url( get_next_post(), 'tainacan-small' );
+
+            //Get the links to the Previous and Next Post
+            $previous_link_url = get_permalink( get_previous_post() );
+            $next_link_url = get_permalink( get_next_post() );
+
+            //Get the title of the previous post and next post
+            $previous_title = get_the_title( get_previous_post() );
+            $next_title = get_the_title( get_next_post() );
+
+            // Creates the links
+            $previous = '<i class="tainacan-icon tainacan-icon-arrowleft tainacan-icon-30px"></i>&nbsp;' . 
+                '<a class="has-small-thumbnail" rel="prev" href="' . $previous_link_url . '">' . $previous_title . 
+                    '<img src="' . $previous_thumb . '" alt="">' .
+                '</a>';
+            $next = '<a class="has-small-thumbnail" rel="next" href="' . $next_link_url . '">' . 
+                    '<img src="' . $next_thumb . '" alt="">' . $next_title . 
+                '</a>' . '&nbsp;<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-30px"></i>';
+        break;
+        case 'thumbnail_large':
+            //Get the thumnail url of the previous and next post
+            $previous_thumb = get_the_post_thumbnail_url( get_previous_post(), 'tainacan-medium' );
+            $next_thumb = get_the_post_thumbnail_url( get_next_post(), 'tainacan-medium' );
+
+            //Get the links to the Previous and Next Post
+            $previous_link_url = get_permalink( get_previous_post() );
+            $next_link_url = get_permalink( get_next_post() );
+
+            //Get the title of the previous post and next post
+            $previous_title = get_the_title( get_previous_post() );
+            $next_title = get_the_title( get_next_post() );
+
+            // Creates the links
+            $previous = '<i class="tainacan-icon tainacan-icon-arrowleft tainacan-icon-36px"></i>&nbsp;' . 
+                '<a class="has-large-thumbnail" rel="prev" href="' . $previous_link_url . '">' .
+                    '<img src="' . $previous_thumb . '" alt="">' . $previous_title . 
+                '</a>';
+            $next = '<a class="has-large-thumbnail" rel="next" href="' . $next_link_url . '">' . 
+                    '<img src="' . $next_thumb . '" alt="">' . $next_title . 
+                '</a>' . '&nbsp;<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-36px"></i>';
+        break;
+        case 'none':
+        default:
+        return '';
+
+    } 
+?>
+
+<div id="item-single-navigation" class="d-flex margin-pagination justify-content-between mt-0">
+    <div class="pagination">
+        <?php previous_post_link($previous); ?>
+    </div>
+    <div class="pagination">
+        <?php next_post_link($next); ?>
+    </div>
+</div>