Adds image size option to dynamic block items.
This commit is contained in:
mateuswetah
parent
c8f42c43b6
commit
a02f14ffbc
|
|
@ -37,6 +37,16 @@ add_action( 'after_setup_theme', function() {
|
|||
add_image_size( 'tainacan-medium-full', 205, 1500 );
|
||||
} );
|
||||
|
||||
add_filter( 'image_size_names_choose', function ( $sizes ) {
|
||||
return array_merge( $sizes, array(
|
||||
'tainacan-small' => __( 'Tainacan small (40x40 - cropped)', 'tainacan' ),
|
||||
'tainacan-medium' => __( 'Tainacan medium (275x275 - cropped)', 'tainacan' ),
|
||||
'tainacan-medium-full' => __( 'Tainacan medium full (205x1500 - not cropped)', 'tainacan' )
|
||||
) );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
add_action('init', ['Tainacan\Migrations', 'run_migrations']);
|
||||
|
||||
//https://core.trac.wordpress.org/ticket/23022
|
||||
|
|
|
|||
|
|
@ -14,136 +14,136 @@
|
|||
},
|
||||
"attributes": {
|
||||
"content": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showName": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "grid"
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"gridMargin": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"value": 12
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"showSearchBar": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"collection": {
|
||||
"type": "Object",
|
||||
"type": "object",
|
||||
"value": {}
|
||||
},
|
||||
"searchString": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"value": "search"
|
||||
},
|
||||
"order": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"mosaicHeight": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"value": 280
|
||||
},
|
||||
"mosaicGridColumns": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"value": 3
|
||||
},
|
||||
"mosaicGridRows": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"value": 3
|
||||
},
|
||||
"sampleBackgroundImage": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"mosaicItemFocalPoint": {
|
||||
"type": "Object",
|
||||
"type": "object",
|
||||
"default": {
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
}
|
||||
},
|
||||
"mosaicDensity": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"default": 5
|
||||
},
|
||||
"maxColumnsCount": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"default": 4
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
"imageSize": {
|
||||
"type": "string",
|
||||
"value": "tainacan-medium"
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,213 @@
|
|||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default [
|
||||
/* Deprecated on 0.19 to replace cropImagesToSquare by imageSize feature */
|
||||
{
|
||||
migrate( attributes ) {
|
||||
if (attributes.cropImagesToSquare == true)
|
||||
attributes.imageSize = 'tainacan-medium';
|
||||
else
|
||||
attributes.imageSize = 'tainacan-medium-full';
|
||||
|
||||
return attributes;
|
||||
},
|
||||
attributes: {
|
||||
"content": {
|
||||
"type": "Array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"showName": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "String",
|
||||
"default": "grid"
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"gridMargin": {
|
||||
"type": "Number",
|
||||
"default": 0
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "Number",
|
||||
"value": 12
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showSearchBar": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"collection": {
|
||||
"type": "Object",
|
||||
"value": {}
|
||||
},
|
||||
"searchString": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "String",
|
||||
"value": "search"
|
||||
},
|
||||
"order": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"mosaicHeight": {
|
||||
"type": "Number",
|
||||
"value": 280
|
||||
},
|
||||
"mosaicGridColumns": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"mosaicGridRows": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"sampleBackgroundImage": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"mosaicItemFocalPoint": {
|
||||
"type": "Object",
|
||||
"default": {
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
}
|
||||
},
|
||||
"mosaicDensity": {
|
||||
"type": "Number",
|
||||
"default": 5
|
||||
},
|
||||
"maxColumnsCount": {
|
||||
"type": "Number",
|
||||
"default": 4
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
}
|
||||
},
|
||||
save: function({ attributes, className }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
loadStrategy,
|
||||
selectedItems,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
gridMargin,
|
||||
searchURL,
|
||||
maxItemsNumber,
|
||||
order,
|
||||
showSearchBar,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor,
|
||||
mosaicHeight,
|
||||
mosaicGridRows,
|
||||
mosaicGridColumns,
|
||||
mosaicItemFocalPoint,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="dynamic-items-list"
|
||||
search-url={ searchURL }
|
||||
selected-items={ JSON.stringify(selectedItems) }
|
||||
collection-id={ collectionId }
|
||||
show-image={ '' + showImage }
|
||||
show-name={ '' + showName }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
layout={ layout }
|
||||
load-strategy={ loadStrategy }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-density={ mosaicDensity }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
max-items-number={ maxItemsNumber }
|
||||
order={ order }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated to fix the selection strategy on 0.18.7 */
|
||||
{
|
||||
"attributes": {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,11 @@ const { __ } = wp.i18n;
|
|||
|
||||
const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPalette, BaseControl, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
const { InspectorControls, BlockControls, useBlockProps, store } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
const { useSelect } = wp.data;
|
||||
|
||||
import { get, filter, map, pick } from 'lodash';
|
||||
import DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js';
|
||||
import tainacan from '../../js/axios.js';
|
||||
import axios from 'axios';
|
||||
|
|
@ -44,7 +47,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
sampleBackgroundImage,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
imageSize
|
||||
} = attributes;
|
||||
|
||||
// Gets blocks props from hook
|
||||
|
|
@ -59,15 +62,47 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
maxColumnsCount = 5;
|
||||
setAttributes({ maxColumnsCount: maxColumnsCount });
|
||||
}
|
||||
if (cropImagesToSquare === undefined) {
|
||||
cropImagesToSquare = true;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
}
|
||||
if (loadStrategy === undefined) {
|
||||
loadStrategy = 'search';
|
||||
setAttributes({ loadStrategy: loadStrategy });
|
||||
}
|
||||
|
||||
|
||||
const layoutControls = [
|
||||
{
|
||||
icon: 'grid-view',
|
||||
title: __( 'Grid View', 'tainacan' ),
|
||||
onClick: () => updateLayout('grid'),
|
||||
isActive: layout === 'grid',
|
||||
},
|
||||
{
|
||||
icon: 'list-view',
|
||||
title: __( 'List View', 'tainacan' ),
|
||||
onClick: () => updateLayout('list'),
|
||||
isActive: layout === 'list',
|
||||
},
|
||||
{
|
||||
icon: 'layout',
|
||||
title: __( 'Mosaic View', 'tainacan' ),
|
||||
onClick: () => updateLayout('mosaic'),
|
||||
isActive: layout === 'mosaic',
|
||||
}
|
||||
];
|
||||
|
||||
const { imageSizes } = useSelect(
|
||||
( select ) => {
|
||||
const { getSettings } = select( store );
|
||||
|
||||
const settings = pick( getSettings(), [
|
||||
'imageSizes'
|
||||
] );
|
||||
return settings
|
||||
},
|
||||
[ clientId ]
|
||||
);
|
||||
const imageSizeOptions = map(
|
||||
imageSizes,
|
||||
( { name, slug } ) => ( { value: slug, label: name } )
|
||||
);
|
||||
function prepareItem(item) {
|
||||
return (
|
||||
<li
|
||||
|
|
@ -98,8 +133,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
onClick={ (event) => event.preventDefault() }
|
||||
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
|
||||
<img
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
|
||||
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype']) }
|
||||
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype']) }
|
||||
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
|
||||
{ item.title ?
|
||||
<span>{ item.title }</span>
|
||||
|
|
@ -468,27 +503,6 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
// Executed only on the first load of page
|
||||
if(content && content.length && content[0].type)
|
||||
setContent();
|
||||
|
||||
const layoutControls = [
|
||||
{
|
||||
icon: 'grid-view',
|
||||
title: __( 'Grid View', 'tainacan' ),
|
||||
onClick: () => updateLayout('grid'),
|
||||
isActive: layout === 'grid',
|
||||
},
|
||||
{
|
||||
icon: 'list-view',
|
||||
title: __( 'List View', 'tainacan' ),
|
||||
onClick: () => updateLayout('list'),
|
||||
isActive: layout === 'list',
|
||||
},
|
||||
{
|
||||
icon: 'layout',
|
||||
title: __( 'Mosaic View', 'tainacan' ),
|
||||
onClick: () => updateLayout('mosaic'),
|
||||
isActive: layout === 'mosaic',
|
||||
}
|
||||
];
|
||||
|
||||
return content == 'preview' ?
|
||||
<div className={className}>
|
||||
|
|
@ -701,19 +715,18 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
min={ 1 }
|
||||
max={ 7 }
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Crop Images', 'tainacan')}
|
||||
help={ cropImagesToSquare ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
|
||||
checked={ cropImagesToSquare }
|
||||
onChange={ ( isChecked ) => {
|
||||
cropImagesToSquare = isChecked;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
: null }
|
||||
<SelectControl
|
||||
label={__('Image size', 'tainacan')}
|
||||
value={ imageSize }
|
||||
options={ imageSizeOptions }
|
||||
onChange={ ( anImageSize ) => {
|
||||
imageSize = anImageSize;
|
||||
setAttributes({ imageSize: imageSize });
|
||||
setContent();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</PanelBody>
|
||||
{ layout == 'mosaic' ?
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function({ attributes, className }) {
|
|||
mosaicItemFocalPoint,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
imageSize
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
|
|
@ -41,7 +41,7 @@ export default function({ attributes, className }) {
|
|||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
image-size={ imageSize }
|
||||
layout={ layout }
|
||||
load-strategy={ loadStrategy }
|
||||
mosaic-height={ mosaicHeight }
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default (element) => {
|
|||
mosaicItemFocalPointX : 0.5,
|
||||
mosaicItemFocalPointY : 0.5,
|
||||
maxColumnsCount: 4,
|
||||
cropImagesToSquare: true,
|
||||
imageSize: 'tainacan-medium',
|
||||
order: 'asc',
|
||||
showSearchBar: false,
|
||||
showCollectionHeader: false,
|
||||
|
|
@ -69,7 +69,7 @@ export default (element) => {
|
|||
mosaicItemFocalPointX: this.mosaicItemFocalPointX,
|
||||
mosaicItemFocalPointY: this.mosaicItemFocalPointY,
|
||||
maxColumnsCount: this.maxColumnsCount,
|
||||
cropImagesToSquare: this.cropImagesToSquare,
|
||||
imageSize: this.imageSize,
|
||||
searchURL: this.searchURL,
|
||||
selectedItems: this.selectedItems,
|
||||
loadStrategy: this.loadStrategy,
|
||||
|
|
@ -104,7 +104,7 @@ export default (element) => {
|
|||
this.mosaicItemFocalPointX = this.$el.attributes['mosaic-item-focal-point-x'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-x'].value) : undefined;
|
||||
this.mosaicItemFocalPointY = this.$el.attributes['mosaic-item-focal-point-y'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-y'].value) : undefined;
|
||||
this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 4;
|
||||
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true;
|
||||
this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
|
||||
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
|
||||
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
<div
|
||||
:style="{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail[imageSize] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail[imageSize] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
}"
|
||||
:class="
|
||||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail[imageSize] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
">
|
||||
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
|
||||
<span
|
||||
|
|
@ -33,17 +33,17 @@
|
|||
</h3>
|
||||
</div>
|
||||
<div
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium'])"
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail[imageSize] || collection.thumbnail['medium'])"
|
||||
class="collection-thumbnail"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] != undefined ? (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
backgroundImage: 'url(' + (collection.thumbnail[imageSize] != undefined ? (collection.thumbnail[imageSize][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
}"/>
|
||||
<div
|
||||
class="collection-header-image"
|
||||
:style="{
|
||||
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
|
||||
minHeight: collection && collection.header_image ? '' : '80px',
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail[imageSize] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
}"/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -206,11 +206,11 @@
|
|||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||
<blur-hash-image
|
||||
v-if="showImage"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="item.title">{{ item.title }}</span>
|
||||
|
|
@ -244,7 +244,7 @@
|
|||
v-for="(item, index) of mosaicGroup"
|
||||
class="item-list-item"
|
||||
:style="{
|
||||
backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], 'medium_large', item['document_mimetype'])})` : 'none',
|
||||
backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])})` : 'none',
|
||||
backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none'
|
||||
}">
|
||||
<a
|
||||
|
|
@ -252,11 +252,11 @@
|
|||
:href="item.url"
|
||||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||
<blur-hash-image
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="item.title">{{ item.title }}</span>
|
||||
|
|
@ -297,7 +297,7 @@ export default {
|
|||
mosaicItemFocalPointX: Number,
|
||||
mosaicItemFocalPointY: Number,
|
||||
maxColumnsCount: Number,
|
||||
cropImagesToSquare: Boolean,
|
||||
imageSize: String,
|
||||
order: String,
|
||||
showSearchBar: Boolean,
|
||||
showCollectionHeader: Boolean,
|
||||
|
|
|
|||
Loading…
Reference in New Issue