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" :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">

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'" 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" />

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

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

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'" 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" />

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

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

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

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

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

@ -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="{

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

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

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

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

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

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

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

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

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

@ -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;
} }
} }

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

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

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

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

@ -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 => {

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

@ -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`)
} }

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

@ -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`)
} }

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

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

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

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

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

@ -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,8 +17,23 @@
<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">
@ -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>

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

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

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

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

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

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