Creates new thumbnails for each document type #456.

This commit is contained in:
mateuswetah 2020-12-16 15:03:50 -03:00
parent d2adfff6a1
commit 45ef379594
45 changed files with 93 additions and 54 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1010 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 573 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 814 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 307 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 161 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 395 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 699 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 621 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

View File

@ -61,7 +61,7 @@
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
<img
:alt="$i18n.get('label_thumbnail')"
:src="thumbPlaceholderPath">
:src="$thumbHelper.getEmptyThumbnailPlaceholder()">
</figure>
<div class="thumbnail-buttons-row">
<a
@ -669,7 +669,6 @@ export default {
isNewCollection: false,
isMapped: false,
mapper: false,
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
headerPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_rectangle.png',
collections: [],
isFetchingCollections: true,

View File

@ -86,10 +86,10 @@
v-for="(item, index) of uploadedItems"
:key="item.id">
<img
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"
:alt="$i18n.get('label_thumbnail') + ': ' + item.title"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small')" >
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_type)" >
<span
class="document-name"
v-html="item.title" />
@ -197,7 +197,6 @@ export default {
isLoading: false,
isCreatingSequenceEditGroup: false,
submitedFileList: [],
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
uploadedItems: [],
amountFinished: 0
}

View File

@ -305,9 +305,9 @@
:size="178"
:file="{
media_type: 'image',
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium') ] },
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type) ] },
title: $i18n.get('label_thumbnail'),
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(item['thumbnail'], 'full') + `'/>`
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(item['thumbnail'], 'full', item.document_type) + `'/>`
}"/>
<figure
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))"
@ -315,7 +315,7 @@
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
<img
:alt="$i18n.get('label_thumbnail')"
:src="thumbPlaceholderPath">
:src="$thumbHelper.getEmptyThumbnailPlaceholder(item.document_type)">
</figure>
<div class="thumbnail-buttons-row">
<a
@ -835,7 +835,6 @@ export default {
},
thumbnail: {},
formErrorMessage: '',
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
thumbnailMediaFrame: undefined,
attachmentMediaFrame: undefined,
fileMediaFrame: undefined,

View File

@ -74,7 +74,7 @@
class="image-placeholder">{{ $i18n.get('label_empty_term_image') }}</span>
<img
:alt="$i18n.get('label_image')"
:src="(editForm.header_image === undefined || editForm.header_image === false) ? headerPlaceholderPath : editForm.header_image">
:src="(editForm.header_image === undefined || editForm.header_image === false) ? $thumbHelper.getEmptyThumbnailPlaceholder() : editForm.header_image">
</figure>
<div class="thumbnail-buttons-row">
<a
@ -241,7 +241,6 @@
data() {
return {
formErrors: {},
headerPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
headerImageMediaFrame: undefined,
isFetchingParentTerms: false,
parentTerms: [],

View File

@ -157,7 +157,7 @@
let metadata = this.query.metaquery[ index ];
if (this.metadatumType === 'Tainacan\\Metadata_Types\\Relationship') {
let query = qs.stringify({ postin: metadata.value, fetch_only: 'title,thumbnail', fetch_only_meta: '' });
let query = qs.stringify({ postin: metadata.value, fetch_only: 'title,thumbnail,document_type', fetch_only_meta: '' });
let endpoint = '/items/';
if (this.relatedCollectionId != '')
@ -173,7 +173,7 @@
this.selected.push({
label: item.title,
value: item.id,
img: item.thumbnail ? this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small') : null
img: item.thumbnail ? this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_type) : null
});
}
}

View File

@ -259,11 +259,6 @@ export default {
isLoading: false,
collections: Array,
collectionsTotal: Number
},
data(){
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png'
}
}
}
</script>

View File

