Migrate responsive background images
This commit is contained in:
Björn Fromme
@@ -130,12 +130,6 @@ new Vue({
|
||||
setMobileMode () {
|
||||
this.mobileMode = $window.outerWidth() < this.maxWindowWidth;
|
||||
},
|
||||
setBackgroundImageMode () {
|
||||
this.backgroundImageMode = this.getBackgroundImageMode();
|
||||
},
|
||||
getBackgroundImageMode () {
|
||||
return $window.outerWidth() < 768 ? 'mobile' : 'desktop';
|
||||
},
|
||||
scrollTop () {
|
||||
this.scroll(0);
|
||||
},
|
||||
@@ -161,13 +155,6 @@ new Vue({
|
||||
$nav.addClass('open').find('ul').slideDown('fast');
|
||||
}
|
||||
},
|
||||
setResponsiveBackgroundImages () {
|
||||
let backgroundImageMode = this.backgroundImageMode;
|
||||
$('.responsive-bg').each(function () {
|
||||
let imageSource = $(this).data(backgroundImageMode);
|
||||
$(this).css('backgroundImage', 'url(' + imageSource + ')');
|
||||
});
|
||||
},
|
||||
initDropdownMenuBehavior () {
|
||||
const $dropdownLinks = $('.navbar-main').find('a.dropdown-toggle');
|
||||
if (this.mobileMode) {
|
||||
@@ -192,11 +179,6 @@ new Vue({
|
||||
$window.on('resize', () => {
|
||||
this.setMobileMode();
|
||||
this.initDropdownMenuBehavior();
|
||||
let newBackgroundImageMode = this.getBackgroundImageMode();
|
||||
if (this.backgroundImageMode !== newBackgroundImageMode) {
|
||||
this.backgroundImageMode = newBackgroundImageMode;
|
||||
this.setResponsiveBackgroundImages();
|
||||
}
|
||||
});
|
||||
$(document).on('click', event => {
|
||||
const $clickedElement = $(event.target);
|
||||
@@ -228,8 +210,6 @@ new Vue({
|
||||
mounted () {
|
||||
Vue.nextTick(() => {
|
||||
this.setMobileMode();
|
||||
this.setBackgroundImageMode();
|
||||
this.setResponsiveBackgroundImages();
|
||||
this.initListeners();
|
||||
this.initFilterpanel();
|
||||
this.initDropdownMenuBehavior();
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-size: cover;
|
||||
background-position: right center;
|
||||
//background-size: cover;
|
||||
//background-position: right center;
|
||||
@include mq($from: tablet) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -14,9 +14,13 @@
|
||||
<div class="herounit">
|
||||
<f:alias map="{image: slide.image.0}">
|
||||
<f:if condition="{image}">
|
||||
<div class="herounit__image responsive-bg" style="background-image: url({f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeaderHome')})"
|
||||
data-mobile="{f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeaderHome')}"
|
||||
data-desktop="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}"></div>
|
||||
<div class="herounit__image">
|
||||
<picture class="w-full h-full">
|
||||
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeaderHome')}" media="(max-width: 767px)">
|
||||
<f:image image="{image}" height="320" class="w-full h-full object-cover" alt="{image.alternative}"/>
|
||||
</picture>
|
||||
</div>
|
||||
</f:if>
|
||||
</f:alias>
|
||||
<div class="herounit__main">
|
||||
|
||||
@@ -3,10 +3,15 @@
|
||||
<f:if condition="{slide}">
|
||||
<div class="pagehead">
|
||||
<f:alias map="{image: slide.image.0}">
|
||||
<div class="pagehead__image responsive-bg"
|
||||
style="background-image: url({f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeader')})"
|
||||
data-mobile="{f:uri.image(image: image, height: '240', cropVariant: 'sliderPageHeader')}"
|
||||
data-desktop="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}"></div>
|
||||
<div class="pagehead__image">
|
||||
<picture class="w-full h-full">
|
||||
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}"
|
||||
alt="{image.alternative}">
|
||||
</picture>
|
||||
</div>
|
||||
</f:alias>
|
||||
<div class="pagehead__main">
|
||||
<div class="pagehead__inner">
|
||||
|
||||
@@ -10,10 +10,14 @@
|
||||
<div class="splide__track">
|
||||
<ul class="splide__list">
|
||||
<f:for each="{product.images}" as="image" iteration="iteration">
|
||||
<li class="splide__slide slider__item slider__item--product responsive-bg"
|
||||
style="background-image: url({f:uri.image(image: image, width: '400')})"
|
||||
data-mobile="{f:uri.image(image: image, width: '400')}"
|
||||
data-desktop="{f:uri.image(image: image, width: '585')}">
|
||||
<li class="splide__slide slider__item slider__item--product">
|
||||
<picture class="w-full h-full">
|
||||
<source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, width: '400')}"
|
||||
alt="{image.alternative}">
|
||||
</picture>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
|
||||
@@ -2,10 +2,11 @@
|
||||
{images -> v:iterator.first() -> v:variable.set(name: 'headerImage')}
|
||||
<div class="pagehead">
|
||||
<f:if condition="{headerImage.uid}">
|
||||
<div class="pagehead__image responsive-bg"
|
||||
style="background-image: url({f:uri.image(image: headerImage, height: '240')})"
|
||||
data-mobile="{f:uri.image(image: headerImage, height: '240')}"
|
||||
data-desktop="{f:uri.image(image: headerImage, width: '1370')}"></div>
|
||||
<picture class="w-full h-full">
|
||||
<source srcset="{f:uri.image(image: headerImage, width: '1360c', height: '360')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: headerImage, width: '640c', height: '320')}" media="(max-width: 767px)">
|
||||
<f:image image="{headerImage}" width="640" class="w-full h-full object-cover" alt="{image.alternative}"/>
|
||||
</picture>
|
||||
</f:if>
|
||||
<div class="pagehead__main">
|
||||
<div class="pagehead__inner">
|
||||
|
||||
Reference in New Issue
Block a user