tmdinosaurcenter
/
blocksy-tainacan
mirror of https://github.com/tainacan/blocksy-tainacan.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds gallery view mode. Improvements to carousel lightbox.

This commit is contained in:
mateuswetah 2020-12-28 16:39:26 -03:00
parent 978678310b
commit 60f6894338
15 changed files with 597 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
functions.php
View File

@ -513,7 +513,11 @@ 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( '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 );

4
inc/options/posts/tainacan-item-single.php
View File

@ -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'

24
inc/options/single-elements/gallery-mode.php Normal file
View File

@ -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
])
]
];

237
js/attachments-carousel.js
View File

@ -1,6 +1,6 @@
const attachmentsThumbsSwiper = new Swiper('.swiper-container-thumbs', {
spaceBetween: 15,
slidesPerView: 7,
spaceBetween: 12,
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
},
watchOverflow: true
swiper: attachmentsThumbsSwiper,
autoScrollOffset: 1
}
});
// 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");

1
js/scripts.js
View File

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

3
package.json
View File

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

116
sass/tainacan-item-single.scss
View File

@ -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 {
@ -130,23 +125,66 @@
}
}
}
.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;
height: 130px;
border-radius: var(--borderRadius, 3px);
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);
--swiper-navigation-color: var(--paletteColor1, #3eaf7c);
.swiper-container {
.swiper-button-disabled {
display: none;
}
.swiper-button-next,
.swiper-button-prev {
top: calc(130px/2);
// Photoswip zoom
.pswp__zoom-wrap .attachment-without-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
& > iframe {
min-height: 80vh;
width: 80%;
border: none;
}
& > a,
& > p {
z-index: 99;
padding: 1rem 4.33337vw;
background: white;
border-radius: var(--borderRadius, 3px);
word-wrap: break-word;
}
& > audio,
& > video {
min-height: 54px;
padding: 12px;
}
&:after {
filter: drop-shadow(0px 0px 1px white);
}
}
.swiper-button-prev {
left: -30px;
transition: left 0.3s ease;
}
.swiper-button-next {
right: -30px;
transition: right 0.3s ease;
}
&:hover {
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
}
}
}

123
style.css
View File

@ -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;
height: 130px;
border-radius: var(--borderRadius, 3px);
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 {
display: none;
.single-item-data-section .pswp__zoom-wrap .attachment-without-image {
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 .swiper-container .swiper-button-prev {
top: calc(130px/2);
.single-item-data-section .pswp__zoom-wrap .attachment-without-image > iframe {
min-height: 80vh;
width: 80%;
border: none;
}
.single-item-data-section .swiper-container .swiper-button-next:after,
.single-item-data-section .swiper-container .swiper-button-prev:after {
filter: drop-shadow(0px 0px 1px white);
.single-item-data-section .pswp__zoom-wrap .attachment-without-image > a,
.single-item-data-section .pswp__zoom-wrap .attachment-without-image > p {
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 {
left: -30px;
transition: left 0.3s ease;
}
.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;
.single-item-data-section .pswp__zoom-wrap .attachment-without-image > audio,
.single-item-data-section .pswp__zoom-wrap .attachment-without-image > video {
min-height: 54px;
padding: 12px;
}
/*# sourceMappingURL=style.css.map */

4
style.css.map
View File

File diff suppressed because one or more lines are too long

2
style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
style.min.css.map
View File

File diff suppressed because one or more lines are too long

1
tainacan/archive-items.php
View File

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

183
template-parts/single-items-attachments.php
View File

@ -16,38 +16,74 @@
);
}
$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')) :
?>
<?php if ( !empty( $attachments ) || ( get_theme_mod( 'tainacan_single_item_gallery_mode', false) && tainacan_has_document() )) : ?>
<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($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">
<?php if (get_theme_mod( 'tainacan_single_item_gallery_mode', false )): ?>
<section class="tainacan-content single-item-collection">
<?php if ( get_theme_mod($prefix . '_gallery_mode', 'no') == 'yes' ): ?>
<div class="single-item-collection--gallery">
<div class="swiper-container-main swiper-container">
<ul class="swiper-wrapper">
<?php if ( tainacan_has_document() ) : ?>
<section class="tainacan-content single-item-collection margin-two-column">
<div class="single-item-collection--document">
<li class="tainacan-content single-item-collection swiper-slide single-item-collection--document">
<?php
tainacan_the_document();
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 foreach ( $attachments as $attachment ) { ?>
<section class="tainacan-content single-item-collection margin-two-column">
<div class="single-item-collection--document">
<li class="tainacan-content single-item-collection swiper-slide single-item-collection--document">
<?php
if ( function_exists('tainacan_get_single_attachment_as_html') ) {
tainacan_get_single_attachment_as_html($attachment->ID);
@ -56,61 +92,42 @@
echo '<span class="tainacan-item-file-download">' . tainacan_the_item_attachment_download_link($attachment->ID) . '</span>';
}
?>
</div>
</section>
</li>
<?php } ?>
</ul>
</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">
<div class="swiper-container-thumbs swiper-container">
<ul class="swiper-wrapper">
<?php if ( tainacan_has_document() ) : ?>
<div class="single-item-collection--attachments-file">
<li class="single-item-collection--attachments-file swiper-slide">
<?php
the_post_thumbnail('tainacan-medium-full', array('class' => 'item-card--thumbnail'));
the_post_thumbnail('tainacan-medium', array('class' => 'item-card--thumbnail'));
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 __( 'Document', 'blocksy-tainacan' ); ?></span>
</div>
</li>
<?php endif; ?>
<?php foreach ( $attachments as $attachment ) { ?>
<div class="single-item-collection--attachments-file">
<div class="<?php if (!wp_get_attachment_image( $attachment->ID, 'blocksy-tainacan-item-attachments')) echo'attachment-without-image'; ?>">
<?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>
<?php foreach ( $attachments as $attachment ) {
render_attachment_thumbnail_slide_item($attachment);
} ?>
</ul>
</div>
</div>
<?php } ?>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<?php endif; ?>
<?php else : ?>
<div class="single-item-collection--attachments swiper-container-thumbs swiper-container">
<div class="swiper-wrapper">
<?php foreach ( $attachments as $attachment ) { ?>
<?php
if ( function_exists('tainacan_get_attachment_html_url') ) {
$href = tainacan_get_attachment_html_url($attachment->ID);
} else {
$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 class="single-item-collection--attachments">
<div class="swiper-container-thumbs swiper-container">
<ul class="swiper-wrapper">
<?php foreach ( $attachments as $attachment ) {
render_attachment_thumbnail_slide_item($attachment);
} ?>
</ul>
</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; ?>

4
template-parts/single-items-document.php
View File

@ -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();

2
template-parts/single-items-metadata.php
View File

@ -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'] ?>">