REALLY forces carousel images to squared cropped version.
This commit is contained in:
parent
03f502a822
commit
36f3614313
|
@ -140,6 +140,11 @@
|
|||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container .is-forced-square > a > div {
|
||||
padding-bottom: 100% !important; }
|
||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container .is-forced-square > a > div img {
|
||||
object-fit: cover;
|
||||
object-position: center; }
|
||||
.wp-block-tainacan-carousel-items-list .preview-warning {
|
||||
width: 100%;
|
||||
font-size: 0.875rem;
|
||||
|
@ -233,6 +238,24 @@
|
|||
display: block;
|
||||
padding: 0px;
|
||||
margin-bottom: 0.5em; }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.is-forced-square .items-list-item--image-wrap {
|
||||
padding-top: 100%;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
position: relative; }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item.is-forced-square img {
|
||||
display: block;
|
||||
padding: 0px;
|
||||
margin-bottom: 0.5em;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0; }
|
||||
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item:hover a {
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -61,7 +61,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
return (
|
||||
<li
|
||||
key={ item.id }
|
||||
className={ 'item-list-item ' + (maxItemsPerScreen ? 'max-itens-per-screen-' + maxItemsPerScreen : '') }>
|
||||
className={ 'item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (cropImagesToSquare ? ' is-forced-square' : '') }>
|
||||
{ loadStrategy == 'selection' ?
|
||||
( tainacan_blocks.wp_version < '5.4' ?
|
||||
<IconButton
|
||||
|
@ -80,10 +80,12 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
|
||||
href={ item.url }
|
||||
target="_blank">
|
||||
<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']) }
|
||||
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
|
||||
</div>
|
||||
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null }
|
||||
</a>
|
||||
</li>
|
||||
|
@ -370,8 +372,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
}
|
||||
<ToggleControl
|
||||
label={__('Crop Images', 'tainacan')}
|
||||
help={ cropImagesToSquare && maxItemsPerScreen > 4 ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
|
||||
checked={ cropImagesToSquare && maxItemsPerScreen > 4 }
|
||||
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 });
|
||||
|
|
|
@ -168,6 +168,14 @@
|
|||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.is-forced-square>a>div {
|
||||
padding-bottom: 100% !important;
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -285,6 +293,29 @@
|
|||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
&.is-forced-square {
|
||||
.items-list-item--image-wrap {
|
||||
padding-top: 100%;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
padding: 0px;
|
||||
margin-bottom: 0.5em;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
|
|
@ -64,7 +64,8 @@
|
|||
ref="myItemSwiperSlide"
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="item-list-item">
|
||||
class="item-list-item"
|
||||
:class="{ 'is-forced-square': cropImagesToSquare }">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url"
|
||||
|
|
Loading…
Reference in New Issue