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

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:
Mateus Machado Luna 2018-12-05 12:42:39 -02:00
parent 55e48b52a6
commit 1f0de042f8
23 changed files with 172 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/admin/components/edition/collection-edition-form.vue
View File

@ -49,9 +49,9 @@
:size="178"
:file="{
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')},
description: { rendered: `<img alt='Thumbnail' src='` + collection.thumbnail.full + `'/>` }}"/>
description: { rendered: `<img alt='Thumbnail' src='` + collection.thumbnail.full[0] + `'/>` }}"/>
<figure
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">

2
src/admin/components/edition/item-bulk-edition-form.vue
View File

@ -89,7 +89,7 @@
v-if="item.document!= undefined && item.document != '' && item.document_type != 'empty'"
class="document-thumb"
: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
class="document-name"
v-html="item.title" />

6
src/admin/components/edition/item-edition-form.vue
View File

@ -264,9 +264,9 @@
:size="178"
:file="{
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')},
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full + `'/>` }}"/>
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full[0] + `'/>` }}"/>
<figure
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">
@ -286,7 +286,7 @@
</span>
</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"
class="button is-rounded is-secondary"
:aria-label="$i18n.get('label_button_delete_thumb')"

2
src/admin/components/edition/item-metadata-bulk-edition-form.vue
View File

@ -45,7 +45,7 @@
v-if="item.document!= undefined && item.document != '' && item.document_type != 'empty'"
class="document-thumb"
: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
class="document-name"
v-html="item.title" />

2
src/admin/components/lists/collections-home-list.vue
View File

@ -217,7 +217,7 @@
class="card-body">
<img
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 -->
<div class="metadata-title">

2
src/admin/components/lists/collections-list.vue
View File

@ -96,7 +96,7 @@
<span>
<img
class="table-thumb"
:src="collection.thumbnail != undefined ? collection.thumbnail.thumb : thumbPlaceholderPath">
:src="(collection.thumbnail && collection.thumbnail.thumbnail ) ? collection.thumbnail.thumbnail[0] : thumbPlaceholderPath">
</span>
</td>
<!-- Name -->

12
src/admin/components/lists/items-list.vue
View File

@ -123,7 +123,7 @@
<a
v-if="item.thumbnail != undefined"
@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>
<!-- Actions -->
@ -210,8 +210,8 @@
@click="onClickItem($event, item, index)"
v-if="item.thumbnail != undefined"
class="thumbnail"
:style="{ backgroundImage: 'url(' + (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 : (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[0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)">
</div>
<!-- Actions -->
@ -329,7 +329,7 @@
<img
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">
<!-- Description -->
@ -471,7 +471,7 @@
<div class="thumbnail">
<img
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>
<span
v-for="(column, index) in tableMetadata"
@ -611,7 +611,7 @@
<span v-if="column.metadatum == 'row_thumbnail'">
<img
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>
<p
v-tooltip="{

18
src/admin/pages/lists/items-page.vue
View File

@ -560,12 +560,12 @@
<div
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">
<!--<b-loading
<b-loading
:is-full-page="false"
:active="showLoading"/>-->
<skeleton-items-list v-if="!isOnTheme"/>
:active="showLoading"/>
<!-- <skeleton-items-list v-if="!isOnTheme"/> -->
</div>
<!-- <div
@ -610,7 +610,6 @@
<!-- Theme View Modes -->
<div
v-if="isOnTheme &&
!isLoadingItems &&
openAdvancedSearch &&
advancedSearchResults &&
registeredViewModes[viewMode] != undefined &&
@ -619,7 +618,6 @@
<component
v-if="isOnTheme &&
!isLoadingItems &&
registeredViewModes[viewMode] != undefined &&
registeredViewModes[viewMode].type == 'component' &&
openAdvancedSearch &&
@ -627,6 +625,7 @@
:collection-id="collectionId"
:displayed-metadata="displayedMetadata"
:items="items"
:items-per-page="itemsPerPage"
:total-items="totalItems"
:is-loading="isLoadingItems"
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
@ -635,7 +634,6 @@
<!-- Theme View Modes -->
<div
v-if="isOnTheme &&
!isLoadingItems &&
!openAdvancedSearch &&
registeredViewModes[viewMode] != undefined &&
registeredViewModes[viewMode].type == 'template'"
@ -645,11 +643,11 @@
v-else-if="isOnTheme &&
registeredViewModes[viewMode] != undefined &&
registeredViewModes[viewMode].type == 'component' &&
(!isLoadingItems || !registeredViewModes[viewMode].show_pagination) &&
!openAdvancedSearch"
:collection-id="collectionId"
:displayed-metadata="displayedMetadata"
:items="items"
:items-per-page="itemsPerPage"
:total-items="totalItems"
:is-loading="isLoadingItems"
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
@ -1241,13 +1239,13 @@
this.isLoadingMetadata = false;
});
},
adjustSearchControlHeight() {
adjustSearchControlHeight: _.debounce( function() {
this.$nextTick(() => {
if (this.$refs['search-control'] != undefined)
this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight + this.$refs['search-control'].offsetTop : 0;
this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
});
},
}, 500),
removeEventListeners() {
// Component
this.$off();

4
src/admin/pages/lists/term-items-page.vue
View File

@ -1170,12 +1170,12 @@
this.isLoadingMetadata = false;
});
},
adjustSearchControlHeight() {
adjustSearchControlHeight: _.debounce( function() {
this.$nextTick(() => {
this.searchControlHeight = this.$refs['search-control'] ? this.$refs['search-control'].clientHeight : 0;
this.isFiltersMenuCompressed = jQuery(window).width() <= 768;
});
}
}, 500)
},
removeEventListeners() {
// Component

4
src/admin/pages/singles/item-page.vue
View File

@ -91,9 +91,9 @@
:size="178"
:file="{
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')},
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full + `'/>` }}"/>
description: { rendered: `<img alt='Thumbnail' src='` + item.thumbnail.full[0] + `'/>` }}"/>
<figure
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">

