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

Creates helper plugin to handle thumbnail src. #456.

This commit is contained in:
mateuswetah 2020-12-15 17:25:11 -03:00
parent 12820be07c
commit d2adfff6a1
21 changed files with 90 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,13 +47,13 @@
<file-item
v-if="collection.thumbnail != undefined && ((collection.thumbnail['tainacan-medium'] != undefined && collection.thumbnail['tainacan-medium'] != false) || (collection.thumbnail.medium != undefined && collection.thumbnail.medium != false))"
:show-name="false"
:modal-on-click="false"
:modal-on-click="true"
:size="178"
:file="{
media_type: 'image',
thumbnails: { 'tainacan-medium': [ collection.thumbnail['tainacan-medium'] ? collection.thumbnail['tainacan-medium'][0] : collection.thumbnail.medium[0] ] },
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium') ] },
title: $i18n.get('label_thumbnail'),
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + collection.thumbnail.full[0] + `'/>`
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(collection['thumbnail'], 'full') + `'/>`
}"/>
<figure
v-if="collection.thumbnail == undefined || ((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail['tainacan-medium'] == undefined || collection.thumbnail['tainacan-medium'] == false))"

2
src/views/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="$i18n.get('label_thumbnail') + ': ' + item.title"
:src="item.thumbnail['tainacan-small'] ? item.thumbnail['tainacan-small'][0] : (item.thumbnail.thumbnail ? item.thumbnail.thumbnail[0] : thumbPlaceholderPath)" >
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small')" >
<span
class="document-name"
v-html="item.title" />

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

@ -305,9 +305,9 @@
:size="178"
:file="{
media_type: 'image',
thumbnails: { 'tainacan-medium': [ item.thumbnail['tainacan-medium'] ? item.thumbnail['tainacan-medium'][0] : item.thumbnail.medium[0] ] },
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium') ] },
title: $i18n.get('label_thumbnail'),
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + item.thumbnail.full[0] + `'/>`
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(item['thumbnail'], 'full') + `'/>`
}"/>
<figure
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))"

2
src/views/admin/components/filter-types/taginput/Taginput.vue
View File

@ -173,7 +173,7 @@
this.selected.push({
label: item.title,
value: item.id,
img: item.thumbnail && item.thumbnail.thumbnail && item.thumbnail.thumbnail[0] ? item.thumbnail.thumbnail[0] : null
img: item.thumbnail ? this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small') : null
});
}
}

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

@ -239,7 +239,7 @@
<img
:alt="$i18n.get('label_thumbnail')"
v-if="collection.thumbnail != undefined"
:src="collection['thumbnail']['tainacan-medium'] ? collection['thumbnail']['tainacan-medium'][0] : (collection['thumbnail'].medium ? collection['thumbnail'].medium[0] : thumbPlaceholderPath)">
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')">
<!-- Name -->
<div class="metadata-title">

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

@ -148,7 +148,7 @@
<img
:alt="$i18n.get('label_thumbnail')"
class="table-thumb"
:src="(collection.thumbnail && collection.thumbnail.thumbnail ) ? collection.thumbnail.thumbnail[0] : thumbPlaceholderPath">
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-small')">
</span>
</td>
<!-- Name -->

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

@ -177,10 +177,10 @@
@click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)"
class="grid-item-thumbnail"
:style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }">
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium') + ')' }">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium')">
</a>
<!-- Actions -->
@ -291,10 +291,10 @@
@click.right="onRightClickItem($event, item)"
v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail"
:style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)) + ')' }">
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full') + ')' }">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:src="item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')">
</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(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium') + ')' }"
class="card-thumbnail">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
v-if="item.thumbnail != undefined"
:src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium')">
</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="item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')">
</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="item['thumbnail']['tainacan-small'] ? item['thumbnail']['tainacan-small'][0] : (item['thumbnail'].thumbnail ? item['thumbnail'].thumbnail[0] : thumbPlaceholderPath)">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small')">
</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="item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)">
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')">
</div>
<div class="list-metadata media-body">
<span

4
src/views/admin/components/metadata-types/relationship/Relationship.vue
View File

@ -127,7 +127,7 @@
this.selected.push({
label: this.getItemLabel(item),
value: item.id,
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : ''
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small')
});
}
})
@ -194,7 +194,7 @@
this.options.push({
label: this.getItemLabel(item),
value: item.id,
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : ''
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small')
})
}
if (res.headers['x-wp-total'])

4
src/views/admin/components/metadata-types/taxonomy/FormTaxonomy.vue
View File

@ -118,12 +118,12 @@
<template slot-scope="props">
<div class="media">
<div
v-if="props.option.thumbnail && props.option.thumbnail.thumbnail && props.option.thumbnail.thumbnail[0]"
v-if="props.option.thumbnail && props.option.thumbnail['tainacan-small'] && props.option.thumbnail['tainacan-small']"
class="media-left">
<img
width="24"
:alt="$i18n.get('label_thumbnail')"
:src="props.option.thumbnail.thumbnail[0]" >
:src="$thumbHelper.getSrc(props.option['thumbnail'], 'tainacan-small')" >
</div>
<div class="media-content">
{{ props.option.name }}

8
src/views/admin/js/filter-types-mixin.js
View File

