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

Adds thumbsHaveFixedHeight option to media gallery.

This commit is contained in:
mateuswetah 2024-05-17 18:23:54 -03:00
parent ad2ec847c1
commit 0f6293b242
7 changed files with 60 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -669,16 +669,24 @@
text-align: center;
vertical-align: top;
word-break: break-word;
font-size: 0.875em;
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px); }
font-size: 0.875em; }
@media only screen and (max-width: 380px) {
.tainacan-media-component__swiper-thumbs li.swiper-slide {
margin: 10px 0; } }
.tainacan-media-component__swiper-thumbs li.swiper-slide:not(.has-fixed-height) {
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px); }
.tainacan-media-component__swiper-thumbs li.swiper-slide:not(.has-fixed-height) img {
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
object-fit: cover;
object-position: center; }
.tainacan-media-component__swiper-thumbs li.swiper-slide.has-fixed-height {
width: auto; }
.tainacan-media-component__swiper-thumbs li.swiper-slide.has-fixed-height img {
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
width: auto; }
.tainacan-media-component__swiper-thumbs li.swiper-slide img {
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
object-fit: cover;
object-position: center;
border-bottom-width: 6px;
border-bottom-style: solid;
background-color: var(--tainacan-media-background, transparent);

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

File diff suppressed because one or more lines are too long

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

@ -1324,6 +1324,7 @@ class Theme_Helper {
* @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'
* @type bool $thumbsHaveFixedHeight If thumbs should have a fixed height and auto widht. Defaults to false.
* }
* @return string The HTML div to be used for rendering the item galery component
*/
@ -1347,7 +1348,8 @@ class Theme_Helper {
'showDownloadButtonMain' => true,
'lightboxHasLightBackground' => false,
'showArrowsAsSVG' => true,
'thumbnailsSize' => 'tainacan-medium'
'thumbnailsSize' => 'tainacan-medium',
'thumbsHaveFixedHeight' => false
);
$args = wp_parse_args($args, $defaults);
@ -1376,6 +1378,7 @@ class Theme_Helper {
$lightbox_has_light_background = $args['lightboxHasLightBackground'];
$show_arrows_as_svg = $args['showArrowsAsSVG'];
$thumbnails_size = $args['thumbnailsSize'];
$thumbs_have_fixed_height = $args['thumbsHaveFixedHeight'];
// Prefils arrays with proper values to avoid messsy IFs
$layout_elements = array(
@ -1630,6 +1633,7 @@ class Theme_Helper {
'wrapper_attributes' => $wrapper_attributes,
'class_main_div' => '',
'class_thumbs_div' => '',
'class_thumbs_li' => $thumbs_have_fixed_height ? 'has-fixed-height' : '',
'swiper_main_options' => $swiper_main_options,
'swiper_thumbs_options' => $swiper_thumbs_options,
'swiper_arrows_as_svg' => $show_arrows_as_svg,
@ -2072,6 +2076,7 @@ class Theme_Helper {
* @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'
* @type bool $thumbsHaveFixedHeight If thumbs should have a fixed height and auto widht. Defaults to false.
* @return string The HTML div to be used for rendering the item galery component
*/
public function get_tainacan_item_gallery_template($args = []) {
@ -2094,7 +2099,8 @@ class Theme_Helper {
'showDownloadButtonMain' => true,
'lightboxHasLightBackground' => false,
'showArrowsAsSVG' => true,
'thumbnailsSize' => 'tainacan-medium'
'thumbnailsSize' => 'tainacan-medium',
'thumbsHaveFixedHeight' => false
);
$args = wp_parse_args($args, $defaults);
@ -2116,6 +2122,7 @@ class Theme_Helper {
$lightbox_has_light_background = $args['lightboxHasLightBackground'];
$show_arrows_as_svg = $args['showArrowsAsSVG'];
$thumbnails_size = $args['thumbnailsSize'];
$thumbs_have_fixed_height = $args['thumbsHaveFixedHeight'];
// Prefils arrays with proper values to avoid messsy IFs
$layout_elements = array(

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

@ -1138,6 +1138,7 @@ function tainacan_has_related_items($item_id = false) {
* @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'
* @type bool $thumbsHaveFixedHeight If thumbs should have a fixed height and auto widht. Defaults to false.
* }
* @return void
*/

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

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

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

@ -39,7 +39,8 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
showDownloadButtonMain,
lightboxHasLightBackground,
templateMode,
thumbnailsSize
thumbnailsSize,
thumbsHaveFixedHeight
} = attributes;
// Gets blocks props from hook
@ -259,6 +260,15 @@ export default function ({ attributes, setAttributes, isSelected, clientId }) {
min={ 32 }
max={ 400 }
/>
<ToggleControl
label={ __('Thumbnails have fixed height', 'tainacan') }
help={ __( 'If checked, the thumbnails will have fixed the item size height, otherwise they will have fixed the item size width.', 'tainacan' ) }
checked={ thumbsHaveFixedHeight }
onChange={ ( isChecked ) => {
thumbsHaveFixedHeight = isChecked;
setAttributes({ thumbsHaveFixedHeight: thumbsHaveFixedHeight });
}}
/>
<ToggleControl
label={__('Hide file name', 'tainacan')}
checked={ hideFileNameThumbnails }

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

@ -308,17 +308,32 @@
vertical-align: top;
word-break: break-word;
font-size: 0.875em;
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px);
@media only screen and (max-width: 380px) {
margin: 10px 0;
}
&:not(.has-fixed-height) {
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px);
img {
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
object-fit: cover;
object-position: center
}
}
&.has-fixed-height {
width: auto;
img {
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
width: auto;
}
}
img {
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
object-fit: cover;
object-position: center;
border-bottom-width: 6px;
border-bottom-style: solid;
background-color: var(--tainacan-media-background, transparent);