@ -322,7 +322,6 @@ export default {
selectedCollections: [],
allCollectionsOnPageSelected: false,
isSelectingCollections: false,
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
cursorPosX: -1,
cursorPosY: -1,
contextMenuIndex: null,

View File

@ -177,10 +177,10 @@
@click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)"
class="grid-item-thumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium') + ')' }">
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type) + ')' }">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type)">
</a>
<!-- Actions -->
@ -291,10 +291,10 @@
@click.right="onRightClickItem($event, item)"
v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full') + ')' }">
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type) + ')' }">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)">
</div>
<!-- Actions -->
@ -459,12 +459,12 @@
@click.right="onRightClickItem($event, item)">
<div
v-if="collection && collection.hide_items_thumbnail_on_lists != 'yes'"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium') + ')' }"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type) + ')' }"
class="card-thumbnail">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
v-if="item.thumbnail != undefined"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type)">
</div>
<div class="list-metadata media-body">
@ -656,7 +656,7 @@
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
v-if="item.thumbnail != undefined"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)">
</div>
<span
v-for="(column, metadatumIndex) in displayedMetadata"
@ -830,7 +830,7 @@
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
class="table-thumb"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_type)">
</span>
<p
v-tooltip="{
@ -1035,7 +1035,7 @@
v-if="item.thumbnail != undefined">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)">
</div>
<div class="list-metadata media-body">
<span
@ -1080,7 +1080,6 @@ export default {
return {
isAllItemsSelected: false,
queryAllItemsSelected: {},
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
cursorPosX: -1,
cursorPosY: -1,
contextMenuItem: null,

View File

@ -120,14 +120,14 @@
if (this.itemMetadatum.value && (Array.isArray( this.itemMetadatum.value ) ? this.itemMetadatum.value.length > 0 : true )) {
let query = qs.stringify({ postin: ( Array.isArray( this.itemMetadatum.value ) ) ? this.itemMetadatum.value : [ this.itemMetadatum.value ] });
query += this.itemMetadatum.metadatum.metadata_type_options.search ? '&fetch_only_meta=' + this.itemMetadatum.metadatum.metadata_type_options.search : '';
axios.get('/collection/' + this.collectionId + '/items?' + query + '&nopaging=1&fetch_only=title,thumbnail&order=asc')
axios.get('/collection/' + this.collectionId + '/items?' + query + '&nopaging=1&fetch_only=title,document_type,thumbnail&order=asc')
.then( res => {
if (res.data.items) {
for (let item of res.data.items)
this.selected.push({
label: this.getItemLabel(item),
value: item.id,
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small')
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_type)
});
}
})
@ -194,7 +194,7 @@
this.options.push({
label: this.getItemLabel(item),
value: item.id,
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small')
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_type)
})
}
if (res.headers['x-wp-total'])

View File

@ -49,7 +49,7 @@
<picture>
<img
width="150px"
:src="diff.old ? diff.old : placeholderSquareImage"
:src="diff.old ? diff.old : $thumbHelper.getEmptyThumbnailPlaceholder()"
:alt="attributeName">
</picture>
</div>
@ -158,7 +158,7 @@
<picture>
<img
width="150px"
:src="diff.new ? diff.new : placeholderSquareImage"
:src="diff.new ? diff.new : $thumbHelper.getEmptyThumbnailPlaceholder()"
:alt="attributeName">
</picture>
</div>
@ -622,7 +622,6 @@
infoEmpty: `[ ${this.$i18n.get('info_empty').toLowerCase()} ]`,
dateFormat: '',
activityCreationDate: '',
placeholderSquareImage: `${tainacan_plugin.base_url}/assets/images/placeholder_square.png`,
isLoadingActivity: false,
adminFullURL: tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#',
}

View File

