diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue index fd3b8e86e..8fd20396b 100644 --- a/src/admin/components/edition/collection-edition-form.vue +++ b/src/admin/components/edition/collection-edition-form.vue @@ -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: `Thumbnail` }}"/> + description: { rendered: `Thumbnail` }}"/>
diff --git a/src/admin/components/edition/item-bulk-edition-form.vue b/src/admin/components/edition/item-bulk-edition-form.vue index 42f1894a5..21bcc8151 100644 --- a/src/admin/components/edition/item-bulk-edition-form.vue +++ b/src/admin/components/edition/item-bulk-edition-form.vue @@ -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)" > diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue index 2d73eda60..bc009b095 100644 --- a/src/admin/components/edition/item-edition-form.vue +++ b/src/admin/components/edition/item-edition-form.vue @@ -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: `Thumbnail` }}"/> + description: { rendered: `Thumbnail` }}"/>
@@ -286,7 +286,7 @@ + :src="item.thumbnail.tainacan_small ? item.thumbnail.tainacan_small[0] : (item.thumbnail.thumbnail ? item.thumbnail.thumbnail[0] : thumbPlaceholderPath)" > diff --git a/src/admin/components/lists/collections-home-list.vue b/src/admin/components/lists/collections-home-list.vue index 4b551b87e..71c37be1c 100644 --- a/src/admin/components/lists/collections-home-list.vue +++ b/src/admin/components/lists/collections-home-list.vue @@ -217,7 +217,7 @@ class="card-body"> + :src="collection['thumbnail'].tainacan_medium ? collection['thumbnail'].tainacan_medium[0] : (collection['thumbnail'].medium ? collection['thumbnail'].medium[0] : thumbPlaceholderPath)">
diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue index f2eb142c9..e6541101e 100644 --- a/src/admin/components/lists/collections-list.vue +++ b/src/admin/components/lists/collections-list.vue @@ -96,7 +96,7 @@ + :src="(collection.thumbnail && collection.thumbnail.thumbnail ) ? collection.thumbnail.thumbnail[0] : thumbPlaceholderPath"> diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue index 18c454521..6a3f02ca8 100644 --- a/src/admin/components/lists/items-list.vue +++ b/src/admin/components/lists/items-list.vue @@ -123,7 +123,7 @@ - + @@ -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)) + ')' }"> - + :style="{ backgroundImage: 'url(' + (item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)) + ')' }"> +
@@ -329,7 +329,7 @@ + :src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium[0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
@@ -471,7 +471,7 @@
+ :src="item['thumbnail'].tainacan_medium_full ? item['thumbnail'].tainacan_medium_full[0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)">
+ :src="item['thumbnail'].tainacan_small ? item['thumbnail'].tainacan_small[0] : (item['thumbnail'].thumbnail ? item['thumbnail'].thumbnail[0] : thumbPlaceholderPath)">

- - + :active="showLoading"/> +

@@ -635,7 +634,6 @@
@@ -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(); diff --git a/src/admin/pages/lists/term-items-page.vue b/src/admin/pages/lists/term-items-page.vue index 736a0392b..15d843564 100644 --- a/src/admin/pages/lists/term-items-page.vue +++ b/src/admin/pages/lists/term-items-page.vue @@ -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 diff --git a/src/admin/pages/singles/item-page.vue b/src/admin/pages/singles/item-page.vue index 05f1535f9..fa86bb683 100644 --- a/src/admin/pages/singles/item-page.vue +++ b/src/admin/pages/singles/item-page.vue @@ -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: `Thumbnail` }}"/> + description: { rendered: `Thumbnail` }}"/>
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss index 6cf405d9c..840fe0e4f 100644 --- a/src/admin/scss/_variables.scss +++ b/src/admin/scss/_variables.scss @@ -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; diff --git a/src/admin/scss/_view-mode-masonry.scss b/src/admin/scss/_view-mode-masonry.scss index 7027ce5f4..dde283cf1 100644 --- a/src/admin/scss/_view-mode-masonry.scss +++ b/src/admin/scss/_view-mode-masonry.scss @@ -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; } } diff --git a/src/classes/entities/class-tainacan-collection.php b/src/classes/entities/class-tainacan-collection.php index 1472f38f0..eda4f9630 100644 --- a/src/classes/entities/class-tainacan-collection.php +++ b/src/classes/entities/class-tainacan-collection.php @@ -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); } diff --git a/src/classes/entities/class-tainacan-item.php b/src/classes/entities/class-tainacan-item.php index 085d0a38f..5c50220bf 100644 --- a/src/classes/entities/class-tainacan-item.php +++ b/src/classes/entities/class-tainacan-item.php @@ -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 diff --git a/src/classes/filter-types/taginput/Taginput.vue b/src/classes/filter-types/taginput/Taginput.vue index b4b09011d..376952abe 100644 --- a/src/classes/filter-types/taginput/Taginput.vue +++ b/src/classes/filter-types/taginput/Taginput.vue @@ -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 => { diff --git a/src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js b/src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js index 8b63e88d9..d97f47873 100644 --- a/src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js +++ b/src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js @@ -108,8 +108,8 @@ registerBlockType('tainacan/collections-carousel', { style={style}> false, 'description' => 'A masonry view, similar to pinterest, which will display images without cropping.', 'icon' => '', - 'type' => 'component' + 'type' => 'component', + 'implements_skeleton' => true ]); $this->register_view_mode('slideshow', [ 'label' => __('Slideshow', 'tainacan'), diff --git a/src/theme-helper/view-mode-cards.vue b/src/theme-helper/view-mode-cards.vue index fd714f331..79a4752c5 100644 --- a/src/theme-helper/view-mode-cards.vue +++ b/src/theme-helper/view-mode-cards.vue @@ -39,7 +39,7 @@ + :src="item['thumbnail'].tainacan_medium ? item['thumbnail'].tainacan_medium[0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
diff --git a/src/theme-helper/view-mode-masonry.vue b/src/theme-helper/view-mode-masonry.vue index 1b4300cf1..d48d3efe7 100644 --- a/src/theme-helper/view-mode-masonry.vue +++ b/src/theme-helper/view-mode-masonry.vue @@ -1,6 +1,9 @@ diff --git a/src/theme-helper/view-mode-records.vue b/src/theme-helper/view-mode-records.vue index c19249337..bd81f0ed4 100644 --- a/src/theme-helper/view-mode-records.vue +++ b/src/theme-helper/view-mode-records.vue @@ -57,7 +57,7 @@
- +
+ :src="item['thumbnail']['tainacan_small'] ? item['thumbnail']['tainacan_small'][0] : (item['thumbnail'].thumbnail ? item['thumbnail'].thumbnail[0] : thumbPlaceholderPath)"> diff --git a/src/theme-helper/view-mode-table.vue b/src/theme-helper/view-mode-table.vue index ce33fdc85..0b0c855d6 100644 --- a/src/theme-helper/view-mode-table.vue +++ b/src/theme-helper/view-mode-table.vue @@ -105,7 +105,7 @@ + :src="item['thumbnail'].tainacan_small ? item['thumbnail'].tainacan_small[0] : (item['thumbnail'].thumbnail ? item['thumbnail'].thumbnail[0] : thumbPlaceholderPath)">