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

Merge pull request #876 from tainacan/feature/781 

Adds thumbnailSize option to thumbnails in gallery media component. #…
This commit is contained in:
Mateus Machado Luna 2024-05-17 17:30:07 -03:00 committed by GitHub
parent 76cfa29e0d 08da6d3567
commit ad2ec847c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 162 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/tainacan-gutenberg-block-item-gallery.css
View File

@ -676,9 +676,7 @@
margin: 10px 0; } }
.tainacan-media-component__swiper-thumbs li.swiper-slide img {
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
object-fit: cover;
object-position: center;
border-bottom-width: 6px;

2
src/assets/css/tainacan-gutenberg-block-item-gallery.css.map
View File

File diff suppressed because one or more lines are too long

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

@ -1323,6 +1323,8 @@ class Theme_Helper {
* @type bool $showDownloadButtonMain Displays a download button below the Main slider
* @type bool $lightboxHasLightBackground Show a light background instead of dark in the lightbox
* @type bool $showArrowsAsSVG Decides if the swiper carousel arrows will be an SVG icon or font icon
* @type string $thumbnailsSize Media size for the thumbnail images. Defaults to 'tainacan-medium'
* }
* @return string The HTML div to be used for rendering the item galery component
*/
public function get_tainacan_item_gallery($args = []) {
@ -1344,7 +1346,8 @@ class Theme_Helper {
'openLightboxOnClick' => true,
'showDownloadButtonMain' => true,
'lightboxHasLightBackground' => false,
'showArrowsAsSVG' => true
'showArrowsAsSVG' => true,
'thumbnailsSize' => 'tainacan-medium'
);
$args = wp_parse_args($args, $defaults);
@ -1372,6 +1375,7 @@ class Theme_Helper {
$show_download_button_main = $args['showDownloadButtonMain'];
$lightbox_has_light_background = $args['lightboxHasLightBackground'];
$show_arrows_as_svg = $args['showArrowsAsSVG'];
$thumbnails_size = $args['thumbnailsSize'];
// Prefils arrays with proper values to avoid messsy IFs
$layout_elements = array(
@ -1506,7 +1510,7 @@ class Theme_Helper {
$media_items_thumbnails[] =
tainacan_get_the_media_component_slide(array(
'media_content' => get_the_post_thumbnail($item_id, 'tainacan-medium'),
'media_content' => get_the_post_thumbnail($item_id, $thumbnails_size),
'media_content_full' => $open_lightbox_on_click ? ($is_document_type_attachment ? tainacan_get_the_document($item_id, 'full') : sprintf('<div class="attachment-without-image">%s</div>', tainacan_get_the_document($item_id, 'full')) ) : '',
'media_title' => $is_document_type_attachment ? get_the_title(tainacan_get_the_document_raw($item_id)) : '',
'media_description' => $is_document_type_attachment ? get_the_content(null, false, tainacan_get_the_document_raw($item_id)) : '',
@ -1520,7 +1524,7 @@ class Theme_Helper {
foreach ( $attachments as $attachment ) {
$media_items_thumbnails[] =
tainacan_get_the_media_component_slide(array(
'media_content' => wp_get_attachment_image( $attachment->ID, 'tainacan-medium', false ),
'media_content' => wp_get_attachment_image( $attachment->ID, $thumbnails_size, false ),
'media_content_full' => ( $open_lightbox_on_click && !$layout_elements['main'] ) ? ( wp_attachment_is('image', $attachment->ID) ? wp_get_attachment_image( $attachment->ID, 'full', false) : sprintf('<div class="attachment-without-image tainacan-embed-container"><iframe id="tainacan-attachment-iframe--%s" src="%s"></iframe></div>', $block_id, tainacan_get_attachment_html_url($attachment->ID)) ) : '',
'media_title' => $attachment->post_title,
'media_description' => $attachment->post_content,
@ -2067,6 +2071,7 @@ class Theme_Helper {
* @type bool $showDownloadButtonMain Displays a download button below the Main slider
* @type bool $lightboxHasLightBackground Show a light background instead of dark in the lightbox
* @type bool $showArrowsAsSVG Decides if the swiper carousel arrows will be an SVG icon or font icon
* @type string $thumbnailsSize Media size for the thumbnail images. Defaults to 'tainacan-medium'
* @return string The HTML div to be used for rendering the item galery component
*/
public function get_tainacan_item_gallery_template($args = []) {
@ -2088,7 +2093,8 @@ class Theme_Helper {
'openLightboxOnClick' => true,
'showDownloadButtonMain' => true,
'lightboxHasLightBackground' => false,
'showArrowsAsSVG' => true
'showArrowsAsSVG' => true,
'thumbnailsSize' => 'tainacan-medium'
);
$args = wp_parse_args($args, $defaults);
@ -2109,6 +2115,7 @@ class Theme_Helper {
$show_download_button_main = $args['showDownloadButtonMain'];
$lightbox_has_light_background = $args['lightboxHasLightBackground'];
$show_arrows_as_svg = $args['showArrowsAsSVG'];
$thumbnails_size = $args['thumbnailsSize'];
// Prefils arrays with proper values to avoid messsy IFs
$layout_elements = array(

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

@ -1120,7 +1120,7 @@ function tainacan_has_related_items($item_id = false) {
*
* @param array $args {
* Optional. Array of arguments.
* @type string $item_id The Item ID
* @type string $item_id The Item ID
* @type string $blockId A unique identifier for the gallery, will be generated automatically if not provided,
* @type array $layoutElements Array of elements present in the gallery. Possible values are 'main' and 'carousel'
* @type array $mediaSources Array of sources for the gallery. Possible values are 'document' and 'attachments'
@ -1137,6 +1137,8 @@ function tainacan_has_related_items($item_id = false) {
* @type bool $showDownloadButtonMain Displays a download button below the Main slider
* @type bool $lightboxHasLightBackground Show a light background instead of dark in the lightbox
* @type bool $showArrowsAsSVG Decides if the swiper carousel arrows will be an SVG icon or font icon
* @type string $thumbnailsSize Media size for the thumbnail images. Defaults to 'tainacan-medium'
* }
* @return void
*/
function tainacan_the_item_gallery($args = []) {

4
src/views/gutenberg-blocks/blocks/item-gallery/block.json
View File

@ -110,6 +110,10 @@
"templateMode": {
"type": "boolean",
"default": false
},
"thumbnailsSize": {
"type": "string",
"default": "tainacan-medium"
}
},
"supports": {

108
src/views/gutenberg-blocks/blocks/item-gallery/deprecated.js
View File

@ -1,4 +1,112 @@
export default [
// Deprecated in version 0.20.4 to add thumbnailsSize option
{
"attributes": {
"blockId": {
"type": "string",
"default": ""
},
"collectionId": {
"type": "string",
"default": ""
},
"itemId": {
"type": "string",
"default": ""
},
"isModalOpen": {
"type": "boolean",
"default": false
},
"layoutElements": {
"type": "object",
"default": {
"main": true,
"thumbnails": true
}
},
"mediaSources": {
"type": "object",
"default": {
"document": true,
"attachments": true,
"metadata": false
}
},
"hideFileNameMain": {
"type": "boolean",
"default": true
},
"hideFileCaptionMain": {
"type": "boolean",
"default": false
},
"hideFileDescriptionMain": {
"type": "boolean",
"default": true
},
"hideFileNameThumbnails": {
"type": "boolean",
"default": true
},
"hideFileCaptionThumbnails": {
"type": "boolean",
"default": true
},
"hideFileDescriptionThumbnails": {
"type": "boolean",
"default": true
},
"hideFileNameLightbox": {
"type": "boolean",
"default": false
},
"hideFileCaptionLightbox": {
"type": "boolean",
"default": false
},
"hideFileDescriptionLightbox": {
"type": "boolean",
"default": false
},
"openLightboxOnClick": {
"type": "boolean",
"default": true
},
"arrowsSize": {
"type": "integer",
"default": 44
},
"mainSliderHeight": {
"type": "integer",
"default": 60
},
"mainSliderWidth": {
"type": "integer",
"default": 100
},
"thumbnailsCarouselWidth": {
"type": "integer",
"default": 100
},
"thumbnailsCarouselItemSize": {
"type": "integer",
"default": 136
},
"showDownloadButtonMain": {
"type": "boolean",
"default": false
},
"lightboxHasLightBackground": {
"type": "boolean",
"default": false
},
"templateMode": {
"type": "boolean",
"default": false
}
}
},
{
"attributes": {
"blockId": {

38
src/views/gutenberg-blocks/blocks/item-gallery/edit.js
View File

@ -1,9 +1,14 @@
const { __ } = wp.i18n;
const { Button, ButtonGroup, BaseControl, Placeholder, RangeControl, ToggleControl, PanelBody } = wp.components;
const { Button, ButtonGroup, BaseControl, Placeholder, SelectControl, RangeControl, ToggleControl, PanelBody } = wp.components;
const ServerSideRender = wp.serverSideRender;
const { InspectorControls, useBlockProps } = wp.blockEditor;
const { InspectorControls, useBlockProps, store } = wp.blockEditor;
const { useSelect } = wp.data;
import map from 'lodash/map'; // Do not user import { map,pick } from 'lodash'; -> These causes conflicts with underscore due to lodash global variable
import pick from 'lodash/pick';
import SingleItemModal from '../../js/selection/single-item-modal.js';
import getCollectionIdFromPossibleTemplateEdition from '../../js/template/tainacan-blocks-single-item-template-mode.js';
@ -33,7 +38,8 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
thumbnailsCarouselItemSize,
showDownloadButtonMain,
lightboxHasLightBackground,
templateMode
templateMode,
thumbnailsSize
} = attributes;
// Gets blocks props from hook
@ -56,6 +62,23 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
}
}
// 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 } )
);
return <div { ...blockProps }>
<InspectorControls>
@ -207,6 +230,15 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
title={__('Thumbnails carousel settings', 'tainacan')}
initialOpen={ true }
>
<SelectControl
label={__('Image size', 'tainacan')}
value={ thumbnailsSize }
options={ imageSizeOptions }
onChange={ ( aThumbnailsSize ) => {
thumbnailsSize = aThumbnailsSize;
setAttributes({ thumbnailsSize: thumbnailsSize });
}}
/>
<RangeControl
label={ __('Carousel width (%)', 'tainacan') }
value={ thumbnailsCarouselWidth }

2
src/views/gutenberg-blocks/blocks/item-gallery/style.scss
View File

@ -316,9 +316,7 @@
img {
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
object-fit: cover;
object-position: center;
border-bottom-width: 6px;