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

Merge pull request #707 from tainacan/feature/706 

Adds option to choose image sizes on some blocks. Feature/706
This commit is contained in:
Mateus Machado Luna 2022-06-02 11:47:54 -03:00 committed by GitHub
parent c8f42c43b6 1ecb9915de
commit e84c4a0d2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 869 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/classes/theme-helper/class-tainacan-theme-helper.php
View File

@ -914,7 +914,7 @@ class Theme_Helper {
* @type integer $auto_play_speed The time in s to translate to the next slide automatically
* @type bool $loop_slides Should slides loop when reached the end of the Carousel?
* @type bool $hide_title Should the title of the items be displayed?
* @type bool $crop_images_to_square Should it use the `tainacan-medium-size` instead of the `tainacan-medium-large-size`?
* @type string $image_size Item image size. Defaults to 'tainacan-medium'
* @type bool $show_collection_header Should it display a small version of the collection header?
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
* @type string $collection_background_color Color of the collection header background
@ -937,7 +937,7 @@ class Theme_Helper {
'auto_play_speed' => 3,
'loop_slides' => false,
'hide_title' => false,
'crop_images_to_square' => true,
'image_size' => 'tainacan-medium',
'show_collection_header' => false,
'show_collection_label' => false,
'collection_background_color' => '#454647',
@ -948,6 +948,11 @@ class Theme_Helper {
);
$args = wp_parse_args($args, $defaults);
/* Compatibility with previous version */
if ( isset($args['crop_images_to_square ']) && !$args['crop_images_to_square'] ) {
$args['image_size'] = 'tainacan-medium-full';
}
$props = ' ';
// Always pass the class needed by Vue to mount the component;
@ -988,7 +993,7 @@ class Theme_Helper {
* @type string $show_name Show the item title
* @type string $show_image Show the item thumbnail
* @type string $layout Either 'grid', 'list' or 'mosaic'
* @type string $crop_images_to_square Force images shape to be squared
* @type string $image_size Item image size. Defaults to 'tainacan-medium'
* @type bool $show_collection_header Should it display a small version of the collection header?
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
* @type string $collection_background_color Color of the collection header background
@ -1015,7 +1020,7 @@ class Theme_Helper {
'show_name' => true,
'show_image' => true,
'layout' => 'grid',
'crop_images_to_square' => true,
'image_size' => 'tainacan-medium',
'show_collection_header' => false,
'show_collection_label' => false,
'collection_background_color' => '#454647',
@ -1032,6 +1037,11 @@ class Theme_Helper {
);
$args = wp_parse_args($args, $defaults);
/* Compatibility with previous version */
if ( isset($args['crop_images_to_square ']) && !$args['crop_images_to_square'] ) {
$args['image_size'] = 'tainacan-medium-full';
}
$props = ' ';
// Always pass the class needed by Vue to mount the component;

2
src/classes/theme-helper/template-tags.php
View File

@ -1039,7 +1039,7 @@ function tainacan_get_the_mime_type_icon($mime_type, $image_size = 'medium') {
* @type integer $auto_play_speed The time in s to translate to the next slide automatically
* @type bool $loop_slides Should slides loop when reached the end of the Carousel?
* @type bool $hide_title Should the title of the items be displayed?
* @type bool $crop_images_to_square Should it use the `tainacan-medium-size` instead of the `tainacan-medium-large-size`?
* @type string $image_size Item image size. Defaults to 'tainacan-medium'
* @type bool $show_collection_header Should it display a small version of the collection header?
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
* @type string $collection_background_color Color of the collection header background

9
src/tainacan.php
View File

@ -36,6 +36,15 @@ add_action( 'after_setup_theme', function() {
add_image_size( 'tainacan-medium', 275, 275, true );
add_image_size( 'tainacan-medium-full', 205, 1500 );
} );
// This enables Tainacan media sizes in the admin interface, including Gutenberg blocks
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']);

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,

58
src/views/gutenberg-blocks/blocks/carousel-items-list/block.json
View File

@ -19,111 +19,111 @@
"selector": "div"
},
"collectionId": {
"type": "String",
"type": "string",
"default": ""
},
"items": {
"type": "Array",
"type": "array",
"default": []
},
"isModalOpen": {
"type": "Boolean",
"type": "boolean",
"default": false
},
"searchURL": {
"type": "String",
"type": "string",
"default": ""
},
"selectedItems": {
"type": "Array",
"type": "array",
"default": []
},
"itemsRequestSource": {
"type": "String",
"type": "string",
"default": ""
},
"maxItemsNumber": {
"type": "Number",
"type": "number",
"value": 12
},
"maxItemsPerScreen": {
"type": "Number",
"type": "number",
"value": 7
},
"spaceBetweenItems": {
"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
},
"loadStrategy": {
"type": "String",
"type": "string",
"value": "search"
},
"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
},
"hideTitle": {
"type": "Boolean",
"type": "boolean",
"value": true
},
"showCollectionHeader": {
"type": "Boolean",
"type": "boolean",
"value": false
},
"showCollectionLabel": {
"type": "Boolean",
"type": "boolean",
"value": false
},
"cropImagesToSquare": {
"type": "Boolean",
"value": true
"imageSize": {
"type": "string",
"value": "tainacan-medium"
},
"collection": {
"type": "Object",
"type": "object",
"value": {}
},
"blockId": {
"type": "String",
"type": "string",
"default": ""
},
"collectionBackgroundColor": {
"type": "String",
"type": "string",
"default": "#454647"
},
"collectionTextColor": {
"type": "String",
"type": "string",
"default": "#ffffff"
}
},

186
src/views/gutenberg-blocks/blocks/carousel-items-list/deprecated.js
View File

@ -1,6 +1,192 @@
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';
if ( isNaN(attributes.maxItemsNumber) )
attributes.maxItemsNumber = 12;
return attributes;
},
attributes: {
"content": {
"type": "array",
"source": "children",
"selector": "div"
},
"collectionId": {
"type": "String",
"default": ""
},
"items": {
"type": "Array",
"default": []
},
"isModalOpen": {
"type": "Boolean",
"default": false
},
"searchURL": {
"type": "String",
"default": ""
},
"selectedItems": {
"type": "Array",
"default": []
},
"itemsRequestSource": {
"type": "String",
"default": ""
},
"maxItemsNumber": {
"type": "Number",
"value": 12
},
"maxItemsPerScreen": {
"type": "Number",
"value": 7
},
"spaceBetweenItems": {
"type": "Number",
"value": 32
},
"spaceAroundCarousel": {
"type": "Number",
"value": 50
},
"isLoading": {
"type": "Boolean",
"value": false
},
"isLoadingCollection": {
"type": "Boolean",
"value": false
},
"loadStrategy": {
"type": "String",
"value": "search"
},
"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
},
"hideTitle": {
"type": "Boolean",
"value": true
},
"showCollectionHeader": {
"type": "Boolean",
"value": false
},
"showCollectionLabel": {
"type": "Boolean",
"value": false
},
"cropImagesToSquare": {
"type": "Boolean",
"value": true
},
"collection": {
"type": "Object",
"value": {}
},
"blockId": {
"type": "String",
"default": ""
},
"collectionBackgroundColor": {
"type": "String",
"default": "#454647"
},
"collectionTextColor": {
"type": "String",
"default": "#ffffff"
}
},
save: function ({ attributes, className }) {
const {
content,
blockId,
collectionId,
searchURL,
selectedItems,
arrowsPosition,
largeArrows,
arrowsStyle,
loadStrategy,
maxItemsNumber,
maxItemsPerScreen,
spaceBetweenItems,
spaceAroundCarousel,
autoPlay,
autoPlaySpeed,
loopSlides,
hideTitle,
cropImagesToSquare,
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
collectionTextColor
} = 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-items-list"
search-url={ searchURL }
selected-items={ JSON.stringify(selectedItems) }
arrows-position={ arrowsPosition }
load-strategy={ loadStrategy }
collection-id={ collectionId }
auto-play={ '' + autoPlay }
auto-play-speed={ autoPlaySpeed }
loop-slides={ '' + loopSlides }
hide-title={ '' + hideTitle }
large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle }
crop-images-to-square={ '' + cropImagesToSquare }
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
collection-background-color={ collectionBackgroundColor }
collection-text-color={ collectionTextColor }
max-items-number={ maxItemsNumber }
max-items-per-screen={ maxItemsPerScreen }
space-between-items={ spaceBetweenItems }
space-around-carousel={ spaceAroundCarousel }
tainacan-api-root={ tainacan_blocks.root }
tainacan-base-url={ tainacan_blocks.base_url }
id={ 'wp-block-tainacan-carousel-items-list_' + blockId }>
{ content }
</div>
}
},
/* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{
"attributes": {

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

@ -2,8 +2,11 @@ const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, 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 { map, pick } from 'lodash';
import CarouselItemsModal from './dynamic-and-carousel-items-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
@ -38,7 +41,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
autoPlaySpeed,
loopSlides,
hideTitle,
cropImagesToSquare,
imageSize,
showCollectionHeader,
showCollectionLabel,
isLoadingCollection,
@ -59,16 +62,37 @@ export default function({ attributes, setAttributes, className, isSelected, clie
maxItemsPerScreen = 7;
setAttributes({ maxItemsPerScreen: maxItemsPerScreen });
}
if (cropImagesToSquare === undefined) {
cropImagesToSquare = true;
setAttributes({ cropImagesToSquare: cropImagesToSquare });
if (maxItemsNumber === undefined) {
maxItemsNumber = 12;
setAttributes({ maxItemsNumber: maxItemsNumber });
}
if (imageSize === undefined) {
imageSize = 'tainacan-medium';
setAttributes({ imageSize: imageSize });
}
// 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(item) {
return (
<li
key={ item.id }
className={ 'swiper-slide item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (cropImagesToSquare ? ' is-forced-square' : '') }>
className={ 'swiper-slide item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 ? ' is-forced-square' : '') }>
{ loadStrategy == 'selection' ?
( tainacan_blocks.wp_version < '5.4' ?
<IconButton
@ -88,8 +112,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
href={ item.url }>
<div class="items-list-item--image-wrap">
<img
src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), 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' )) }/>
</div>
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null }
@ -155,7 +179,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
if (maxItemsNumber != undefined && maxItemsNumber > 0)
queryObject.perpage = maxItemsNumber;
else if (queryObject.perpage != undefined && queryObject.perpage > 0)
setAttributes({ maxItemsNumber: queryObject.perpage });
setAttributes({ maxItemsNumber: Number(queryObject.perpage) });
else {
queryObject.perpage = 12;
setAttributes({ maxItemsNumber: 12 });
@ -374,16 +398,15 @@ export default function({ attributes, setAttributes, className, isSelected, clie
/>
: null
}
<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();
}
}
<SelectControl
label={__('Image size', 'tainacan')}
value={ imageSize }
options={ imageSizeOptions }
onChange={ ( anImageSize ) => {
imageSize = anImageSize;
setAttributes({ imageSize: imageSize });
setContent();
}}
/>
<RangeControl
label={ __('Space between each item', 'tainacan') }

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

@ -19,7 +19,7 @@ export default function ({ attributes, className }) {
autoPlaySpeed,
loopSlides,
hideTitle,
cropImagesToSquare,
imageSize,
showCollectionHeader,
showCollectionLabel,
collectionBackgroundColor,
@ -42,7 +42,7 @@ export default function ({ attributes, className }) {
hide-title={ '' + hideTitle }
large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle }
crop-images-to-square={ '' + cropImagesToSquare }
image-size={ imageSize }
show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel }
collection-background-color={ collectionBackgroundColor }

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

@ -41,7 +41,7 @@ export default (element) => {
autoPlaySpeed: 3,
loopSlides: false,
hideTitle: true,
cropImagesToSquare: true,
imageSize: 'tainacan-medium',
showCollectionHeader: false,
showCollectionLabel: false,
collectionBackgroundColor: '#454647',
@ -70,7 +70,7 @@ export default (element) => {
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
hideTitle: this.hideTitle,
cropImagesToSquare: this.cropImagesToSquare,
imageSize: this.imageSize,
showCollectionHeader: this.showCollectionHeader,
showCollectionLabel: this.showCollectionLabel,
collectionBackgroundColor: this.collectionBackgroundColor,
@ -99,7 +99,7 @@ export default (element) => {
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.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false;
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.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;

14
src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
View File

@ -84,16 +84,16 @@
:key="index"
v-for="(item, index) of items"
class="swiper-slide item-list-item"
:class="{ 'is-forced-square': cropImagesToSquare }">
:class="{ 'is-forced-square': ['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 }">
<a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url">
<blur-hash-image
:height="$thumbHelper.getHeight(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
:width="$thumbHelper.getWidth(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
:src="$thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype'])"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype'])"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
:height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
:width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
:src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" />
<span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
@ -178,7 +178,7 @@ export default {
autoPlaySpeed: Number,
loopSlides: Boolean,
hideTitle: Boolean,
cropImagesToSquare: Boolean,
imageSize: String,
showCollectionHeader: Boolean,
showCollectionLabel: Boolean,
collectionBackgroundColor: String,

68
src/views/gutenberg-blocks/blocks/dynamic-items-list/block.json
View File

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

210
src/views/gutenberg-blocks/blocks/dynamic-items-list/deprecated.js
View File

@ -1,6 +1,216 @@
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';
if ( isNaN(attributes.maxItemsNumber) )
attributes.maxItemsNumber = 12;
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": {

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

@ -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 { 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,56 @@ export default function({ attributes, setAttributes, className, isSelected, clie
maxColumnsCount = 5;
setAttributes({ maxColumnsCount: maxColumnsCount });
}
if (cropImagesToSquare === undefined) {
cropImagesToSquare = true;
setAttributes({ cropImagesToSquare: cropImagesToSquare });
if (maxItemsNumber === undefined) {
maxItemsNumber = 12;
setAttributes({ maxItemsNumber: maxItemsNumber });
}
if (loadStrategy === undefined) {
loadStrategy = 'search';
setAttributes({ loadStrategy: loadStrategy });
}
if (imageSize === undefined) {
imageSize = 'tainacan-medium';
setAttributes({ imageSize: imageSize });
}
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',
}
];
// 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(item) {
return (
<li
@ -98,8 +142,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>
@ -246,7 +290,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
if (maxItemsNumber != undefined && maxItemsNumber > 0)
queryObject.perpage = maxItemsNumber;
else if (queryObject.perpage != undefined && queryObject.perpage > 0)
setAttributes({ maxItemsNumber: queryObject.perpage });
setAttributes({ maxItemsNumber: Number(queryObject.perpage) });
else {
queryObject.perpage = 12;
setAttributes({ maxItemsNumber: 12 });
@ -468,27 +512,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 +724,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' ?

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

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

6
src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.js
View File

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

36
src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.vue
View File

@ -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['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !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['tainacan-medium'] && !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['tainacan-medium'] || 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['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][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['tainacan-medium'] || 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,