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

Replace jquery-lazy with lazysizes

Browse Source
This commit is contained in:
Björn Fromme
2018-11-13 18:18:43 +01:00
parent 07680a0c23
commit 79f46eaf48
21 changed files with 65 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+5 -8
View File
@@ -4920,14 +4920,6 @@
"resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz", "resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz",
"integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw=" "integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw="
}, },
"jquery-lazy": {
"version": "1.7.10",
"resolved": "https://registry.npmjs.org/jquery-lazy/-/jquery-lazy-1.7.10.tgz",
"integrity": "sha512-1vBpU+igfZJ58BrQrk2OFl3TMriGeIfZUg35uSIajZF4GcxF96NtdS3LbWk5a72rH2ypz0odTsAkqhUsICknhw==",
"requires": {
"jquery": ">=1.7.2"
}
},
"js-base64": { "js-base64": {
"version": "2.4.9", "version": "2.4.9",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
@@ -5046,6 +5038,11 @@
"integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=", "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
"dev": true "dev": true
}, },
"lazysizes": {
"version": "4.1.4",
"resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-4.1.4.tgz",
"integrity": "sha512-jVplgeHHoQ6a2RZtxCAKFAnm6QPQmEIKq4JWSTI1XfCBhn+CqDgMKWDJO81f8VtVBdAlHs+BzP2WGzMLUi3oFg=="
},
"lcid": { "lcid": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz", "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
package.json
+1 -1
View File
@@ -19,7 +19,7 @@
"flatpickr": "^4.5.2", "flatpickr": "^4.5.2",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"jquery": "^1.12.4", "jquery": "^1.12.4",
"jquery-lazy": "^1.7.10", "lazysizes": "^4.1.4",
"leaflet": "^1.3.4", "leaflet": "^1.3.4",
"normalize.css": "^7.0.0", "normalize.css": "^7.0.0",
"picturefill": "^3.0.3", "picturefill": "^3.0.3",
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+1 -10
View File
@@ -12,7 +12,7 @@ global.$ = global.jQuery = $;
require('cookieconsent'); require('cookieconsent');
require('slick-carousel'); require('slick-carousel');
require('jquery-lazy'); require('lazysizes');
require('bootstrap-sass/assets/javascripts/bootstrap'); require('bootstrap-sass/assets/javascripts/bootstrap');
require('picturefill'); require('picturefill');
require('leaflet'); require('leaflet');
@@ -292,13 +292,6 @@ new Vue({
$filterPanel.addClass('in'); $filterPanel.addClass('in');
} }
}, },
initImageLazyLoading () {
$('.lazy').Lazy({
scrollDirection: 'vertical',
effect: 'fadeIn',
visibleOnly: true
});
},
initPartnerIdSelect () { initPartnerIdSelect () {
$('[data-force-partnerid-select]').on('click', '.booking-link', function (e) { $('[data-force-partnerid-select]').on('click', '.booking-link', function (e) {
e.preventDefault(); e.preventDefault();
@@ -377,7 +370,6 @@ new Vue({
Vue.nextTick(() => { Vue.nextTick(() => {
this.initContentsliders(); this.initContentsliders();
this.initTooltips(); this.initTooltips();
this.initImageLazyLoading();
this.initFilterpanel(); this.initFilterpanel();
this.appendPaCode(); this.appendPaCode();
}); });
@@ -422,7 +414,6 @@ new Vue({
this.initContentsliders(); this.initContentsliders();
this.initPhoneLinks(); this.initPhoneLinks();
this.initTooltips(); this.initTooltips();
this.initImageLazyLoading();
this.initDropdownMenuBehavior(); this.initDropdownMenuBehavior();
this.initPartnerIdSelect(); this.initPartnerIdSelect();
this.initFaqFilter(); this.initFaqFilter();
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
+4 -4
View File
@@ -5,10 +5,10 @@
<referrer-link :href="item.detailPageUri" :referring-page="referringPage" <referrer-link :href="item.detailPageUri" :referring-page="referringPage"
rel="nofollow" title="Details &amp; Buchen"> rel="nofollow" title="Details &amp; Buchen">
<picture class="searchresult-item__image"> <picture class="searchresult-item__image">
<source media="(max-width: 768px)" :srcset="item.hotel.images.resized.s[0].url + ' 220w'"/> <source media="(max-width: 768px)" :data-srcset="item.hotel.images.resized.s[0].url + ' 220w'"/>
<source media="(max-width: 1200px)" :srcset="item.hotel.images.resized.l[0].url + ' 280w'"/> <source media="(max-width: 1200px)" :data-srcset="item.hotel.images.resized.l[0].url + ' 280w'"/>
<source media="(min-width: 1201px)" :srcset="item.hotel.images.resized.m[0].url + ' 260w'"/> <source media="(min-width: 1201px)" :data-srcset="item.hotel.images.resized.m[0].url + ' 260w'"/>
<img class="scale" :src="item.hotel.images.resized.s[0].url" <img class="scale lazyload" :data-src="item.hotel.images.resized.s[0].url"
:title="item.hotel.images.resized.s[0].title" :title="item.hotel.images.resized.s[0].title"
:alt="item.hotel.images.resized.s[0].alt"> :alt="item.hotel.images.resized.s[0].alt">
</picture> </picture>
web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_base.scss
+1 -1
View File
@@ -121,7 +121,7 @@ a.anchor:target {
} }
// Image lazy loading placeholder // Image lazy loading placeholder
img.lazy { img.lazyloading {
background: url(../images/lazy.png) no-repeat top center; background: url(../images/lazy.png) no-repeat top center;
} }
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="col-md-6"> <div class="col-md-6">
<f:if condition="{teaserImage}"> <f:if condition="{teaserImage}">
<f:then> <f:then>
<img class="lazy" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}" <img class="lazyload" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}"> alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then> </f:then>
<f:else> <f:else>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Reminder.html
+1 -1
View File
@@ -11,7 +11,7 @@
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}"> <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
<f:if condition="{teaserImage}"> <f:if condition="{teaserImage}">
<f:then> <f:then>
<img class="scale lazy" data-src="{f:uri.image(image: teaserImage, width: '400')}" <img class="scale lazyload" data-src="{f:uri.image(image: teaserImage, width: '400')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}"> alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then> </f:then>
<f:else> <f:else>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Small.html
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="col-sm-2"> <div class="col-sm-2">
<f:if condition="{teaserImage}"> <f:if condition="{teaserImage}">
<f:then> <f:then>
<img class="scale lazy" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}" <img class="scale lazyload" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}"> alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then> </f:then>
<f:else> <f:else>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html
+8 -8
View File
@@ -109,16 +109,16 @@
<f:then> <f:then>
<f:alias map="{image: item.hotel.images.original.0}"> <f:alias map="{image: item.hotel.images.original.0}">
<picture class="searchresult-item__image"> <picture class="searchresult-item__image">
<source media="(max-width: 768px)" srcset="{f:uri.image( <source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '220', height: '130c-100' image: image, width: '220', height: '130c-100'
)} 220w"/> )} 220w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image( <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '280', height: '220c-100' image: image, width: '280', height: '220c-100'
)} 280w"/> )} 280w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image( <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '260', height: '200c-100' image: image, width: '260', height: '200c-100'
)} 260w"/> )} 260w"/>
<img class="scale" src="{f:uri.image( <img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '260', height: '200c-100' image: image, width: '260', height: '200c-100'
)}" title="{image.title}" alt="{image.alternative}"> )}" title="{image.title}" alt="{image.alternative}">
</picture> </picture>
@@ -126,19 +126,19 @@
</f:then> </f:then>
<f:else> <f:else>
<picture class="searchresult-item__image"> <picture class="searchresult-item__image">
<source media="(max-width: 768px)" srcset="{f:uri.image( <source media="(max-width: 768px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '220', height: '130c-100' width: '220', height: '130c-100'
)} 220w"/> )} 220w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image( <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '280', height: '220c-100' width: '280', height: '220c-100'
)} 280w"/> )} 280w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image( <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '260', height: '200c-100' width: '260', height: '200c-100'
)} 260w"/> )} 260w"/>
<img class="scale" src="{f:uri.image( <img class="scale lazyload" data-src="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '260', height: '200c-100' width: '260', height: '200c-100'
)}" title="" alt=""> )}" title="" alt="">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/News/List/Item.html
+8 -8
View File
@@ -10,20 +10,20 @@
<f:then> <f:then>
<f:if condition="{newsItem.mediaPreviews.0}"> <f:if condition="{newsItem.mediaPreviews.0}">
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}"> <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" <img class="scale lazyload"
crop="{mediaElement.crop}" data-src="{f:uri.image(image: mediaElement, crop: mediaElement.crop, width: '640', height: '360c+50')}"
width="640" height="360c+50" alt="{mediaElement.originalResource.alternative}"
alt="{mediaElement.originalResource.alternative}" class="scale"/> title="{mediaElement.originalResource.title}">
</f:alias> </f:alias>
</f:if> </f:if>
</f:then> </f:then>
<f:else> <f:else>
<f:if condition="{newsItem.media}"> <f:if condition="{newsItem.media}">
<f:alias map="{mediaElement: '{newsItem.media.0}'}"> <f:alias map="{mediaElement: '{newsItem.media.0}'}">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" <img class="scale lazyload"
crop="{mediaElement.crop}" data-src="{f:uri.image(image: mediaElement, crop: mediaElement.crop, width: '640', height: '360c+50')}"
width="640" height="360c+50" alt="{mediaElement.originalResource.alternative}"
alt="{mediaElement.originalResource.alternative}" class="scale"/> title="{mediaElement.originalResource.title}">
</f:alias> </f:alias>
</f:if> </f:if>
</f:else> </f:else>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Officetip.html
+3 -1
View File
@@ -5,7 +5,9 @@
<p><strong>Officetipp</strong></p> <p><strong>Officetipp</strong></p>
<f:if condition="{officetip.author.image}"> <f:if condition="{officetip.author.image}">
<f:then> <f:then>
<f:image src="{officetip.author.image.uid}" treatIdAsReference="1" crop="{officetip.author.image.crop}" width="120" class="img-responsive" alt="{officetip.author.name}" /> <img data-src="{f:uri.image(image: officetip.author.image, crop: officetip.author.image.crop, width: '120')}"
class="img-responsive lazyload"
alt="{officetip.author.name}">
</f:then> </f:then>
<f:else> <f:else>
<img src="https://placehold.it/120x160" class="img-responsive" alt="{officetip.author.name}"> <img src="https://placehold.it/120x160" class="img-responsive" alt="{officetip.author.name}">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html
+4 -4
View File
@@ -112,10 +112,10 @@
<f:section name="PictureTag"> <f:section name="PictureTag">
<f:if condition="{image}"> <f:if condition="{image}">
<picture class="searchresult-item__image"> <picture class="searchresult-item__image">
<source media="(max-width: 768px)" srcset="{f:uri.image(image: image, width: '220', height: '130c-100')} 220w"/> <source media="(max-width: 768px)" data-srcset="{f:uri.image(image: image, width: '220', height: '130c-100')} 220w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image(image: image, width: '280', height: '220c-100')} 280w"/> <source media="(max-width: 1200px)" data-srcset="{f:uri.image(image: image, width: '280', height: '220c-100')} 280w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image(image: image, width: '260', height: '200c-100')} 260w"/> <source media="(min-width: 1201px)" data-srcset="{f:uri.image(image: image, width: '260', height: '200c-100')} 260w"/>
<img class="scale" src="{f:uri.image(image: image, width: '260', height: '200c-100')}" <img class="scale lazyload" data-src="{f:uri.image(image: image, width: '260', height: '200c-100')}"
title="{image.title}" alt="{image.alternative}"> title="{image.title}" alt="{image.alternative}">
</picture> </picture>
</f:if> </f:if>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/RegionMaps.html
+1 -1
View File
@@ -6,7 +6,7 @@
<a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}" <a href="{f:uri.image(src: '{regionMap.uid}', treatIdAsReference: '1', maxWidth: '2560')}"
data-fancybox="regionmap-{region.uid}" data-caption="Pistenplan {region.name}" data-fancybox="regionmap-{region.uid}" data-caption="Pistenplan {region.name}"
title="Pistenplan {region.name}"> title="Pistenplan {region.name}">
<img class="img-responsive lazy" <img class="img-responsive lazyload"
data-src="{f:uri.image(image: regionMap, width: '330')}" data-src="{f:uri.image(image: regionMap, width: '330')}"
alt="{regionMap.alternative}" alt="{regionMap.alternative}"
title="{regionMap.title}"> title="{regionMap.title}">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Teamer.html
+3 -1
View File
@@ -6,7 +6,9 @@
<div> <div>
<f:if condition="{teamerInCharge.image}"> <f:if condition="{teamerInCharge.image}">
<f:then> <f:then>
<f:image src="{teamerInCharge.image.uid}" treatIdAsReference="1" crop="{teamerInCharge.image.crop}" width="330" class="img-responsive" alt="{teamerInCharge.name}" /> <img data-src="{f:uri.image(image: teamerInCharge.image, crop: teamerInCharge.image.crop, width: '330')}"
class="img-responsive lazyload"
alt="{teamerInCharge.name}">
</f:then> </f:then>
<f:else> <f:else>
<img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}"> <img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserImage.html
+12 -12
View File
@@ -1,49 +1,49 @@
<f:if condition="{image.uid}"> <f:if condition="{image.uid}">
<f:then> <f:then>
<picture> <picture>
<source media="(max-width: 512px)" srcset="{f:uri.image( <source media="(max-width: 512px)" data-srcset="{f:uri.image(
image: image, width: '350', height: '175c-100' image: image, width: '350', height: '175c-100'
)} 350w"/> )} 350w"/>
<source media="(max-width: 768px)" srcset="{f:uri.image( <source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '500', height: '250c-100' image: image, width: '500', height: '250c-100'
)} 500w"/> )} 500w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image( <source media="(max-width: 991px)" data-srcset="{f:uri.image(
image: image, width: '360', height: '200c-100' image: image, width: '360', height: '200c-100'
)} 360w"/> )} 360w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image( <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '160c-100' image: image, width: '320', height: '160c-100'
)} 320w"/> )} 320w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image( <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '370', height: '220c-100' image: image, width: '370', height: '220c-100'
)} 370w"/> )} 370w"/>
<img class="scale" srcset="{f:uri.image( <img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '500', height: '250c-100' image: image, width: '500', height: '250c-100'
)}" title="{image.title}" alt="{image.alternative}"> )}" title="{image.title}" alt="{image.alternative}">
</picture> </picture>
</f:then> </f:then>
<f:else> <f:else>
<picture> <picture>
<source media="(max-width: 512px)" srcset="{f:uri.image( <source media="(max-width: 512px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '350', height: '175c-100' width: '350', height: '175c-100'
)} 320w"/> )} 320w"/>
<source media="(max-width: 768px)" srcset="{f:uri.image( <source media="(max-width: 768px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '500', height: '250c-100' width: '500', height: '250c-100'
)} 500w"/> )} 500w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image( <source media="(max-width: 991px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '360', height: '200c-100' width: '360', height: '200c-100'
)} 360w"/> )} 360w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image( <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '320', height: '160c-100' width: '320', height: '160c-100'
)} 420w"/> )} 420w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image( <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '370', height: '220c-100' width: '370', height: '220c-100'
)} 370w"/> )} 370w"/>
<img class="scale" srcset="{f:uri.image( <img class="scale lazyload" data-src="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg', src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '500', height: '250c-100' width: '500', height: '250c-100'
)}" title="" alt=""> )}" title="" alt="">
web/typo3conf/ext/ep_theme/Resources/Private/Partials/TeaserWideImage.html
+5 -5
View File
@@ -1,19 +1,19 @@
<f:if condition="{image}"> <f:if condition="{image}">
<f:then> <f:then>
<picture class="product-teaser__image"> <picture class="product-teaser__image">
<source media="(max-width: 768px)" srcset="{f:uri.image( <source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '140c-100' image: image, width: '320', height: '140c-100'
)} 320w"/> )} 320w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image( <source media="(max-width: 991px)" data-srcset="{f:uri.image(
image: image, width: '260', height: '220c-100' image: image, width: '260', height: '220c-100'
)} 260w"/> )} 260w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image( <source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '220', height: '130c-100' image: image, width: '220', height: '130c-100'
)} 220w"/> )} 220w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image( <source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '320', height: '200c-100' image: image, width: '320', height: '200c-100'
)} 320w"/> )} 320w"/>
<img class="scale" srcset="{f:uri.image( <img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '260', height: '160c-100' image: image, width: '260', height: '160c-100'
)}" title="{image.title}" alt="{image.alternative}"> )}" title="{image.title}" alt="{image.alternative}">
</picture> </picture>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Default.html
+1 -1
View File
@@ -8,7 +8,7 @@
{data.bodytext -> f:format.html()} {data.bodytext -> f:format.html()}
<f:if condition="{files}"> <f:if condition="{files}">
<f:link.typolink parameter="{files.0.link}"> <f:link.typolink parameter="{files.0.link}">
<img class="img-responsive lazy" <img class="img-responsive lazyload"
data-src="{f:uri.image(image: files.0, maxWidth: '770')}" data-src="{f:uri.image(image: files.0, maxWidth: '770')}"
alt="{files.0.originalResource.alternative}" alt="{files.0.originalResource.alternative}"
title="{files.0.originalResource.title}" title="{files.0.originalResource.title}"
web/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html
+1 -1
View File
@@ -24,7 +24,7 @@
<f:section name="Image"> <f:section name="Image">
<div class="partnerlogo {cssClasses}"> <div class="partnerlogo {cssClasses}">
<f:link.typolink parameter="{image.link}"> <f:link.typolink parameter="{image.link}">
<img class="lazy img-responsive partnerlogo__image" <img class="lazyload img-responsive partnerlogo__image"
data-src="{f:uri.image(image: image, width: '400c', height: '400')}" data-src="{f:uri.image(image: image, width: '400c', height: '400')}"
alt="{image.alternative}" title="{image.title}"> alt="{image.alternative}" title="{image.title}">
</f:link.typolink> </f:link.typolink>
web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Lineup.html
+1 -1
View File
@@ -11,7 +11,7 @@
<f:for each="{items}" as="item" iteration="iteration"> <f:for each="{items}" as="item" iteration="iteration">
<div class="row ep-lineup{f:if(condition: iteration.isEven, then: ' right')}"> <div class="row ep-lineup{f:if(condition: iteration.isEven, then: ' right')}">
<div class="col-md-6"> <div class="col-md-6">
<img class="scale lazy" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/> <img class="scale lazyload" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
</div> </div>
<div class="col-md-6 "> <div class="col-md-6 ">
<div> <div>
web/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html
+2 -1
View File
@@ -31,7 +31,8 @@
<div> <div>
<f:if condition="{member.image}"> <f:if condition="{member.image}">
<f:then> <f:then>
<f:image src="{member.image.uid}" treatIdAsReference="1" crop="{member.image.crop}" width="400" height="400c" title="{member.name}" alt="{member.name}"/> <img data-src="{f:uri.image(image: member.image, width: '400', height: '400c')}"
class="lazyload" title="{member.name}" alt="{member.name}">
</f:then> </f:then>
<f:else> <f:else>
<img src="https://placehold.it/400x400" alt="{member.name}"> <img src="https://placehold.it/400x400" alt="{member.name}">
webpack.config.js
+1 -1
View File
@@ -10,7 +10,7 @@ Encore
.addEntry('unichamp', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js') .addEntry('unichamp', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
.addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss') .addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
.createSharedEntry('vendor', [ .createSharedEntry('vendor', [
'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'jquery-lazy', 'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'lazysizes',
'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel', 'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel',
'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet' 'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet'
]) ])