@ -36,7 +36,6 @@ export const filterTypeMixin = {
export const dynamicFilterTypeMixin = {
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
getOptionsValuesCancel: undefined,
isLoadingOptions: false,
facetSearchPage: 1

View File

@ -357,7 +357,7 @@ export const ThumbnailHelperPlugin = {};
ThumbnailHelperPlugin.install = function (Vue, options = {}) {
Vue.prototype.$thumbHelper = {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
imagesFolderPath: tainacan_plugin.base_url + '/assets/images/',
getSrc(thumbnail, tainacanSize, documentType) {
let wordpressSize = '';
@ -375,13 +375,67 @@ ThumbnailHelperPlugin.install = function (Vue, options = {}) {
wordpressSize = 'thumbnail';
}
let thumbnailPlaceholder = '';
return (thumbnail && thumbnail[tainacanSize]) ? thumbnail[tainacanSize][0] : ((thumbnail && thumbnail[wordpressSize]) ? thumbnail[wordpressSize][0] : this.getEmptyThumbnailPlaceholder(documentType, tainacanSize));
},
getEmptyThumbnailPlaceholder(documentType, tainacanSize) {
let imageSrc = '';
switch(documentType) {
case 'image/png':
case 'image/jpeg':
case 'image/gif':
case 'image/bmp':
case 'image/webp':
case 'image/svg+xml':
imageSrc = 'placeholder_image';
break;
case 'audio/midi':
case 'audio/mpeg':
case 'audio/webm':
case 'audio/ogg':
case 'audio/wav':
imageSrc = 'placeholder_audio';
break;
case 'text':
case 'text/plain':
case 'text/html':
case 'text/css':
case 'text/javascript':
case 'text/csv':
imageSrc = 'placeholder_text';
break;
case 'video/webm':
case 'video/ogg':
case 'video/mpeg':
imageSrc = 'placeholder_video';
break;
case 'url':
imageSrc = 'url';
break;
case 'application/pdf':
imageSrc = 'placeholder_pdf';
break;
case 'empty':
default:
thumbnailPlaceholder = this.thumbPlaceholderPath;
imageSrc = 'placeholder_square';
}
return (thumbnail && thumbnail[tainacanSize]) ? thumbnail[tainacanSize][0] : ((thumbnail && thumbnail[wordpressSize]) ? thumbnail[wordpressSize][0] : thumbnailPlaceholder);
return this.getEmptyThumbnailPlaceholderBySize(imageSrc, tainacanSize);
},
getEmptyThumbnailPlaceholderBySize(imageSrc, tainacanSize) {
switch(tainacanSize) {
case 'tainacan-medium-full':
case 'tainacan-medium':
case 'medium_large':
case 'medium':
return this.imagesFolderPath + imageSrc + '_medium.png';
case 'tainacan-small':
case 'thumbnail':
return this.imagesFolderPath + imageSrc + '_small.png';
case 'full':
default:
return this.imagesFolderPath + imageSrc + '.png';
}
}
}
};

View File

@ -79,9 +79,9 @@
:size="178"
:file="{
media_type: 'image',
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium') ] },
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type) ] },
title: $i18n.get('label_thumbnail'),
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(item['thumbnail'], 'full') + `'/>`
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(item['thumbnail'], 'full', item.document_type) + `'/>`
}"/>
<figure
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))"
@ -89,7 +89,7 @@
<span class="image-placeholder">{{ $i18n.get('label_empty_thumbnail') }}</span>
<img
:alt="$i18n.get('label_thumbnail')"
:src="thumbPlaceholderPath">
:src="$thumbHelper.getEmptyThumbnailPlaceholder(item.document_type)">
</figure>
</div>
<br>
@ -346,7 +346,6 @@
itemRequestCancel: undefined,
isLoading: false,
open: true,
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
urls_open: false,
activeTab: 0
}

View File

@ -73,12 +73,12 @@
<div class="media">
<div
v-if="!shouldHideItemsThumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium') + ')' }"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type) + ')' }"
class="card-thumbnail">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
v-if="item.thumbnail != undefined"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_type)">
</div>
<div class="skeleton"/>

View File

@ -80,7 +80,7 @@
v-if="item.thumbnail != undefined">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)">
</div>
<div class="list-metadata media-body">
<span

View File

@ -69,11 +69,11 @@
<div
v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full') + ')' }">
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type) + ')' }">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:style="{ minHeight: getItemImageHeight(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'}"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')" >
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)" >
</div>
</a>
</masonry>

View File

@ -87,7 +87,7 @@
v-if="item.thumbnail != undefined">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_type)">
<div
:style="{
minHeight: getItemImageHeight(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',

View File

@ -158,7 +158,7 @@
<p>{{ $i18n.get('label_document_empty') }}</p>
<img
:alt="$i18n.get('label_document_empty')"
:src="thumbPlaceholderPath">
:src="$thumbHelper.getEmptyThumbnailPlaceholder(item.document_type)">
</div>
</div>
</transition>
@ -452,7 +452,7 @@ export default {
<img
alt="` + (slideItem['thumbnail_alt'] ? slideItem['thumbnail_alt'] : (self.$i18n.get('label_thumbnail') + ': ' + slideItem.title) ) + `"
class="thumbnail"
src="` + self.$thumbHelper.getSrc(slideItem['thumbnail'], 'tainacan-medium') + `">
src="` + self.$thumbHelper.getSrc(slideItem['thumbnail'], 'tainacan-medium', slideItem.document_type) + `">
</div>`;
},
addSlidesBefore: 2,

View File

@ -172,7 +172,7 @@
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
class="table-thumb"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small')">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_type)">
<div class="skeleton"/>
</span>
</a>

View File

@ -3,7 +3,6 @@ import qs from 'qs';
export const viewModesMixin = {
data() {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
isSlideshowViewModeEnabled: false
}
},