Replaces cropImageToSquare by imageSize on collections carousel. #706.
This commit is contained in:
parent
ac4723d645
commit
0180440243
|
@ -33,91 +33,91 @@
|
|||
"selector": "div"
|
||||
},
|
||||
"collections": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"selectedCollections": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": false
|
||||
},
|
||||
"maxCollectionsNumber": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"value": false
|
||||
},
|
||||
"maxCollectionsPerScreen": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"value": 6
|
||||
},
|
||||
"spaceBetweenCollections": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"value": 32
|
||||
},
|
||||
"spaceAroundCarousel": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"value": 50
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"arrowsPosition": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"value": "around"
|
||||
},
|
||||
"largeArrows": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"arrowsStyle": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"value": "type-1"
|
||||
},
|
||||
"autoPlay": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"autoPlaySpeed": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"value": 3
|
||||
},
|
||||
"loopSlides": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"hideName": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": true
|
||||
},
|
||||
"showCollectionThumbnail": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"value": false
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
"imageSize": {
|
||||
"type": "string",
|
||||
"value": "tainacan-medium"
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#ffffff"
|
||||
}
|
||||
},
|
||||
|
|
|
@ -1,6 +1,157 @@
|
|||
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"
|
||||
},
|
||||
"collections": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"selectedCollections": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"default": false
|
||||
},
|
||||
"maxCollectionsNumber": {
|
||||
"type": "Number",
|
||||
"value": false
|
||||
},
|
||||
"maxCollectionsPerScreen": {
|
||||
"type": "Number",
|
||||
"value": 6
|
||||
},
|
||||
"spaceBetweenCollections": {
|
||||
"type": "Number",
|
||||
"value": 32
|
||||
},
|
||||
"spaceAroundCarousel": {
|
||||
"type": "Number",
|
||||
"value": 50
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"arrowsPosition": {
|
||||
"type": "String",
|
||||
"value": "around"
|
||||
},
|
||||
"largeArrows": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"arrowsStyle": {
|
||||
"type": "String",
|
||||
"value": "type-1"
|
||||
},
|
||||
"autoPlay": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"autoPlaySpeed": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"loopSlides": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"hideName": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
},
|
||||
"showCollectionThumbnail": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"default": "#ffffff"
|
||||
}
|
||||
},
|
||||
save: function ({ attributes, className }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
selectedCollections,
|
||||
arrowsPosition,
|
||||
largeArrows,
|
||||
arrowsStyle,
|
||||
cropImagesToSquare,
|
||||
maxCollectionsPerScreen,
|
||||
maxCollectionsNumber,
|
||||
spaceBetweenCollections,
|
||||
spaceAroundCarousel,
|
||||
autoPlay,
|
||||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
hideName,
|
||||
showCollectionThumbnail
|
||||
} = 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="carousel-collections-list"
|
||||
selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.id })) }
|
||||
arrows-position={ arrowsPosition }
|
||||
auto-play={ '' + autoPlay }
|
||||
auto-play-speed={ autoPlaySpeed }
|
||||
loop-slides={ '' + loopSlides }
|
||||
hide-name={ '' + hideName }
|
||||
large-arrows={ '' + largeArrows }
|
||||
arrows-style={ arrowsStyle }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
max-collections-number={ maxCollectionsNumber }
|
||||
max-collections-per-screen={ maxCollectionsPerScreen }
|
||||
space-between-collections={ spaceBetweenCollections }
|
||||
space-around-carousel={ spaceAroundCarousel }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
show-collection-thumbnail={ '' + showCollectionThumbnail }
|
||||
id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
|
||||
{
|
||||
"attributes": {
|
||||
|
|
|
@ -1,9 +1,12 @@
|
|||
const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, 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 { __ } = wp.i18n;
|
||||
|
||||
const { useSelect } = wp.data;
|
||||
|
||||
import { map, pick } from 'lodash';
|
||||
import CarouselCollectionsModal from './carousel-collections-modal.js';
|
||||
import tainacan from '../../js/axios.js';
|
||||
import axios from 'axios';
|
||||
|
@ -24,7 +27,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
selectedCollections,
|
||||
largeArrows,
|
||||
arrowsStyle,
|
||||
cropImagesToSquare,
|
||||
imageSize,
|
||||
maxCollectionsPerScreen,
|
||||
spaceBetweenCollections,
|
||||
spaceAroundCarousel,
|
||||
|
@ -48,13 +51,30 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
maxCollectionsPerScreen = 6;
|
||||
setAttributes({ maxCollectionsPerScreen: maxCollectionsPerScreen });
|
||||
}
|
||||
if (cropImagesToSquare === undefined) {
|
||||
cropImagesToSquare = true;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
if (imageSize === undefined) {
|
||||
imageSize = 'tainacan-medium';
|
||||
setAttributes({ imageSize: imageSize });
|
||||
}
|
||||
|
||||
const thumbHelper = ThumbnailHelperFunctions();
|
||||
|
||||
// Get available image sizes
|
||||
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(collection, collectionItems) {
|
||||
return (
|
||||
<li
|
||||
|
@ -77,24 +97,24 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
{ ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ?
|
||||
<div class="collection-items-grid">
|
||||
<img
|
||||
src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
alt={ collectionItems[0] && collectionItems[0].thumbnail_alt ? collectionItems[0].thumbnail_alt : (collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' )) } />
|
||||
<img
|
||||
src={ collectionItems[1] ? thumbHelper.getSrc(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[1] ? thumbHelper.getSrcSet(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
src={ collectionItems[1] ? thumbHelper.getSrc(collectionItems[1]['thumbnail'], imageSize, collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[1] ? thumbHelper.getSrcSet(collectionItems[1]['thumbnail'], imageSize, collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
alt={ collectionItems[1] && collectionItems[1].thumbnail_alt ? collectionItems[1].thumbnail_alt : (collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' )) } />
|
||||
<img
|
||||
src={ collectionItems[2] ? thumbHelper.getSrc(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[2] ? thumbHelper.getSrcSet(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
src={ collectionItems[2] ? thumbHelper.getSrc(collectionItems[2]['thumbnail'], imageSize, collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[2] ? thumbHelper.getSrcSet(collectionItems[2]['thumbnail'], imageSize, collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
alt={ collectionItems[2] && collectionItems[2].thumbnail_alt ? collectionItems[2].thumbnail_alt : (collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' )) } />
|
||||
</div>
|
||||
:
|
||||
<img
|
||||
src={
|
||||
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
|
@ -237,7 +257,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
</BaseControl>
|
||||
<RangeControl
|
||||
label={ __('Maximum collections per slide on a wide screen', 'tainacan') }
|
||||
help={ (showCollectionThumbnail && maxCollectionsPerScreen <= 4) ? __('Warning: with such a small number of collections per slide, the image size is greater, thus the cropped version of the thumbnail won\'t be used.', 'tainacan') : null }
|
||||
help={ (showCollectionThumbnail && maxCollectionsPerScreen <= 4) ? __('Warning: with such a small number of collections per slide, the slide item is larger, thus you must also set a larger image size.', 'tainacan') : null }
|
||||
value={ maxCollectionsPerScreen ? maxCollectionsPerScreen : 6 }
|
||||
onChange={ ( aMaxCollectionsPerScreen ) => {
|
||||
maxCollectionsPerScreen = aMaxCollectionsPerScreen;
|
||||
|
@ -247,19 +267,16 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
min={ 1 }
|
||||
max={ 9 }
|
||||
/>
|
||||
{ showCollectionThumbnail ?
|
||||
<ToggleControl
|
||||
label={__('Crop Images', 'tainacan')}
|
||||
help={ cropImagesToSquare && maxCollectionsPerScreen > 4 ? __('Do not use square cropeed version of the collection thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the collection thumbnail.', 'tainacan') }
|
||||
checked={ cropImagesToSquare && maxCollectionsPerScreen > 4 }
|
||||
onChange={ ( isChecked ) => {
|
||||
cropImagesToSquare = isChecked;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
<SelectControl
|
||||
label={__('Image size', 'tainacan')}
|
||||
value={ imageSize }
|
||||
options={ imageSizeOptions }
|
||||
onChange={ ( anImageSize ) => {
|
||||
imageSize = anImageSize;
|
||||
setAttributes({ imageSize: imageSize });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
: null }
|
||||
<RangeControl
|
||||
label={ __('Space between each collection', 'tainacan') }
|
||||
value={ !isNaN(spaceBetweenCollections) ? spaceBetweenCollections : 32 }
|
||||
|
|
|
@ -8,7 +8,7 @@ export default function ({ attributes, className }) {
|
|||
arrowsPosition,
|
||||
largeArrows,
|
||||
arrowsStyle,
|
||||
cropImagesToSquare,
|
||||
imageSize,
|
||||
maxCollectionsPerScreen,
|
||||
maxCollectionsNumber,
|
||||
spaceBetweenCollections,
|
||||
|
@ -33,7 +33,7 @@ export default function ({ attributes, className }) {
|
|||
hide-name={ '' + hideName }
|
||||
large-arrows={ '' + largeArrows }
|
||||
arrows-style={ arrowsStyle }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
image-size={ imageSize }
|
||||
max-collections-number={ maxCollectionsNumber }
|
||||
max-collections-per-screen={ maxCollectionsPerScreen }
|
||||
space-between-collections={ spaceBetweenCollections }
|
||||
|
|
|
@ -36,7 +36,7 @@ export default (element) => {
|
|||
maxCollectionsPerScreen: 6,
|
||||
spaceBetweenCollections: 32,
|
||||
spaceAroundCarousel: 50,
|
||||
cropImagesToSquare: true,
|
||||
imageSize: 'tainacan-medium',
|
||||
loopSlides: false,
|
||||
hideName: true,
|
||||
showCollectionThumbnail: false,
|
||||
|
@ -57,7 +57,7 @@ export default (element) => {
|
|||
loopSlides: this.loopSlides,
|
||||
largeArrows: this.largeArrows,
|
||||
arrowsStyle: this.arrowsStyle,
|
||||
cropImagesToSquare: this.cropImagesToSquare,
|
||||
imageSize: this.imageSize,
|
||||
maxCollectionsPerScreen: this.maxCollectionsPerScreen,
|
||||
spaceBetweenCollections: this.spaceBetweenCollections,
|
||||
spaceAroundCarousel: this.spaceAroundCarousel,
|
||||
|
@ -83,7 +83,7 @@ export default (element) => {
|
|||
this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
|
||||
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
|
||||
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
|
||||
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : false;
|
||||
this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
|
||||
this.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false;
|
||||
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
|
||||
|
|
|
@ -39,22 +39,22 @@
|
|||
:href="collection.url">
|
||||
<img
|
||||
:src="
|
||||
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
collection.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:data-src="
|
||||
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
collection.thumbnail['thumbnail'][0]
|
||||
:
|
||||
|
@ -69,27 +69,27 @@
|
|||
:href="collection.url">
|
||||
<div class="collection-items-grid">
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="collectionItems[collection.id][0] ? $thumbHelper.getWidth(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="collectionItems[collection.id][0] ? $thumbHelper.getSrc(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][0] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][0] ? $thumbHelper.getWidth(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][0] ? $thumbHelper.getSrc(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][0] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][0]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][0] && collectionItems[collection.id][0].thumbnail_alt ? collectionItems[collection.id][0].thumbnail_alt : (collectionItems[collection.id][0] && collectionItems[collection.id][0].name ? collectionItems[collection.id][0].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="collectionItems[collection.id][1] ? $thumbHelper.getWidth(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="collectionItems[collection.id][1] ? $thumbHelper.getSrc(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][1] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][1] ? $thumbHelper.getWidth(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][1] ? $thumbHelper.getSrc(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][1] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][1]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][1] && collectionItems[collection.id][1].thumbnail_alt ? collectionItems[collection.id][1].thumbnail_alt : (collectionItems[collection.id][1] && collectionItems[collection.id][1].name ? collectionItems[collection.id][1].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="collectionItems[collection.id][2] ? $thumbHelper.getWidth(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="collectionItems[collection.id][2] ? $thumbHelper.getSrc(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][2] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][2] ? $thumbHelper.getWidth(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][2] ? $thumbHelper.getSrc(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][2] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][2]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][2] && collectionItems[collection.id][2].thumbnail_alt ? collectionItems[collection.id][2].thumbnail_alt : (collectionItems[collection.id][2] && collectionItems[collection.id][2].name ? collectionItems[collection.id][2].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
</div>
|
||||
|
@ -172,7 +172,7 @@ export default {
|
|||
hideName: Boolean,
|
||||
largeArrows: Boolean,
|
||||
arrowsStyle: String,
|
||||
cropImagesToSquare: Boolean,
|
||||
imageSize: String,
|
||||
showCollectionThumbnail: Boolean,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String,
|
||||
|
|
|
@ -66,6 +66,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
maxItemsNumber = 12;
|
||||
setAttributes({ maxItemsNumber: maxItemsNumber });
|
||||
}
|
||||
if (imageSize === undefined) {
|
||||
imageSize = 'tainacan-medium';
|
||||
setAttributes({ imageSize: imageSize });
|
||||
}
|
||||
|
||||
// Get available image sizes
|
||||
const { imageSizes } = useSelect(
|
||||
|
|
|
@ -70,6 +70,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
loadStrategy = 'search';
|
||||
setAttributes({ loadStrategy: loadStrategy });
|
||||
}
|
||||
if (imageSize === undefined) {
|
||||
imageSize = 'tainacan-medium';
|
||||
setAttributes({ imageSize: imageSize });
|
||||
}
|
||||
|
||||
const layoutControls = [
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue