EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate responsive background images

Browse Source
This commit is contained in:
Björn Fromme
2021-07-27 14:06:11 +02:00
parent 9a003dec65
commit 934bd3dd0c
6 changed files with 31 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
-20
View File
@@ -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();
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_herounit.scss
+2 -2
View File
@@ -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%;
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+7 -3
View File
@@ -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">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+9 -4
View File
@@ -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">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+8 -4
View File
@@ -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>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
+5 -4
View File
@@ -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">