@ -304,14 +304,14 @@ export const dynamicFilterTypeMixin = {
sResults.push({
label: item.label,
value: item.value,
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : (item.img ? item.img : ''),
img: item.thumbnail ? this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small') : (item.img ? item.img : ''),
total_items: item.total_items
});
} else if (indexToIgnore < 0) {
opts.push({
label: item.label,
value: item.value,
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : (item.img ? item.img : ''),
img: item.thumbnail ? this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small') : (item.img ? item.img : ''),
total_items: item.total_items
});
}
@ -320,14 +320,14 @@ export const dynamicFilterTypeMixin = {
sResults.push({
label: item.label,
value: item.value,
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : (item.img ? item.img : ''),
img: item.thumbnail ? this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small') : (item.img ? item.img : ''),
total_items: item.total_items
});
} else {
opts.push({
label: item.label,
value: item.value,
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : (item.img ? item.img : ''),
img: item.thumbnail ? this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small') : (item.img ? item.img : ''),
total_items: item.total_items
});
}

12
src/views/admin/js/main.js
View File

@ -62,7 +62,16 @@ import store from './store/store'
import router from './router'
import eventBusSearch from './event-bus-search';
import eventBusTermsList from './event-bus-terms-list.js';
import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin, UserCapabilitiesPlugin, StatusHelperPlugin, CommentsStatusHelperPlugin } from './utilities';
import {
I18NPlugin,
UserPrefsPlugin,
RouterHelperPlugin,
ConsolePlugin,
UserCapabilitiesPlugin,
ThumbnailHelperPlugin,
StatusHelperPlugin,
CommentsStatusHelperPlugin
} from './utilities';
/* Registers Extra Vue Plugins passed to the window.tainacan_extra_plugins */
if (typeof window.tainacan_extra_plugins != "undefined") {
@ -80,6 +89,7 @@ Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin);
Vue.use(RouterHelperPlugin);
Vue.use(UserCapabilitiesPlugin);
Vue.use(ThumbnailHelperPlugin);
Vue.use(StatusHelperPlugin);
Vue.use(ConsolePlugin, {visual: false});
Vue.use(VueTheMask);

33
src/views/admin/js/utilities.js
View File

@ -352,6 +352,39 @@ UserCapabilitiesPlugin.install = function (Vue, options = {}) {
}
};
// THUMBNAIL PLUGIN - Translates api path of thumbnails src to render placeholders and propoper sizes.
export const ThumbnailHelperPlugin = {};
ThumbnailHelperPlugin.install = function (Vue, options = {}) {
Vue.prototype.$thumbHelper = {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
getSrc(thumbnail, tainacanSize, documentType) {
let wordpressSize = '';
switch(tainacanSize) {
case 'tainacan-medium-full':
wordpressSize = 'medium_large';
break;
case 'tainacan-medium':
wordpressSize = 'medium';
break;
case 'tainacan-small':
wordpressSize = 'thumbnail';
break;
default:
wordpressSize = 'thumbnail';
}
let thumbnailPlaceholder = '';
switch(documentType) {
default:
thumbnailPlaceholder = this.thumbPlaceholderPath;
}
return (thumbnail && thumbnail[tainacanSize]) ? thumbnail[tainacanSize][0] : ((thumbnail && thumbnail[wordpressSize]) ? thumbnail[wordpressSize][0] : thumbnailPlaceholder);
}
}
};
// STATUS ICONS PLUGIN - Sets icon for status option
export const StatusHelperPlugin = {};

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

@ -79,9 +79,9 @@
:size="178"
:file="{
media_type: 'image',
thumbnails: { 'tainacan-medium': [ item.thumbnail['tainacan-medium'] ? item.thumbnail['tainacan-medium'][0] : item.thumbnail.medium[0] ] },
thumbnails: { 'tainacan-medium': [ $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium') ] },
title: $i18n.get('label_thumbnail'),
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + item.thumbnail.full[0] + `'/>`
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + $thumbHelper.getSrc(item['thumbnail'], 'full') + `'/>`
}"/>
<figure
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))"

4
src/views/theme-search/components/view-mode-cards.vue
View File

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

2
src/views/theme-search/components/view-mode-list.vue
View File

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

4
src/views/theme-search/components/view-mode-masonry.vue
View File

@ -69,11 +69,11 @@
<div
v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail"
:style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)) + ')' }">
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full') + ')' }">
<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="item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)" >
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full')" >
</div>
</a>
</masonry>

2
src/views/theme-search/components/view-mode-records.vue
View File

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

2
src/views/theme-search/components/view-mode-slideshow.vue
View File

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

2
src/views/theme-search/components/view-mode-table.vue
View File

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

8
src/views/theme-search/js/theme-main.js
View File

@ -38,7 +38,12 @@ import ViewModeList from '../components/view-mode-list.vue';
import store from '../../admin/js/store/store';
import routerTheme from './theme-router.js';
import eventBusSearch from '../../admin/js/event-bus-search';
import { I18NPlugin, UserPrefsPlugin, ConsolePlugin } from '../../admin/js/utilities';
import {
I18NPlugin,
UserPrefsPlugin,
ConsolePlugin,
ThumbnailHelperPlugin
} from '../../admin/js/utilities';
document.addEventListener("DOMContentLoaded", () => {
@ -78,6 +83,7 @@ document.addEventListener("DOMContentLoaded", () => {
Vue.use(VueMasonry);
Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin);
Vue.use(ThumbnailHelperPlugin);
Vue.use(ConsolePlugin, {visual: false});
/* Registers Extra Vue Components passed to the window.tainacan_extra_components */

3
src/views/theme-search/pages/theme-items-page.vue
View File

@ -1236,6 +1236,9 @@
.filters-menu {
display: none;
}
.metadata-alert {
position: absolute;
}
}
.advanced-search-criteria-title {