Adds gallery view mode. Improvements to carousel lightbox.
This commit is contained in:
mateuswetah
parent
978678310b
commit
60f6894338
|
|
@ -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( 'blocksy-tainacan-scripts__swiper', get_stylesheet_directory_uri() . '/js/attachments-carousel.js', ['swiper'], BLOCKSY_TAINACAN_VERSION, true );
|
||||
wp_enqueue_script( 'swiper', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), 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 );
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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
|
||||
])
|
||||
]
|
||||
];
|
||||
|
|
@ -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 +0,0 @@
|
|||
import { render, createElement, Component, Fragment } from '@wordpress/element'
|
||||
|
|
@ -21,5 +21,6 @@
|
|||
"devDependencies": {
|
||||
"clean-css-cli": "^4.3.0",
|
||||
"node-sass": "^4.14.1"
|
||||
}
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
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;
|
||||
|
||||
&:after {
|
||||
filter: drop-shadow(0px 0px 1px white);
|
||||
}
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: -30px;
|
||||
transition: left 0.3s ease;
|
||||
& > iframe {
|
||||
min-height: 80vh;
|
||||
width: 80%;
|
||||
border: none;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: -30px;
|
||||
transition: right 0.3s ease;
|
||||
|
||||
& > a,
|
||||
& > p {
|
||||
z-index: 99;
|
||||
padding: 1rem 4.33337vw;
|
||||
background: white;
|
||||
border-radius: var(--borderRadius, 3px);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
&:hover {
|
||||
.swiper-button-prev {
|
||||
left: 10px;
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 10px;
|
||||
}
|
||||
& > audio,
|
||||
& > video {
|
||||
min-height: 54px;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
123
style.css
123
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;
|
||||
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 */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,6 @@
|
|||
<?php
|
||||
|
||||
$prefix = blocksy_manager()->screen->get_prefix();
|
||||
|
||||
?>
|
||||
|
||||
<?php get_header(); ?>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<?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">
|
||||
<?php if ( tainacan_has_document() ) : ?>
|
||||
<section class="tainacan-content single-item-collection margin-two-column">
|
||||
<div class="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>
|
||||
<?php endif; ?>
|
||||
<?php foreach ( $attachments as $attachment ) { ?>
|
||||
<section class="tainacan-content single-item-collection margin-two-column">
|
||||
<div class="single-item-collection--document">
|
||||
<?php
|
||||
if ( function_exists('tainacan_get_single_attachment_as_html') ) {
|
||||
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) != '' ) {
|
||||
echo '<span class="tainacan-item-file-download">' . tainacan_the_item_attachment_download_link($attachment->ID) . '</span>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</section>
|
||||
<?php } ?>
|
||||
<div class="swiper-container-main swiper-container">
|
||||
<ul class="swiper-wrapper">
|
||||
<?php if ( tainacan_has_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>';
|
||||
}
|
||||
?>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<?php foreach ( $attachments as $attachment ) { ?>
|
||||
<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);
|
||||
}
|
||||
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>';
|
||||
}
|
||||
?>
|
||||
</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">
|
||||
<?php if ( tainacan_has_document() ) : ?>
|
||||
<div class="single-item-collection--attachments-file">
|
||||
<?php
|
||||
the_post_thumbnail('tainacan-medium-full', 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>
|
||||
<?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>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<div class="swiper-container-thumbs swiper-container">
|
||||
<ul class="swiper-wrapper">
|
||||
<?php if ( tainacan_has_document() ) : ?>
|
||||
<li class="single-item-collection--attachments-file swiper-slide">
|
||||
<?php
|
||||
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>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<?php foreach ( $attachments as $attachment ) {
|
||||
render_attachment_thumbnail_slide_item($attachment);
|
||||
} ?>
|
||||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
<?php } ?>
|
||||
<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>
|
||||
|
||||
<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; ?>
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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'] ?>">
|
||||
|
|
|
|||
Loading…
Reference in New Issue