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

Lazyload images from social media streams

Browse Source
This commit is contained in:
Björn Fromme
2018-12-13 14:41:41 +01:00
parent 3b6038a2f9
commit 4c04faabb5
4 changed files with 54 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+35 -35
View File
@@ -11,7 +11,7 @@
},
"@symfony/webpack-encore": {
"version": "0.19.0",
"resolved": "http://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-0.19.0.tgz",
"resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-0.19.0.tgz",
"integrity": "sha512-pdyT16Dgu+3fF1lAgR6mUew9h88nwjOpv47x79txVavTZcg0xiSOlPXrD/qljSb4FzMJju96sDKmt098dhcyVQ==",
"dev": true,
"requires": {
@@ -280,7 +280,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
@@ -1716,7 +1716,7 @@
},
"clean-webpack-plugin": {
"version": "0.1.19",
"resolved": "http://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-0.1.19.tgz",
"resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-0.1.19.tgz",
"integrity": "sha512-M1Li5yLHECcN2MahoreuODul5LkjohJGFxLPTjl3j1ttKrF5rgjZET1SJduuqxLAuT1gAPOdkhg03qcaaU1KeA==",
"dev": true,
"requires": {
@@ -1828,7 +1828,7 @@
},
"color-string": {
"version": "0.3.0",
"resolved": "http://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
"integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=",
"dev": true,
"requires": {
@@ -1848,7 +1848,7 @@
},
"colors": {
"version": "1.1.2",
"resolved": "http://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
"resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
"integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
"dev": true
},
@@ -2184,7 +2184,7 @@
"dependencies": {
"regexpu-core": {
"version": "1.0.0",
"resolved": "http://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
"integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
"dev": true,
"requires": {
@@ -2294,7 +2294,7 @@
},
"d": {
"version": "1.0.0",
"resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
"integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
"dev": true,
"requires": {
@@ -2920,7 +2920,7 @@
},
"expand-range": {
"version": "1.8.2",
"resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
"resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
"integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
"dev": true,
"requires": {
@@ -3006,7 +3006,7 @@
"dependencies": {
"array-flatten": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
"dev": true
},
@@ -4064,7 +4064,7 @@
},
"globby": {
"version": "6.1.0",
"resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
"resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
"integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
"dev": true,
"requires": {
@@ -4108,7 +4108,7 @@
},
"handle-thing": {
"version": "1.2.5",
"resolved": "http://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
"integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=",
"dev": true
},
@@ -4316,7 +4316,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
@@ -4976,7 +4976,7 @@
},
"jsesc": {
"version": "1.3.0",
"resolved": "http://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
"integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
"dev": true
},
@@ -5406,7 +5406,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
@@ -5741,7 +5741,7 @@
},
"next-tick": {
"version": "1.0.0",
"resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
"dev": true
},
@@ -6135,7 +6135,7 @@
},
"os-homedir": {
"version": "1.0.2",
"resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
"dev": true
},
@@ -6152,7 +6152,7 @@
},
"os-tmpdir": {
"version": "1.0.2",
"resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"dev": true
},
@@ -6273,7 +6273,7 @@
},
"path-browserify": {
"version": "0.0.0",
"resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
"integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=",
"dev": true
},
@@ -6291,7 +6291,7 @@
},
"path-is-absolute": {
"version": "1.0.1",
"resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true
},
@@ -7478,7 +7478,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
@@ -7583,7 +7583,7 @@
},
"regexpu-core": {
"version": "2.0.0",
"resolved": "http://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-2.0.0.tgz",
"integrity": "sha1-SdA4g3uNz4v6W5pCE5k45uoq4kA=",
"dev": true,
"requires": {
@@ -7600,7 +7600,7 @@
},
"regjsparser": {
"version": "0.1.5",
"resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
"integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
"dev": true,
"requires": {
@@ -7609,7 +7609,7 @@
"dependencies": {
"jsesc": {
"version": "0.5.0",
"resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
"integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
"dev": true
}
@@ -8023,7 +8023,7 @@
},
"sass-mq": {
"version": "3.3.2",
"resolved": "http://registry.npmjs.org/sass-mq/-/sass-mq-3.3.2.tgz",
"resolved": "https://registry.npmjs.org/sass-mq/-/sass-mq-3.3.2.tgz",
"integrity": "sha1-NHLgTDGkMrzVWztgTtxyrppN7xo="
},
"sax": {
@@ -8053,7 +8053,7 @@
"dependencies": {
"source-map": {
"version": "0.4.4",
"resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
"integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
"dev": true,
"requires": {
@@ -8589,7 +8589,7 @@
},
"sprintf-js": {
"version": "1.0.3",
"resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
"dev": true
},
@@ -8675,7 +8675,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
@@ -8691,7 +8691,7 @@
},
"stream-browserify": {
"version": "2.0.1",
"resolved": "http://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
"resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
"integrity": "sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=",
"dev": true,
"requires": {
@@ -8722,7 +8722,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
@@ -8767,7 +8767,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
@@ -8811,7 +8811,7 @@
},
"string_decoder": {
"version": "0.10.31",
"resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
},
@@ -8883,7 +8883,7 @@
},
"tar": {
"version": "2.2.1",
"resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
"integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
"dev": true,
"requires": {
@@ -8997,7 +8997,7 @@
},
"tty-browserify": {
"version": "0.0.0",
"resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
"integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
"dev": true
},
@@ -9231,7 +9231,7 @@
},
"util": {
"version": "0.10.3",
"resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
"dev": true,
"requires": {
@@ -9305,7 +9305,7 @@
},
"vm-browserify": {
"version": "0.0.4",
"resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
"integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=",
"dev": true,
"requires": {
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+10
View File
@@ -13,6 +13,7 @@ global.$ = global.jQuery = $;
require('cookieconsent');
require('slick-carousel');
require('lazysizes');
require('lazysizes/plugins/unveilhooks/ls.unveilhooks');
require('bootstrap-sass/assets/javascripts/bootstrap');
require('picturefill');
require('leaflet');
@@ -144,6 +145,14 @@ new Vue({
$(this).css('backgroundImage', 'url(' + imageSource + ')');
});
},
lazyLoadBackgroundImages () {
document.addEventListener('lazybeforeunveil', e => {
const bg = e.target.getAttribute('data-bg');
if (bg) {
e.target.style.backgroundImage = 'url(' + bg + ')';
}
});
},
initCarousels () {
let $carouselItemWrappers = $('.slider--teasers > .slider__items').not('.slick-initialized');
$.each($carouselItemWrappers, function () {
@@ -389,6 +398,7 @@ new Vue({
this.setMobileMode();
this.setBackgroundImageMode();
this.setResponsiveBackgroundImages();
this.lazyLoadBackgroundImages();
this.initListeners();
this.initFilterpanel();
this.initCarousels();
web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-facebook.html
+6 -3
View File
@@ -5,10 +5,12 @@
<f:then>
<f:if condition="{fb_full_res}">
<f:then>
<div class="image full_resolution" data-image-id="{feed.raw.full_picture}" style="background-image: url({feed.raw.full_picture})"></div>
<div class="image full_resolution lazyload" data-image-id="{feed.raw.full_picture}"
data-bg="{feed.raw.full_picture}"></div>
</f:then>
<f:else>
<div class="image" data-image-id="{feed.raw.picture}" style="background-image: url({feed.raw.picture})"></div>
<div class="image lazyload" data-image-id="{feed.raw.picture}"
data-bg="{feed.raw.picture}"></div>
</f:else>
</f:if>
</f:then>
@@ -35,7 +37,8 @@
<f:count>{feed.raw.comments.data}</f:count>
</span>
<f:if condition="{0:feed.raw.type}=={0:'video'}">
<img class="video-overlay" src="/typo3conf/ext/pb_social/Resources/Public/Icons/play_icon.png"/>
<img class="video-overlay lazyload"
data-src="{f:uri.image(src: 'EXT:pb_social/Resources/Public/Icons/play_icon.png')}" />
</f:if>
</a>
</f:if>
web/typo3conf/ext/ep_theme/Resources/Private/Partials/SocialMedia/Feed/Provider-instagram.html
+3 -2
View File
@@ -1,5 +1,6 @@
<a href="{feed.link}" target="_blank" class="pb-list-item pb-list-item-instagram pb-hidden socialmedia__item" data-type="" data-url="{feed.link}">
<div class="image" style="background-image: url({feed.image})"></div>
<a href="{feed.link}" target="_blank" class="pb-list-item pb-list-item-instagram pb-hidden socialmedia__item"
data-type="" data-url="{feed.link}">
<div class="image lazyload" data-bg="{feed.image}"></div>
<f:if condition="{feed.text}">
<span class="text">{feed.text}</span>
</f:if>