Skip to content

Commit 3cfd1c1

Browse files
vasiliy-seleznevvasiliy-seleznev
authored
Merge pull request #1711 from yurytut1993/BCTHEME-52
fix(Cornnerstone): BCTHEME-52 - Allowing carousel image to stretch distorts image
2 parents cf949a5 + cad679c commit 3cfd1c1

File tree

3 files changed

+134
-38
lines changed

3 files changed

+134
-38
lines changed

‎assets/js/theme/common/carousel.js

+53-12
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,62 @@
11
import 'slick-carousel';
22

3+
const showCarouselIfSlidesAnalizedSetup = ($carousel) => {
4+
const analizedSlides = [];
5+
return ($slides) => ($slide) => {
6+
analizedSlides.push($slide);
7+
return $slides.length === analizedSlides.length
8+
&& $carousel.addClass('is-visible');
9+
};
10+
};
11+
312
export default function () {
413
const $carousel = $('[data-slick]');
5-
if ($carousel.length) {
6-
const multipleSlides = $carousel[0].childElementCount > 1;
7-
$carousel.slick({ dots: multipleSlides });
8-
}
14+
15+
if ($carousel.length === 0) return;
16+
17+
$carousel.slick({ dots: $carousel[0].childElementCount > 1 });
18+
19+
const $slidesNodes = $('.heroCarousel-slide');
20+
21+
const showCarouselIfSlidesAnalized = showCarouselIfSlidesAnalizedSetup($carousel)($slidesNodes);
22+
23+
$slidesNodes.each((index, element) => {
24+
const $element = $(element);
25+
const isContentBlock = !!$element.find('.heroCarousel-content').length;
26+
27+
if (isContentBlock) {
28+
showCarouselIfSlidesAnalized($element);
29+
return true;
30+
}
31+
32+
const $image = $element.find('.heroCarousel-image-wrapper img');
33+
$('<img/>')
34+
.attr('src', $($image).attr('src'))
35+
.load(function getImageSizes() {
36+
const imageRealWidth = this.width;
37+
const imageRealHeight = this.height;
38+
39+
const imageAspectRatio = imageRealHeight / imageRealWidth;
40+
41+
$element.addClass(() => {
42+
switch (true) {
43+
case imageAspectRatio > 0.8 && imageAspectRatio <= 1.2:
44+
return 'is-square-image-type';
45+
case imageAspectRatio > 1.2:
46+
return 'is-vertical-image-type';
47+
default:
48+
return '';
49+
}
50+
});
51+
52+
showCarouselIfSlidesAnalized($element);
53+
});
54+
});
955

1056
// Alternative image styling for IE, which doesn't support objectfit
11-
if (typeof document.documentElement.style.objectFit === 'undefined') {
12-
$('.heroCarousel-slide').each((index, element) => {
13-
const $container = $(element);
14-
const imgUrl = $container.find('img').data('lazy');
15-
16-
if (imgUrl) {
17-
$container.css('backgroundImage', `url(${imgUrl})`).addClass('compat-object-fit');
18-
}
57+
if (document.documentElement.style.objectFit === undefined) {
58+
$slidesNodes.each((index, element) => {
59+
$(element).addClass('compat-object-fit');
1960
});
2061
}
2162
}

‎assets/scss/components/stencil/heroCarousel/_heroCarousel.scss

+79-24
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@
99
// object-fit and instead copy the image src to a the background-image of the
1010
// wrapper div and add the compat-object-fit class.
1111
//
12-
// 2. Visually overrides the top margin for '.body' defined in _body.scss.
13-
// The '.body' top margin creates space between the header and page content.
14-
// However, on the homepage, we want the carousel to be flush with the header.
15-
//
1612
// 3. Allows image to scale on large screens while preventing the top and bottom
1713
// from becoming cut off.
1814
// -----------------------------------------------------------------------------
@@ -22,14 +18,28 @@
2218
min-width: 100%;
2319
margin-bottom: (spacing("double") + spacing("single"));
2420
margin-top: -(spacing("single")); // 3
21+
overflow: hidden;
22+
visibility: hidden;
23+
24+
&.is-visible {
25+
visibility: visible;
26+
}
2527

2628
@include breakpoint("medium") {
2729
margin-top: -(spacing("single") + spacing("base")); // 3
2830
}
2931

30-
&.slick-initialized { // 2
31-
max-height: remCalc(1000);
32+
&.slick-initialized {
3233
opacity: 1;
34+
max-height: 100vh;
35+
36+
@include breakpoint("small") {
37+
max-height: remCalc(400px);
38+
}
39+
40+
@include breakpoint("medium") {
41+
max-height: remCalc(600px);
42+
}
3343
}
3444

3545
&:not(.slick-initialized) :not(.heroCarousel-slide--first).heroCarousel-slide {
@@ -43,6 +53,8 @@
4353
.slick-next,
4454
.slick-prev {
4555
top: 50%;
56+
transform: translateY(-50%);
57+
margin: 0;
4658
}
4759

4860
.slick-next {
@@ -82,32 +94,73 @@
8294
}
8395

8496
.heroCarousel-image {
85-
@include breakpoint("medium") {
86-
object-fit: cover; // 1
87-
max-height: remCalc(600px);
88-
width: 100%;
97+
object-fit: contain;
98+
width: 100%;
99+
height: 100%;
100+
object-position: 50% 0%;
101+
102+
@include breakpoint("small") {
103+
object-position: 50% 50%;
104+
}
105+
}
106+
107+
&.stretch {
108+
.heroCarousel-image {
109+
object-fit: cover;
110+
object-position: 50% 50%;
111+
}
112+
113+
&.compat-object-fit { // 1
114+
.heroCarousel-image {
115+
width: 100%;
116+
height: 100%;
117+
}
118+
}
119+
}
120+
121+
&.compat-object-fit { // 1
122+
overflow: hidden;
123+
124+
.heroCarousel-image {
125+
width: auto;
89126
}
90127
}
91128

92129
.heroCarousel-image-wrapper {
130+
height: remCalc(250px);
131+
display: flex;
132+
justify-content: center;
133+
align-items: flex-start;
134+
height: 56.25vw;
135+
136+
@include breakpoint("small") {
137+
max-height: remCalc(400px);
138+
}
139+
93140
@include breakpoint("medium") {
94141
max-height: remCalc(600px);
95142
}
96143
}
97144

98-
&.compat-object-fit { // 1
99-
background-size: cover;
100-
background-position: 50%;
101-
background-repeat: no-repeat;
102-
103-
&.stretch {
104-
@include breakpoint("large") { // 4
105-
background-size: 100% 100%;
106-
}
145+
&.is-square-image-type {
146+
147+
.heroCarousel-image-wrapper {
148+
height: 100vw;
149+
150+
@include breakpoint("small") {
151+
height: 56.25vw;
152+
}
107153
}
154+
}
108155

109-
.heroCarousel-image {
110-
opacity: 0;
156+
&.is-vertical-image-type {
157+
158+
.heroCarousel-image-wrapper {
159+
height: 110vw;
160+
161+
@include breakpoint("small") {
162+
height: 56.25vw;
163+
}
111164
}
112165
}
113166
}
@@ -117,17 +170,19 @@
117170
padding: spacing("half") spacing("single") (spacing("double"));
118171
text-align: center;
119172

120-
@include breakpoint("medium") {
173+
@include breakpoint("small") {
121174
@include carouselOpaqueBackgrounds;
175+
width: remCalc(700px);
176+
padding: spacing("single") * 1.5;
177+
width: 70%;
122178
background-color: rgba($carousel-bgColor, 0.9);
123179
left: 0;
180+
padding: spacing("single");
124181
margin: 0 auto;
125-
padding: spacing("single") * 1.5;
126182
position: absolute;
127183
right: 0;
128184
top: 50%;
129185
transform: translateY(-50%);
130-
width: remCalc(700px);
131186

132187
&.heroCarousel-content--empty {
133188
background-color: transparent;

‎templates/components/carousel.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
"slidesToScroll": 1,
77
"autoplay": true,
88
"autoplaySpeed": {{carousel.swap_frequency}},
9-
"lazyLoad": "anticipated"
9+
"lazyLoad": "anticipated",
1010
}'>
1111
{{#each carousel.slides}}
1212
<a href="{{url}}">
1313
<div class="heroCarousel-slide {{#if ../theme_settings.homepage_stretch_carousel_images}}stretch{{/if}} {{#if @first}}heroCarousel-slide--first{{/if}}">
14-
<div class="heroCarousel-image-wrapper" {{#and image_height image_width}}style="height: {{multiply (divide image_height image_width) 100}}vw"{{/and}}>
14+
<div class="heroCarousel-image-wrapper">
1515
{{#if @first}}
1616
{{> components/common/responsive-img
1717
image=stencil_image

0 commit comments

Comments
 (0)