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" "selector": "div"
}, },
"collections": { "collections": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"isModalOpen": { "isModalOpen": {
"type": "Boolean", "type": "boolean",
"default": false "default": false
}, },
"selectedCollections": { "selectedCollections": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"itemsRequestSource": { "itemsRequestSource": {
"type": "String", "type": "string",
"default": false "default": false
}, },
"maxCollectionsNumber": { "maxCollectionsNumber": {
"type": "Number", "type": "number",
"value": false "value": false
}, },
"maxCollectionsPerScreen": { "maxCollectionsPerScreen": {
"type": "Number", "type": "number",
"value": 6 "value": 6
}, },
"spaceBetweenCollections": { "spaceBetweenCollections": {
"type": "Number", "type": "number",
"value": 32 "value": 32
}, },
"spaceAroundCarousel": { "spaceAroundCarousel": {
"type": "Number", "type": "number",
"value": 50 "value": 50
}, },
"isLoading": { "isLoading": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"isLoadingCollection": { "isLoadingCollection": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"arrowsPosition": { "arrowsPosition": {
"type": "String", "type": "string",
"value": "around" "value": "around"
}, },
"largeArrows": { "largeArrows": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"arrowsStyle": { "arrowsStyle": {
"type": "String", "type": "string",
"value": "type-1" "value": "type-1"
}, },
"autoPlay": { "autoPlay": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"autoPlaySpeed": { "autoPlaySpeed": {
"type": "Number", "type": "number",
"value": 3 "value": 3
}, },
"loopSlides": { "loopSlides": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"hideName": { "hideName": {
"type": "Boolean", "type": "boolean",
"value": true "value": true
}, },
"showCollectionThumbnail": { "showCollectionThumbnail": {
"type": "Boolean", "type": "boolean",
"value": false "value": false
}, },
"cropImagesToSquare": { "imageSize": {
"type": "Boolean", "type": "string",
"value": true "value": "tainacan-medium"
}, },
"blockId": { "blockId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"collectionBackgroundColor": { "collectionBackgroundColor": {
"type": "String", "type": "string",
"default": "#454647" "default": "#454647"
}, },
"collectionTextColor": { "collectionTextColor": {
"type": "String", "type": "string",
"default": "#ffffff" "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 ); const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [ 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 */ /* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{ {
"attributes": { "attributes": {

67
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 { 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 { __ } = wp.i18n;
const { useSelect } = wp.data;
import { map, pick } from 'lodash';
import CarouselCollectionsModal from './carousel-collections-modal.js'; import CarouselCollectionsModal from './carousel-collections-modal.js';
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
@ -24,7 +27,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
selectedCollections, selectedCollections,
largeArrows, largeArrows,
arrowsStyle, arrowsStyle,
cropImagesToSquare, imageSize,
maxCollectionsPerScreen, maxCollectionsPerScreen,
spaceBetweenCollections, spaceBetweenCollections,
spaceAroundCarousel, spaceAroundCarousel,
@ -48,13 +51,30 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
maxCollectionsPerScreen = 6; maxCollectionsPerScreen = 6;
setAttributes({ maxCollectionsPerScreen: maxCollectionsPerScreen }); setAttributes({ maxCollectionsPerScreen: maxCollectionsPerScreen });
} }
if (cropImagesToSquare === undefined) { if (imageSize === undefined) {
cropImagesToSquare = true; imageSize = 'tainacan-medium';
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setAttributes({ imageSize: imageSize });
} }
const thumbHelper = ThumbnailHelperFunctions(); 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) { function prepareItem(collection, collectionItems) {
return ( return (
<li <li
@ -77,24 +97,24 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
{ ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ? { ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ?
<div class="collection-items-grid"> <div class="collection-items-grid">
<img <img
src={ collectionItems[0] ? thumbHelper.getSrc(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'], 'tainacan-medium', 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' )) } /> alt={ collectionItems[0] && collectionItems[0].thumbnail_alt ? collectionItems[0].thumbnail_alt : (collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ collectionItems[1] ? thumbHelper.getSrc(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'], 'tainacan-medium', 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' )) } /> alt={ collectionItems[1] && collectionItems[1].thumbnail_alt ? collectionItems[1].thumbnail_alt : (collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ collectionItems[2] ? thumbHelper.getSrc(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'], 'tainacan-medium', 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' )) } /> alt={ collectionItems[2] && collectionItems[2].thumbnail_alt ? collectionItems[2].thumbnail_alt : (collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' )) } />
</div> </div>
: :
<img <img
src={ 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'][0] && collection.thumbnail['thumbnail'][0]
? ?
@ -237,7 +257,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
</BaseControl> </BaseControl>
<RangeControl <RangeControl
label={ __('Maximum collections per slide on a wide screen', 'tainacan') } 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 } value={ maxCollectionsPerScreen ? maxCollectionsPerScreen : 6 }
onChange={ ( aMaxCollectionsPerScreen ) => { onChange={ ( aMaxCollectionsPerScreen ) => {
maxCollectionsPerScreen = aMaxCollectionsPerScreen; maxCollectionsPerScreen = aMaxCollectionsPerScreen;
@ -247,19 +267,16 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
min={ 1 } min={ 1 }
max={ 9 } max={ 9 }
/> />
{ showCollectionThumbnail ? <SelectControl
<ToggleControl label={__('Image size', 'tainacan')}
label={__('Crop Images', 'tainacan')} value={ imageSize }
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') } options={ imageSizeOptions }
checked={ cropImagesToSquare && maxCollectionsPerScreen > 4 } onChange={ ( anImageSize ) => {
onChange={ ( isChecked ) => { imageSize = anImageSize;
cropImagesToSquare = isChecked; setAttributes({ imageSize: imageSize });
setAttributes({ cropImagesToSquare: cropImagesToSquare });
setContent(); setContent();
} }}
}
/> />
: null }
<RangeControl <RangeControl
label={ __('Space between each collection', 'tainacan') } label={ __('Space between each collection', 'tainacan') }
value={ !isNaN(spaceBetweenCollections) ? spaceBetweenCollections : 32 } 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, arrowsPosition,
largeArrows, largeArrows,
arrowsStyle, arrowsStyle,
cropImagesToSquare, imageSize,
maxCollectionsPerScreen, maxCollectionsPerScreen,
maxCollectionsNumber, maxCollectionsNumber,
spaceBetweenCollections, spaceBetweenCollections,
@ -33,7 +33,7 @@ export default function ({ attributes, className }) {
hide-name={ '' + hideName } hide-name={ '' + hideName }
large-arrows={ '' + largeArrows } large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle } arrows-style={ arrowsStyle }
crop-images-to-square={ '' + cropImagesToSquare } image-size={ imageSize }
max-collections-number={ maxCollectionsNumber } max-collections-number={ maxCollectionsNumber }
max-collections-per-screen={ maxCollectionsPerScreen } max-collections-per-screen={ maxCollectionsPerScreen }
space-between-collections={ spaceBetweenCollections } 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, maxCollectionsPerScreen: 6,
spaceBetweenCollections: 32, spaceBetweenCollections: 32,
spaceAroundCarousel: 50, spaceAroundCarousel: 50,
cropImagesToSquare: true, imageSize: 'tainacan-medium',
loopSlides: false, loopSlides: false,
hideName: true, hideName: true,
showCollectionThumbnail: false, showCollectionThumbnail: false,
@ -57,7 +57,7 @@ export default (element) => {
loopSlides: this.loopSlides, loopSlides: this.loopSlides,
largeArrows: this.largeArrows, largeArrows: this.largeArrows,
arrowsStyle: this.arrowsStyle, arrowsStyle: this.arrowsStyle,
cropImagesToSquare: this.cropImagesToSquare, imageSize: this.imageSize,
maxCollectionsPerScreen: this.maxCollectionsPerScreen, maxCollectionsPerScreen: this.maxCollectionsPerScreen,
spaceBetweenCollections: this.spaceBetweenCollections, spaceBetweenCollections: this.spaceBetweenCollections,
spaceAroundCarousel: this.spaceAroundCarousel, 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.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.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.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.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.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; 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"> :href="collection.url">
<img <img
:src=" :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] collection.thumbnail['thumbnail'][0]
: :
`${tainacanBaseUrl}/assets/images/placeholder_square.png`) `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
" "
:data-src=" :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] collection.thumbnail['thumbnail'][0]
: :
@ -69,27 +69,27 @@
:href="collection.url"> :href="collection.url">
<div class="collection-items-grid"> <div class="collection-items-grid">
<blur-hash-image <blur-hash-image
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 275" :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'], 'tainacan-medium') : 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'], 'tainacan-medium', collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`" :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'], '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'], 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'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'" :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' ))" :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" /> :transition-duration="500" />
<blur-hash-image <blur-hash-image
:height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium') : 275" :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'], 'tainacan-medium') : 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'], 'tainacan-medium', collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`" :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'], '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'], 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'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'" :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' ))" :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" /> :transition-duration="500" />
<blur-hash-image <blur-hash-image
:height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium') : 275" :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'], 'tainacan-medium') : 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'], 'tainacan-medium', collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`" :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'], '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'], 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'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'" :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' ))" :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" /> :transition-duration="500" />
</div> </div>
@ -172,7 +172,7 @@ export default {
hideName: Boolean, hideName: Boolean,
largeArrows: Boolean, largeArrows: Boolean,
arrowsStyle: String, arrowsStyle: String,
cropImagesToSquare: Boolean, imageSize: String,
showCollectionThumbnail: Boolean, showCollectionThumbnail: Boolean,
tainacanApiRoot: String, tainacanApiRoot: String,
tainacanBaseUrl: 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; maxItemsNumber = 12;
setAttributes({ maxItemsNumber: maxItemsNumber }); setAttributes({ maxItemsNumber: maxItemsNumber });
} }
if (imageSize === undefined) {
imageSize = 'tainacan-medium';
setAttributes({ imageSize: imageSize });
}
// Get available image sizes // Get available image sizes
const { imageSizes } = useSelect( 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'; loadStrategy = 'search';
setAttributes({ loadStrategy: loadStrategy }); setAttributes({ loadStrategy: loadStrategy });
} }
if (imageSize === undefined) {
imageSize = 'tainacan-medium';
setAttributes({ imageSize: imageSize });
}
const layoutControls = [ const layoutControls = [
{ {