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

Replaces cropImageToSquare by imageSize on collections carousel. #706.

This commit is contained in:
mateuswetah 2022-06-02 11:14:44 -03:00
parent ac4723d645
commit 0180440243
8 changed files with 254 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/views/gutenberg-blocks/blocks/carousel-collections-list/block.json
View File

@ -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"
}
},

151
src/views/gutenberg-blocks/blocks/carousel-collections-list/deprecated.js
View File

@ -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": {

71
src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js
View File

@ -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 });
setContent();
}
}
/>
: null }
<SelectControl
label={__('Image size', 'tainacan')}
value={ imageSize }
options={ imageSizeOptions }
onChange={ ( anImageSize ) => {
imageSize = anImageSize;
setAttributes({ imageSize: imageSize });
setContent();
}}
/>
<RangeControl
label={ __('Space between each collection', 'tainacan') }
value={ !isNaN(spaceBetweenCollections) ? spaceBetweenCollections : 32 }

4
src/views/gutenberg-blocks/blocks/carousel-collections-list/save.js
View File

@ -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 }

6
src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.js
View File

@ -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;

44
src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
View File

@ -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,

4
src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
View File

@ -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(

4
src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
View File

@ -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 = [
{