Replaces thumb references for thumbnails size. Adds 0 index access to any thumbnail access. Adds to the item and collection api endpoints thumbnail sizes. Adds skeleton loading to masonry on theme, including image loading.
This commit is contained in:
parent
55e48b52a6
commit
1f0de042f8
|
@ -49,9 +49,9 @@
|
||||||
:size="178"
|
:size="178"
|
||||||
:file="{
|
:file="{
|
||||||
media_type: 'image',
|
media_type: 'image',
|
||||||
guid: { rendered: collection.thumbnail.tainacan_medium ? collection.thumbnail.tainacan_medium : collection.thumbnail.medium },
|
guid: { rendered: collection.thumbnail.tainacan_medium ? collection.thumbnail.tainacan_medium[0] : collection.thumbnail.medium[0] },
|
||||||
title: { rendered: $i18n.get('label_thumbnail')},
|
title: { rendered: $i18n.get('label_thumbnail')},
|
||||||
description: { rendered: `<img alt='Thumbnail' src='` + collection.thumbnail.full + `'/>` }}"/>
|
description: { rendered: `<img alt='Thumbnail' src='` + collection.thumbnail.full[0] + `'/>` }}"/>
|
||||||
<figure
|
<figure
|
||||||
v-if="collection.thumbnail == undefined || ((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail.tainacan_medium == undefined || collection.thumbnail.tainacan_medium == false))"
|
v-if="collection.thumbnail == undefined || ((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail.tainacan_medium == undefined || collection.thumbnail.tainacan_medium == false))"
|
||||||
class="image">
|
class="image">
|
||||||
|
|
|
@ -89,7 +89,7 @@
|
||||||
v-if="item.document!= undefined && item.document != '' && item.document_type != 'empty'"
|
v-if="item.document!= undefined && item.document != '' && item.document_type != 'empty'"
|
||||||
class="document-thumb"
|
class="document-thumb"
|
||||||
:alt="item.title"
|
:alt="item.title"
|
||||||
:src="item.thumbnail.tainacan_small ? item.thumbnail.tainacan_small : (item.thumbnail.thumb ? item.thumbnail.thumb : thumbPlaceholderPath)" >
|
:src="item.thumbnail.tainacan_small ? item.thumbnail.tainacan_small[0] : (item.thumbnail.thumbnail ? item.thumbnail.thumbnail[0] : thumbPlaceholderPath)" >
|
||||||
<span
|
<span
|
||||||
class="document-name"
|
class="document-name"
|
||||||
v-html="item.title" />
|
v-html="item.title" />
|
||||||
|
|
|
@ -264,9 +264,9 @@
|
||||||
:size="178"
|
:size="178"
|
||||||
:file="{
|
:file="{
|
||||||
media_type: 'image',
|
media_type: 'image',
|
||||||
guid: { rendered: item.thumbnail.tainacan_medium ? item.thumbnail.tainacan_medium : item.thumbnail.medium },
|
guid: { rendered: item.thumbnail.tainacan_medium ? item.thumbnail.tainacan_medium[0] : item.thumbnail.medium[0] },
|
||||||
title: { rendered: $i18n.get('label_thumbnail')},
|
title: { rendered: $i18n.get('label_thumbnail')},
|
||||||
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full + `'/>` }}"/>
|
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full[0] + `'/>` }}"/>
|
||||||
<figure
|
<figure
|
||||||
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail.tainacan_medium == undefined || item.thumbnail.tainacan_medium == false))"
|
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail.tainacan_medium == undefined || item.thumbnail.tainacan_medium == false))"
|
||||||
class="image">
|
class="image">
|
||||||
|
@ -286,7 +286,7 @@
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
v-if="item.thumbnail.thumb != undefined && item.thumbnail.thumb != false"
|
v-if="item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
|
||||||
id="button-delete-thumbnail"
|
id="button-delete-thumbnail"
|
||||||
class="button is-rounded is-secondary"
|
class="button is-rounded is-secondary"
|
||||||
:aria-label="$i18n.get('label_button_delete_thumb')"
|
:aria-label="$i18n.get('label_button_delete_thumb')"
|
||||||
|
|
|
@ -45,7 +45,7 @@
|
||||||
v-if="item.document!= undefined && item.document != '' && item.document_type != 'empty'"
|
v-if="item.document!= undefined && item.document != '' && item.document_type != 'empty'"
|
||||||
class="document-thumb"
|
class="document-thumb"
|
||||||
:alt="item.title"
|
:alt="item.title"
|
||||||
:src="item.thumbnail.tainacan_small ? item.thumbnail.tainacan_small : (item.thumbnail.thumb ? item.thumbnail.thumb : thumbPlaceholderPath)" >
|
:src="item.thumbnail.tainacan_small ? item.thumbnail.tainacan_small[0] : (item.thumbnail.thumbnail ? item.thumbnail.thumbnail[0] : thumbPlaceholderPath)" >
|
||||||
<span
|
<span
|
||||||
class="document-name"
|
class="document-name"
|
||||||
v-html="item.title" />
|
v-html="item.title" />
|
||||||
|
|
|
@ -217,7 +217,7 @@
|
||||||
class="card-body">
|
class="card-body">
|
||||||
<img
|
<img
|
||||||
v-if="collection.thumbnail != undefined"
|
v-if="collection.thumbnail != undefined"
|
||||||
:src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium : (collection['thumbnail'].medium ? collection['thumbnail'].medium : thumbPlaceholderPath)">
|
:src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium[0] : (collection['thumbnail'].medium ? collection['thumbnail'].medium[0] : thumbPlaceholderPath)">
|
||||||
|
|
||||||
<!-- Name -->
|
<!-- Name -->
|
||||||
<div class="metadata-title">
|
<div class="metadata-title">
|
||||||
|
|
|
@ -96,7 +96,7 @@
|
||||||
<span>
|
<span>
|
||||||
<img
|
<img
|
||||||
class="table-thumb"
|
class="table-thumb"
|
||||||
:src="collection.thumbnail != undefined ? collection.thumbnail.thumb : thumbPlaceholderPath">
|
:src="(collection.thumbnail && collection.thumbnail.thumbnail ) ? collection.thumbnail.thumbnail[0] : thumbPlaceholderPath">
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<!-- Name -->
|
<!-- Name -->
|
||||||
|
|
|
@ -123,7 +123,7 @@
|
||||||
<a
|
<a
|
||||||
v-if="item.thumbnail != undefined"
|
v-if="item.thumbnail != undefined"
|
||||||
@click="onClickItem($event, item, index)">
|
@click="onClickItem($event, item, index)">
|
||||||
<img :src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium : (item['thumbnail'].medium ? item['thumbnail'].medium : thumbPlaceholderPath)">
|
<img :src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium[0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
|
@ -210,8 +210,8 @@
|
||||||
@click="onClickItem($event, item, index)"
|
@click="onClickItem($event, item, index)"
|
||||||
v-if="item.thumbnail != undefined"
|
v-if="item.thumbnail != undefined"
|
||||||
class="thumbnail"
|
class="thumbnail"
|
||||||
:style="{ backgroundImage: 'url(' + (item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath)) + ')' }">
|
:style="{ backgroundImage: 'url(' + (item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)) + ')' }">
|
||||||
<img :src="item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath)">
|
<img :src="item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
|
@ -329,7 +329,7 @@
|
||||||
|
|
||||||
<img
|
<img
|
||||||
v-if="item.thumbnail != undefined"
|
v-if="item.thumbnail != undefined"
|
||||||
:src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium : (item['thumbnail'].medium ? item['thumbnail'].medium : thumbPlaceholderPath)">
|
:src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium[0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
|
||||||
|
|
||||||
<div class="list-metadata media-body">
|
<div class="list-metadata media-body">
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
|
@ -471,7 +471,7 @@
|
||||||
<div class="thumbnail">
|
<div class="thumbnail">
|
||||||
<img
|
<img
|
||||||
v-if="item.thumbnail != undefined"
|
v-if="item.thumbnail != undefined"
|
||||||
:src="item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath)">
|
:src="item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)">
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
v-for="(column, index) in tableMetadata"
|
v-for="(column, index) in tableMetadata"
|
||||||
|
@ -611,7 +611,7 @@
|
||||||
<span v-if="column.metadatum == 'row_thumbnail'">
|
<span v-if="column.metadatum == 'row_thumbnail'">
|
||||||
<img
|
<img
|
||||||
class="table-thumb"
|
class="table-thumb"
|
||||||
:src="item['thumbnail'].tainacan_small ? item['thumbnail'].tainacan_small : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)">
|
:src="item['thumbnail'].tainacan_small ? item['thumbnail'].tainacan_small[0] : (item['thumbnail'].thumbnail ? item['thumbnail'].thumbnail[0] : thumbPlaceholderPath)">
|
||||||
</span>
|
</span>
|
||||||
<p
|
<p
|
||||||
v-tooltip="{
|
v-tooltip="{
|
||||||
|
|
|
@ -560,12 +560,12 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-show="(isLoadingItems &&
|
v-show="(isLoadingItems &&
|
||||||
!(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen))"
|
!(registeredViewModes[viewMode] != undefined && (registeredViewModes[viewMode].full_screen == true || registeredViewModes[viewMode].implements_skeleton == true)))"
|
||||||
class="loading-container">
|
class="loading-container">
|
||||||
<!--<b-loading
|
<b-loading
|
||||||
:is-full-page="false"
|
:is-full-page="false"
|
||||||
:active="showLoading"/>-->
|
:active="showLoading"/>
|
||||||
<skeleton-items-list v-if="!isOnTheme"/>
|
<!-- <skeleton-items-list v-if="!isOnTheme"/> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div
|
<!-- <div
|
||||||
|
@ -610,7 +610,6 @@
|
||||||
<!-- Theme View Modes -->
|
<!-- Theme View Modes -->
|
||||||
<div
|
<div
|
||||||
v-if="isOnTheme &&
|
v-if="isOnTheme &&
|
||||||
!isLoadingItems &&
|
|
||||||
openAdvancedSearch &&
|
openAdvancedSearch &&
|
||||||
advancedSearchResults &&
|
advancedSearchResults &&
|
||||||
registeredViewModes[viewMode] != undefined &&
|
registeredViewModes[viewMode] != undefined &&
|
||||||
|
@ -619,7 +618,6 @@
|
||||||
|
|
||||||
<component
|
<component
|
||||||
v-if="isOnTheme &&
|
v-if="isOnTheme &&
|
||||||
!isLoadingItems &&
|
|
||||||
registeredViewModes[viewMode] != undefined &&
|
registeredViewModes[viewMode] != undefined &&
|
||||||
registeredViewModes[viewMode].type == 'component' &&
|
registeredViewModes[viewMode].type == 'component' &&
|
||||||
openAdvancedSearch &&
|
openAdvancedSearch &&
|
||||||
|
@ -627,6 +625,7 @@
|
||||||
:collection-id="collectionId"
|
:collection-id="collectionId"
|
||||||
:displayed-metadata="displayedMetadata"
|
:displayed-metadata="displayedMetadata"
|
||||||
:items="items"
|
:items="items"
|
||||||
|
:items-per-page="itemsPerPage"
|
||||||
:total-items="totalItems"
|
:total-items="totalItems"
|
||||||
:is-loading="isLoadingItems"
|
:is-loading="isLoadingItems"
|
||||||
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
|
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
|
||||||
|
@ -635,7 +634,6 @@
|
||||||
<!-- Theme View Modes -->
|
<!-- Theme View Modes -->
|
||||||
<div
|
<div
|
||||||
v-if="isOnTheme &&
|
v-if="isOnTheme &&
|
||||||
!isLoadingItems &&
|
|
||||||
!openAdvancedSearch &&
|
!openAdvancedSearch &&
|
||||||
registeredViewModes[viewMode] != undefined &&
|
registeredViewModes[viewMode] != undefined &&
|
||||||
registeredViewModes[viewMode].type == 'template'"
|
registeredViewModes[viewMode].type == 'template'"
|
||||||
|
@ -645,11 +643,11 @@
|
||||||
v-else-if="isOnTheme &&
|
v-else-if="isOnTheme &&
|
||||||
registeredViewModes[viewMode] != undefined &&
|
registeredViewModes[viewMode] != undefined &&
|
||||||
registeredViewModes[viewMode].type == 'component' &&
|
registeredViewModes[viewMode].type == 'component' &&
|
||||||
(!isLoadingItems || !registeredViewModes[viewMode].show_pagination) &&
|
|
||||||
!openAdvancedSearch"
|
!openAdvancedSearch"
|
||||||
:collection-id="collectionId"
|
:collection-id="collectionId"
|
||||||
:displayed-metadata="displayedMetadata"
|
:displayed-metadata="displayedMetadata"
|
||||||
:items="items"
|
:items="items"
|
||||||
|
:items-per-page="itemsPerPage"
|
||||||
:total-items="totalItems"
|
:total-items="totalItems"
|
||||||
:is-loading="isLoadingItems"
|
:is-loading="isLoadingItems"
|
||||||
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
|
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
|
||||||
|
@ -1241,13 +1239,13 @@
|
||||||
this.isLoadingMetadata = false;
|
this.isLoadingMetadata = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
adjustSearchControlHeight() {
|
adjustSearchControlHeight: _.debounce( function() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (this.$refs['search-control'] != undefined)
|
if (this.$refs['search-control'] != undefined)
|
||||||
this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight + this.$refs['search-control'].offsetTop : 0;
|
this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight + this.$refs['search-control'].offsetTop : 0;
|
||||||
this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
|
this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
|
||||||
});
|
});
|
||||||
},
|
}, 500),
|
||||||
removeEventListeners() {
|
removeEventListeners() {
|
||||||
// Component
|
// Component
|
||||||
this.$off();
|
this.$off();
|
||||||
|
|
|
@ -1170,12 +1170,12 @@
|
||||||
this.isLoadingMetadata = false;
|
this.isLoadingMetadata = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
adjustSearchControlHeight() {
|
adjustSearchControlHeight: _.debounce( function() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight : 0;
|
this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight : 0;
|
||||||
this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
|
this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
|
||||||
});
|
});
|
||||||
}
|
}, 500)
|
||||||
},
|
},
|
||||||
removeEventListeners() {
|
removeEventListeners() {
|
||||||
// Component
|
// Component
|
||||||
|
|
|
@ -91,9 +91,9 @@
|
||||||
:size="178"
|
:size="178"
|
||||||
:file="{
|
:file="{
|
||||||
media_type: 'image',
|
media_type: 'image',
|
||||||
guid: { rendered: item.thumbnail.tainacan_medium ? item.thumbnail.tainacan_medium : item.thumbnail.medium },
|
guid: { rendered: item.thumbnail.tainacan_medium ? item.thumbnail.tainacan_medium[0] : item.thumbnail.medium[0] },
|
||||||
title: { rendered: $i18n.get('label_thumbnail')},
|
title: { rendered: $i18n.get('label_thumbnail')},
|
||||||
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full + `'/>` }}"/>
|
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full[0] + `'/>` }}"/>
|
||||||
<figure
|
<figure
|
||||||
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail.tainacan_medium == undefined || item.thumbnail.tainacan_medium == false))"
|
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail.tainacan_medium == undefined || item.thumbnail.tainacan_medium == false))"
|
||||||
class="image">
|
class="image">
|
||||||
|
|
|
@ -577,24 +577,24 @@ $modal-z: 9999999;
|
||||||
|
|
||||||
// SKELETON GRADIENT ANIMATIONS
|
// SKELETON GRADIENT ANIMATIONS
|
||||||
@-webkit-keyframes skeleton-animation {
|
@-webkit-keyframes skeleton-animation {
|
||||||
0%{background-position:0% 94%}
|
0%{opacity: 1.0}
|
||||||
50%{background-position:100% 7%}
|
50%{opacity: 0.0}
|
||||||
100%{background-position:0% 94%}
|
100%{opacity: 1.0}
|
||||||
}
|
}
|
||||||
@-moz-keyframes skeleton-animation {
|
@-moz-keyframes skeleton-animation {
|
||||||
0%{background-position:0% 94%}
|
0%{opacity: 1.0}
|
||||||
50%{background-position:100% 7%}
|
50%{opacity: 0.0}
|
||||||
100%{background-position:0% 94%}
|
100%{opacity: 1.0}
|
||||||
}
|
}
|
||||||
@-o-keyframes skeleton-animation {
|
@-o-keyframes skeleton-animation {
|
||||||
0%{background-position:0% 94%}
|
0%{opacity: 1.0}
|
||||||
50%{background-position:100% 7%}
|
50%{opacity: 0.0}
|
||||||
100%{background-position:0% 94%}
|
100%{opacity: 1.0}
|
||||||
}
|
}
|
||||||
@keyframes skeleton-animation {
|
@keyframes skeleton-animation {
|
||||||
0%{background-position:0% 94%}
|
0%{opacity: 1.0}
|
||||||
50%{background-position:100% 7%}
|
50%{opacity: 0.0}
|
||||||
100%{background-position:0% 94%}
|
100%{opacity: 1.0}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .skeleton:nth-child(even) {
|
// .skeleton:nth-child(even) {
|
||||||
|
@ -605,8 +605,7 @@ $modal-z: 9999999;
|
||||||
// }
|
// }
|
||||||
.skeleton {
|
.skeleton {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: linear-gradient(235deg, #f0f0f0, #fbfbfb, #eeeeee);
|
background: #eeeeee;
|
||||||
background-size: 600% 600%;
|
|
||||||
|
|
||||||
-webkit-animation: skeleton-animation 1.5s ease infinite;
|
-webkit-animation: skeleton-animation 1.5s ease infinite;
|
||||||
-moz-animation: skeleton-animation 1.5s ease infinite;
|
-moz-animation: skeleton-animation 1.5s ease infinite;
|
||||||
|
|
|
@ -73,7 +73,14 @@
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
visibility: hidden;
|
// visibility: hidden;
|
||||||
|
transition: height 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Masonry skeleton is white due to
|
||||||
|
// background-blend-mode
|
||||||
|
.skeleton {
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -215,16 +215,15 @@ class Collection extends Entity {
|
||||||
* @return array
|
* @return array
|
||||||
*/
|
*/
|
||||||
function get_thumbnail() {
|
function get_thumbnail() {
|
||||||
$thumbs = array(
|
|
||||||
'thumb' => get_the_post_thumbnail_url( $this->get_id(), 'thumbnail' ),
|
$sizes = get_intermediate_image_sizes();
|
||||||
'full' => get_the_post_thumbnail_url( $this->get_id(), 'full' ),
|
|
||||||
'medium' => get_the_post_thumbnail_url( $this->get_id(), 'medium' ),
|
array_unshift($sizes, 'full');
|
||||||
'medium_large' => get_the_post_thumbnail_url( $this->get_id(), 'medium_large' ),
|
|
||||||
'large' => get_the_post_thumbnail_url( $this->get_id(), 'large' ),
|
foreach ( $sizes as $size ) {
|
||||||
'tainacan_small' => get_the_post_thumbnail_url( $this->get_id(), 'tainacan-small' ),
|
$thumbs[$size] = wp_get_attachment_image_src( $this->get__thumbnail_id(), $size );
|
||||||
'tainacan_medium' => get_the_post_thumbnail_url( $this->get_id(), 'tainacan-medium' ),
|
}
|
||||||
'tainacan_medium_full' => get_the_post_thumbnail_url( $this->get_id(), 'tainacan-medium-full' ),
|
|
||||||
);
|
|
||||||
return apply_filters("tainacan-collection-get-thumbnail", $thumbs, $this);
|
return apply_filters("tainacan-collection-get-thumbnail", $thumbs, $this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -126,22 +126,26 @@ class Item extends Entity {
|
||||||
return apply_filters("tainacan-item-get-author-name", $name, $this);
|
return apply_filters("tainacan-item-get-author-name", $name, $this);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @return array
|
* Gets the thumbnail list of files
|
||||||
*/
|
*
|
||||||
function get_thumbnail() {
|
* Each size is represented as an array in the format returned by
|
||||||
$thumbs = array(
|
* @see https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
|
||||||
'thumb' => get_the_post_thumbnail_url( $this->get_id(), 'thumbnail' ),
|
*
|
||||||
'full' => get_the_post_thumbnail_url( $this->get_id(), 'full' ),
|
* @return array
|
||||||
'medium' => get_the_post_thumbnail_url( $this->get_id(), 'medium' ),
|
*/
|
||||||
'medium_large' => get_the_post_thumbnail_url( $this->get_id(), 'medium_large' ),
|
function get_thumbnail() {
|
||||||
'large' => get_the_post_thumbnail_url( $this->get_id(), 'large' ),
|
|
||||||
'tainacan_small' => get_the_post_thumbnail_url( $this->get_id(), 'tainacan-small' ),
|
$sizes = get_intermediate_image_sizes();
|
||||||
'tainacan_medium' => get_the_post_thumbnail_url( $this->get_id(), 'tainacan-medium' ),
|
|
||||||
'tainacan_medium_full' => get_the_post_thumbnail_url( $this->get_id(), 'tainacan-medium-full' ),
|
array_unshift($sizes, 'full');
|
||||||
);
|
|
||||||
return apply_filters("tainacan-item-get-thumbnail", $thumbs, $this);
|
foreach ( $sizes as $size ) {
|
||||||
}
|
$thumbs[$size] = wp_get_attachment_image_src( $this->get__thumbnail_id(), $size );
|
||||||
|
}
|
||||||
|
|
||||||
|
return apply_filters("tainacan-item-get-thumbnail", $thumbs, $this);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param $id
|
* @param $id
|
||||||
|
|
|
@ -161,7 +161,7 @@
|
||||||
axios.get('/collection/' + collectionTarget + '/items?' + query)
|
axios.get('/collection/' + collectionTarget + '/items?' + query)
|
||||||
.then( res => {
|
.then( res => {
|
||||||
for (let item of res.data) {
|
for (let item of res.data) {
|
||||||
instance.selected.push({ label: item.title, value: item.id, img: item.thumbnail.thumb });
|
instance.selected.push({ label: item.title, value: item.id, img: item.thumbnail.thumbnail[0] });
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
|
|
|
@ -108,8 +108,8 @@ registerBlockType('tainacan/collections-carousel', {
|
||||||
style={style}>
|
style={style}>
|
||||||
<img
|
<img
|
||||||
src={
|
src={
|
||||||
(item.thumbnail && item.thumbnail.thumb) ?
|
(item.thumbnail && item.thumbnail.thumbnail) ?
|
||||||
item.thumbnail.thumb :
|
item.thumbnail.thumbnail[0] :
|
||||||
( (item.img && item.img[0].src) ?
|
( (item.img && item.img[0].src) ?
|
||||||
item.img[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
|
item.img[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
|
||||||
}
|
}
|
||||||
|
|
|
@ -107,8 +107,8 @@ registerBlockType('tainacan/items-grid', {
|
||||||
}}
|
}}
|
||||||
|
|
||||||
src={
|
src={
|
||||||
(item.thumbnail && item.thumbnail.thumb) ?
|
(item.thumbnail && item.thumbnail.thumbnail) ?
|
||||||
item.thumbnail.thumb :
|
item.thumbnail.thumbnail[0] :
|
||||||
((item && item.img && item.img[0].src) ?
|
((item && item.img && item.img[0].src) ?
|
||||||
item.img[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
|
item.img[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
|
||||||
}
|
}
|
||||||
|
|
|
@ -82,7 +82,8 @@ class Theme_Helper {
|
||||||
'dynamic_metadata' => false,
|
'dynamic_metadata' => false,
|
||||||
'description' => 'A masonry view, similar to pinterest, which will display images without cropping.',
|
'description' => 'A masonry view, similar to pinterest, which will display images without cropping.',
|
||||||
'icon' => '<span class="icon"><i class="tainacan-icon tainacan-icon-viewmasonry tainacan-icon-20px"></i></span>',
|
'icon' => '<span class="icon"><i class="tainacan-icon tainacan-icon-viewmasonry tainacan-icon-20px"></i></span>',
|
||||||
'type' => 'component'
|
'type' => 'component',
|
||||||
|
'implements_skeleton' => true
|
||||||
]);
|
]);
|
||||||
$this->register_view_mode('slideshow', [
|
$this->register_view_mode('slideshow', [
|
||||||
'label' => __('Slideshow', 'tainacan'),
|
'label' => __('Slideshow', 'tainacan'),
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
|
|
||||||
<img
|
<img
|
||||||
v-if="item.thumbnail != undefined"
|
v-if="item.thumbnail != undefined"
|
||||||
:src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium : (item['thumbnail'].medium ? item['thumbnail'].medium : thumbPlaceholderPath)">
|
:src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium[0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
|
||||||
|
|
||||||
<div class="list-metadata media-body">
|
<div class="list-metadata media-body">
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
<div class="table-wrapper">
|
<div
|
||||||
|
ref="masonryWrapper"
|
||||||
|
class="table-wrapper">
|
||||||
|
|
||||||
<!-- Empty result placeholder -->
|
<!-- Empty result placeholder -->
|
||||||
<section
|
<section
|
||||||
v-if="!isLoading && items.length <= 0"
|
v-if="!isLoading && items.length <= 0"
|
||||||
|
@ -14,15 +17,30 @@
|
||||||
<p>{{ $i18n.get('info_no_item_found') }}</p>
|
<p>{{ $i18n.get('info_no_item_found') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- SKELETON LOADING -->
|
||||||
|
<masonry
|
||||||
|
v-if="isLoading"
|
||||||
|
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
|
||||||
|
:gutter="25"
|
||||||
|
class="tainacan-masonry-container">
|
||||||
|
<div
|
||||||
|
:key="item"
|
||||||
|
v-for="item in 12"
|
||||||
|
:style="{'min-height': randomHeightForMasonryItem() + 'px' }"
|
||||||
|
class="skeleton tainacan-masonry-item" />
|
||||||
|
</masonry>
|
||||||
|
|
||||||
<!-- MASONRY VIEW MODE -->
|
<!-- MASONRY VIEW MODE -->
|
||||||
<masonry
|
<masonry
|
||||||
|
v-if="!isLoading && items.length > 0"
|
||||||
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
|
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
|
||||||
:gutter="25"
|
:gutter="25"
|
||||||
class="tainacan-masonry-container">
|
class="tainacan-masonry-container">
|
||||||
<a
|
<a
|
||||||
:key="index"
|
:key="index"
|
||||||
v-for="(item, index) of items"
|
v-for="(item, index) of items"
|
||||||
class="tainacan-masonry-item"
|
class="tainacan-masonry-item"
|
||||||
:href="item.url">
|
:href="item.url">
|
||||||
|
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
|
@ -34,8 +52,11 @@
|
||||||
<div
|
<div
|
||||||
v-if="item.thumbnail != undefined"
|
v-if="item.thumbnail != undefined"
|
||||||
class="thumbnail"
|
class="thumbnail"
|
||||||
:style="{ backgroundImage: 'url(' + (item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath)) + ')' }">
|
:style="{ backgroundImage: 'url(' + (item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)) + ')' }">
|
||||||
<img :src="item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath)">
|
<img
|
||||||
|
:style="{ minHeight: getItemHeight(item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px'}"
|
||||||
|
class="skeleton"
|
||||||
|
:src="item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)" >
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</masonry>
|
</masonry>
|
||||||
|
@ -44,6 +65,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { mapGetters } from 'vuex';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ViewModeMasonry',
|
name: 'ViewModeMasonry',
|
||||||
|
@ -51,14 +73,21 @@ export default {
|
||||||
collectionId: Number,
|
collectionId: Number,
|
||||||
displayedMetadata: Array,
|
displayedMetadata: Array,
|
||||||
items: Array,
|
items: Array,
|
||||||
isLoading: false
|
isLoading: false,
|
||||||
|
itemsPerPage: Number,
|
||||||
|
containerWidth: Number,
|
||||||
|
windowWidth: Number
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
|
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
|
||||||
|
isMounted: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
...mapGetters('search', [
|
||||||
|
'getItemsPerPage',
|
||||||
|
]),
|
||||||
goToItemPage(item) {
|
goToItemPage(item) {
|
||||||
window.location.href = item.url;
|
window.location.href = item.url;
|
||||||
},
|
},
|
||||||
|
@ -73,7 +102,54 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
return metadata.value_as_html;
|
return metadata.value_as_html;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
randomHeightForMasonryItem() {
|
||||||
|
let min = 120;
|
||||||
|
let max = 380;
|
||||||
|
|
||||||
|
return Math.floor(Math.random()*(max-min+1)+min);
|
||||||
|
},
|
||||||
|
getItemHeight(imageWidth, imageHeight) {
|
||||||
|
|
||||||
|
let columnsCount;
|
||||||
|
if (this.$refs.masonryWrapper.clientWidth != this.containerWidth)
|
||||||
|
this.containerWidth = this.$refs.masonryWrapper.clientWidth;
|
||||||
|
|
||||||
|
if (this.windowWidth > 1919)
|
||||||
|
columnsCount = 7;
|
||||||
|
else if (this.windowWidth <= 1919 && this.windowWidth > 1407)
|
||||||
|
columnsCount = 6;
|
||||||
|
else if (this.windowWidth <= 1407 && this.windowWidth > 1215)
|
||||||
|
columnsCount = 5;
|
||||||
|
else if (this.windowWidth <= 1215 && this.windowWidth > 1023)
|
||||||
|
columnsCount = 4;
|
||||||
|
else if (this.windowWidth <= 1023 && this.windowWidth > 767)
|
||||||
|
columnsCount = 3;
|
||||||
|
else if (this.windowWidth <= 767 && this.windowWidth > 343)
|
||||||
|
columnsCount = 2;
|
||||||
|
else if (this.windowWidth <= 343)
|
||||||
|
columnsCount = 1;
|
||||||
|
else
|
||||||
|
columnsCount = 7;
|
||||||
|
|
||||||
|
let itemWidth = (this.containerWidth/columnsCount) - 22;
|
||||||
|
|
||||||
|
return (imageHeight*itemWidth)/imageWidth;
|
||||||
|
},
|
||||||
|
recalculateItemsHeight: _.debounce( function() {
|
||||||
|
this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||||
|
this.$forceUpdate();
|
||||||
|
}, 800)
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.containerWidth = this.$refs.masonryWrapper.clientWidth;
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||||
|
window.addEventListener('resize', this.recalculateItemsHeight);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.recalculateItemsHeight);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
<div
|
<div
|
||||||
class="thumbnail"
|
class="thumbnail"
|
||||||
v-if="item.thumbnail != undefined">
|
v-if="item.thumbnail != undefined">
|
||||||
<img :src="item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath)">
|
<img :src="item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)">
|
||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
v-for="(column, index) in tableMetadata"
|
v-for="(column, index) in tableMetadata"
|
||||||
|
|
|
@ -210,7 +210,7 @@
|
||||||
<img
|
<img
|
||||||
:alt="item.title"
|
:alt="item.title"
|
||||||
class="thumnail"
|
class="thumnail"
|
||||||
:src="item['thumbnail']['tainacan_small'] ? item['thumbnail']['tainacan_small'] : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)">
|
:src="item['thumbnail']['tainacan_small'] ? item['thumbnail']['tainacan_small'][0] : (item['thumbnail'].thumbnail ? item['thumbnail'].thumbnail[0] : thumbPlaceholderPath)">
|
||||||
|
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
|
<!-- Swiper buttons are hidden as they actually swipe from slide to slide -->
|
||||||
|
|
|
@ -105,7 +105,7 @@
|
||||||
<span v-if="column.metadatum == 'row_thumbnail'">
|
<span v-if="column.metadatum == 'row_thumbnail'">
|
||||||
<img
|
<img
|
||||||
class="table-thumb"
|
class="table-thumb"
|
||||||
:src="item['thumbnail'].tainacan_small ? item['thumbnail'].tainacan_small : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)">
|
:src="item['thumbnail'].tainacan_small ? item['thumbnail'].tainacan_small[0] : (item['thumbnail'].thumbnail ? item['thumbnail'].thumbnail[0] : thumbPlaceholderPath)">
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
Loading…
Reference in New Issue