27
src/admin/scss/_variables.scss
View File

@ -577,24 +577,24 @@ $modal-z: 9999999;
// SKELETON GRADIENT ANIMATIONS
@-webkit-keyframes skeleton-animation {
0%{background-position:0% 94%}
50%{background-position:100% 7%}
100%{background-position:0% 94%}
0%{opacity: 1.0}
50%{opacity: 0.0}
100%{opacity: 1.0}
}
@-moz-keyframes skeleton-animation {
0%{background-position:0% 94%}
50%{background-position:100% 7%}
100%{background-position:0% 94%}
0%{opacity: 1.0}
50%{opacity: 0.0}
100%{opacity: 1.0}
}
@-o-keyframes skeleton-animation {
0%{background-position:0% 94%}
50%{background-position:100% 7%}
100%{background-position:0% 94%}
0%{opacity: 1.0}
50%{opacity: 0.0}
100%{opacity: 1.0}
}
@keyframes skeleton-animation {
0%{background-position:0% 94%}
50%{background-position:100% 7%}
100%{background-position:0% 94%}
0%{opacity: 1.0}
50%{opacity: 0.0}
100%{opacity: 1.0}
}
// .skeleton:nth-child(even) {
@ -605,8 +605,7 @@ $modal-z: 9999999;
// }
.skeleton {
border-radius: 4px;
background: linear-gradient(235deg, #f0f0f0, #fbfbfb, #eeeeee);
background-size: 600% 600%;
background: #eeeeee;
-webkit-animation: skeleton-animation 1.5s ease infinite;
-moz-animation: skeleton-animation 1.5s ease infinite;

9
src/admin/scss/_view-mode-masonry.scss
View File

@ -73,7 +73,14 @@
img {
width: 100%;
height: auto;
visibility: hidden;
// visibility: hidden;
transition: height 0.2s ease;
}
// Masonry skeleton is white due to
// background-blend-mode
.skeleton {
background: #fff;
}
}

19
src/classes/entities/class-tainacan-collection.php
View File

@ -215,16 +215,15 @@ class Collection extends Entity {
* @return array
*/
function get_thumbnail() {
$thumbs = array(
'thumb' => get_the_post_thumbnail_url( $this->get_id(), 'thumbnail' ),
'full' => get_the_post_thumbnail_url( $this->get_id(), 'full' ),
'medium' => get_the_post_thumbnail_url( $this->get_id(), 'medium' ),
'medium_large' => get_the_post_thumbnail_url( $this->get_id(), 'medium_large' ),
'large' => get_the_post_thumbnail_url( $this->get_id(), 'large' ),
'tainacan_small' => get_the_post_thumbnail_url( $this->get_id(), 'tainacan-small' ),
'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' ),
);
$sizes = get_intermediate_image_sizes();
array_unshift($sizes, 'full');
foreach ( $sizes as $size ) {
$thumbs[$size] = wp_get_attachment_image_src( $this->get__thumbnail_id(), $size );
}
return apply_filters("tainacan-collection-get-thumbnail", $thumbs, $this);
}

36
src/classes/entities/class-tainacan-item.php
View File

@ -126,22 +126,26 @@ class Item extends Entity {
return apply_filters("tainacan-item-get-author-name", $name, $this);
}
/**
* @return array
*/
function get_thumbnail() {
$thumbs = array(
'thumb' => get_the_post_thumbnail_url( $this->get_id(), 'thumbnail' ),
'full' => get_the_post_thumbnail_url( $this->get_id(), 'full' ),
'medium' => get_the_post_thumbnail_url( $this->get_id(), 'medium' ),
'medium_large' => get_the_post_thumbnail_url( $this->get_id(), 'medium_large' ),
'large' => get_the_post_thumbnail_url( $this->get_id(), 'large' ),
'tainacan_small' => get_the_post_thumbnail_url( $this->get_id(), 'tainacan-small' ),
'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-item-get-thumbnail", $thumbs, $this);
}
/**
* Gets the thumbnail list of files
*
* Each size is represented as an array in the format returned by
* @see https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
*
* @return array
*/
function get_thumbnail() {
$sizes = get_intermediate_image_sizes();
array_unshift($sizes, 'full');
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

2
src/classes/filter-types/taginput/Taginput.vue
View File

@ -161,7 +161,7 @@
axios.get('/collection/' + collectionTarget + '/items?' + query)
.then( res => {
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 => {

4
src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js
View File

@ -108,8 +108,8 @@ registerBlockType('tainacan/collections-carousel', {
style={style}>
<img
src={
(item.thumbnail && item.thumbnail.thumb) ?
item.thumbnail.thumb :
(item.thumbnail && item.thumbnail.thumbnail) ?
item.thumbnail.thumbnail[0] :
( (item.img && item.img[0].src) ?
item.img[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
}

4
src/gutenberg-blocks/tainacan-items/items-grid/index.js
View File

@ -107,8 +107,8 @@ registerBlockType('tainacan/items-grid', {
}}
src={
(item.thumbnail && item.thumbnail.thumb) ?
item.thumbnail.thumb :
(item.thumbnail && item.thumbnail.thumbnail) ?
item.thumbnail.thumbnail[0] :
((item && item.img && item.img[0].src) ?
item.img[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
}

3
src/theme-helper/class-tainacan-theme-helper.php
View File

@ -82,7 +82,8 @@ class Theme_Helper {
'dynamic_metadata' => false,
'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>',
'type' => 'component'
'type' => 'component',
'implements_skeleton' => true
]);
$this->register_view_mode('slideshow', [
'label' => __('Slideshow', 'tainacan'),

2
src/theme-helper/view-mode-cards.vue
View File

@ -39,7 +39,7 @@
<img
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">
<!-- Description -->

88
src/theme-helper/view-mode-masonry.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="table-container">
<div class="table-wrapper">
<div
ref="masonryWrapper"
class="table-wrapper">
<!-- Empty result placeholder -->
<section
v-if="!isLoading && items.length <= 0"
@ -14,8 +17,23 @@
<p>{{ $i18n.get('info_no_item_found') }}</p>
</div>
</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
v-if="!isLoading && items.length > 0"
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
:gutter="25"
class="tainacan-masonry-container">
@ -34,8 +52,11 @@
<div
v-if="item.thumbnail != undefined"
class="thumbnail"
:style="{ backgroundImage: 'url(' + (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 : (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
: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>
</a>
</masonry>
@ -44,6 +65,7 @@
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'ViewModeMasonry',
@ -51,14 +73,21 @@ export default {
collectionId: Number,
displayedMetadata: Array,
items: Array,
isLoading: false
isLoading: false,
itemsPerPage: Number,
containerWidth: Number,
windowWidth: Number
},
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
isMounted: false
}
},
methods: {
...mapGetters('search', [
'getItemsPerPage',
]),
goToItemPage(item) {
window.location.href = item.url;
},
@ -73,7 +102,54 @@ export default {
} else {
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>

2
src/theme-helper/view-mode-records.vue
View File

@ -57,7 +57,7 @@
<div
class="thumbnail"
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>
<span
v-for="(column, index) in tableMetadata"

2
src/theme-helper/view-mode-slideshow.vue
View File

@ -210,7 +210,7 @@
<img
:alt="item.title"
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 buttons are hidden as they actually swipe from slide to slide -->

2
src/theme-helper/view-mode-table.vue
View File

@ -105,7 +105,7 @@
<span v-if="column.metadatum == 'row_thumbnail'">
<img
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>
</a>
</td>