Fixt uncss + lazyloaded die Galleriethumbnails. (Verhindert aktuell die Darstellung der Bilder ohne Javascript, was eventuell gar nicht so schlecht ist.)

6 files changed, 71 insertions, 33 deletions

diff --git a/gospeladlershof.de/Makefile b/gospeladlershof.de/Makefile
index 23b7e6c..9995662 100644
--- a/gospeladlershof.de/Makefile
+++ b/gospeladlershof.de/Makefile
@@ -6,11 +6,15 @@ build: clean
 	|| ( echo "Failure building the site." && exit 1)
 	gulp concat
 	gulp uncss 
-	@HUGO_READ_CONCAT=0 HUGO_TEST=0 \
+	gulp concat2
+	gulp concatjs
+	@HUGO_READ_CONCAT=1 HUGO_TEST=0 \
 		hugo --ignoreCache --log=true --logFile=../log/hugo.log --verbose=false \
 	|| ( echo "Failure building the site." && exit 1)
 	gulp minifyhtml
 	rm -rf public/css
+	rm -rf public/uncss
+	cd public/js && mkdir _tmp_ && mv lazyload.min.js chor.min.js _tmp_ && rm -f *.js && mv _tmp_/*.js . && rmdir _tmp_
 
 serve: server
 
@@ -26,16 +30,22 @@ deploy: build
 
 clean:
 	$(RM) $(RMFLAGS) -r public/
-	$(RM) $(RMFLAGS) static/concat.css
-	$(RM) $(RMFLAGS) -r static/gulp.css/
+	$(RM) $(RMFLAGS) static/css/concat.css
+	$(RM) $(RMFLAGS) -r static/uncss/
+	$(RM) $(RMFLAGS) static/js/chor.js
+	$(RM) $(RMFLAGS) static/js/chor.min.js
 
 localbuild: clean
-	@HUGO_TEST=1 hugo --baseURL="http://192.168.178.68:3000/" --ignoreCache --log=true --logFile=../log/hugo.log --verbose=false 1>/dev/null \
+	HUGO_TEST=1 hugo --baseURL="http://0.0.0.0:3000/" --ignoreCache --log=true --logFile=../log/hugo.log --verbose=false 1>/dev/null \
 	|| ( echo "Failure building the site." && exit 1)
 	gulp concat
 	gulp uncss 
-	@HUGO_READ_CONCAT=1 HUGO_TEST=0 \
-		hugo --baseURL="http://192.168.178.68:3000/" --ignoreCache --log=true --logFile=../log/hugo.log --verbose=false \
+	gulp concat2
+	gulp concatjs
+	HUGO_READ_CONCAT=1 HUGO_TEST=0 \
+		hugo --baseURL="http://0.0.0.0:3000/" --ignoreCache --log=true --logFile=../log/hugo.log --verbose=false \
 	|| ( echo "Failure building the site." && exit 1)
 	gulp minifyhtml
-	#rm -rf public/css
+	rm -rf public/css
+	rm -rf public/uncss
+	cd public/js && mkdir _tmp_ && mv lazyload.min.js chor.min.js _tmp_ && rm -f *.js && mv _tmp_/*.js . && rmdir _tmp_
diff --git a/gospeladlershof.de/gulpfile.js b/gospeladlershof.de/gulpfile.js
index ec97e58..06601c8 100644
--- a/gospeladlershof.de/gulpfile.js
+++ b/gospeladlershof.de/gulpfile.js
@@ -3,21 +3,40 @@ var cssnano = require('gulp-cssnano');
 var htmlmin = require('gulp-htmlmin');
 var uncss = require('gulp-uncss');
 var concat = require('gulp-concat');
+var minify = require('gulp-minify');
 
 gulp.task('concat', function() {
-	return gulp.src(['static/css/animate.min.css', 'static/css/bootstrap.min.css', 'static/css/magnific-popup.css', 'static/css/theme.css', 'static/css/chor.css'])
+	//return gulp.src(['static/css/animate.min.css', 'static/css/bootstrap.min.css'])
+	return gulp.src(['static/css/bootstrap.min.css'])
 	.pipe(concat('concat.css'))
-	.pipe(gulp.dest('./static/'));
+	.pipe(gulp.dest('./static/css/'));
 });
 
 gulp.task('uncss', function() {
-	return gulp.src('static/concat.css')
+	return gulp.src('static/css/concat.css')
 		.pipe(uncss({
 		html: ['public/*.html', 'public/impressum/*.html'],
 		ignore: ['.text-right', '.text-left', '.affix', '.navbar-default.affix']
 		}))
 		.pipe(cssnano())
-		.pipe(gulp.dest('./static/gulp.css'));
+		.pipe(gulp.dest('./static/uncss'));
+});
+gulp.task('concat2', function() {
+	return gulp.src(['static/uncss/concat.css', 'static/css/magnific-popup.css', 'static/css/theme.css', 'static/css/chor.css'])
+	.pipe(cssnano())
+	.pipe(concat('concat.css'))
+	.pipe(gulp.dest('./static/uncss/'));
+});
+gulp.task('concatjs', function() {
+	//gulp.src(['static/js/lazyload.min.js', 'static/js/jquery.min.js', 'static/js/bootstrap.min.js', 'static/js/jquery.easing.min.js', 'static/js/jquery.fittext.js', 'static/js/jquery.magnific-popup.js', 'static/js/gospelchor.js'])
+	gulp.src(['static/js/jquery.min.js', 'static/js/bootstrap.min.js', 'static/js/jquery.easing.min.js', 'static/js/jquery.fittext.js', 'static/js/jquery.magnific-popup.js', 'static/js/gospelchor.js'])
+	.pipe(concat('chor.js'))
+	.pipe(minify({
+		ext: {
+			min:'.min.js'
+		}
+	}))
+	.pipe(gulp.dest('./static/js/'));
 });
 
 gulp.task('minifyhtml', function() {
diff --git a/gospeladlershof.de/layouts/index.html b/gospeladlershof.de/layouts/index.html
index 96ce488..ec89157 100644
--- a/gospeladlershof.de/layouts/index.html
+++ b/gospeladlershof.de/layouts/index.html
@@ -1,6 +1,6 @@
 {{ $termine := getJSON "https://www.gospeladlershof.de/" "api/v1/termine" }}
 {{partial "header.tmpl" . }}
-	<script src="js/lazyload.min.js"></script>
+	<script src="js/lazyload.min.js" defer async></script>
 
 	{{partial "navbar.tmpl" .}}
 
@@ -81,7 +81,7 @@
 		 </div>
                 <div class="col-lg-12 center-block popup-gallery text-center">
                     		<a href="img/gospelchor.jpg" class="portfolio-box">
-					<img id="img-chor-alt" style="display:none;" onload="document.getElementById('img-chor-alt').style.display = '';lzld(this)" class="img-responsive img-rounded img-responsive-center" data-src="{{$.Site.BaseURL}}img/chor-alt.jpg" alt="Der Gospelchor" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" >
+					<img id="img-chor-alt" style="display:none;" onload="document.getElementById('img-chor-alt').style.display = '';" class="img-responsive img-rounded img-responsive-center" data-src="{{$.Site.BaseURL}}img/chor-alt.jpg" alt="Der Gospelchor" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" >
 					<noscript><img class="img-responsive img-rounded img-responsive-center" src="{{$.Site.BaseURL}}img/chor-alt.jpg" alt="Der Gospelchor"></noscript>
 				<p><small>Zum vergrößern auf das Bild klicken.</small></p>
 				</a>
@@ -115,7 +115,7 @@
 				<a href="//www.openstreetmap.org/?mlat=52.43742&amp;mlon=13.55019#map=18/52.43742/13.55019" target=_blank title="www.OpenStreetMap.org öffnen"><img width=425 height=350 src="img/map-klein.png"></a>
 			</a>
 			</noscript>
-			<iframe id="osm" style="display:none;" onload="document.getElementById('osm').style.display = '';lzld(this)" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" data-src="//www.openstreetmap.org/export/embed.html?bbox=13.545708060264586%2C52.43595655806899%2C13.554666638374329%2C52.43888674426951&amp;layer=mapnik&amp;marker=52.43742167552577%2C13.550187349319458" style="border: 1px solid black">
+			<iframe id="osm" style="display:none;" onload="document.getElementById('osm').style.display = '';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" data-src="//www.openstreetmap.org/export/embed.html?bbox=13.545708060264586%2C52.43595655806899%2C13.554666638374329%2C52.43888674426951&amp;layer=mapnik&amp;marker=52.43742167552577%2C13.550187349319458" style="border: 1px solid black">
 				<a href="//www.openstreetmap.org/?mlat=52.43742&amp;mlon=13.55019#map=18/52.43742/13.55019" target=_blank title="www.OpenStreetMap.org öffnen"><img width=425 height=350 src="img/map-klein.png"></a>
 			</iframe><br>
 			<small><a href="//www.openstreetmap.org/?mlat=52.43742&amp;mlon=13.55019#map=18/52.43742/13.55019" target=_blank title="Größere Karte auf www.OpenStreetMap.org anzeigen">Größere Karte anzeigen <i class="fa fa-external-link-square"></i></a></small>
@@ -135,14 +135,14 @@
             <div class="row no-gutter popup-gallery">
                 <div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180198.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/PB180198_thumb.JPG" class="img-responsive" alt="">
+                        <img  style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/PB180198_thumb.JPG" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                         </div>
                     </a>
                 </div>
                 <div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180200.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/1.jpg" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/1.jpg" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                             <!--div class="portfolio-box-caption-content">
                                 <div class="project-category text-faded">
@@ -157,21 +157,21 @@
                 </div>
                 <!--div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180266.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/2.jpg" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/2.jpg" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                         </div>
                     </a>
                 </div-->
                 <!--div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180266.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/2.jpg" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/2.jpg" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                         </div>
                     </a>
                 </div-->
                 <div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180283.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/3.jpg" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/3.jpg" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                             <!--div class="portfolio-box-caption-content">
                                 <div class="project-category text-faded">
@@ -186,7 +186,7 @@
                 </div>
                 <div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180320.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/4.jpg" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/4.jpg" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                             <!--div class="portfolio-box-caption-content">
                                 <div class="project-category text-faded">
@@ -201,7 +201,7 @@
                 </div>
                 <div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180307.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/5.jpg" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/5.jpg" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                             <!--div class="portfolio-box-caption-content">
                                 <div class="project-category text-faded">
@@ -216,7 +216,7 @@
                 </div>
                 <div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180287.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/6.jpg" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/6.jpg" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                             <!--div class="portfolio-box-caption-content">
                                 <div class="project-category text-faded">
@@ -231,21 +231,21 @@
                 </div>
                 <div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180211.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/PB180211_thumb.JPG" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/PB180211_thumb.JPG" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                         </div>
                     </a>
                 </div>
                 <div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180202.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/PB180202_thumb.JPG" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/PB180202_thumb.JPG" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                         </div>
                     </a>
                 </div>
                 <div class="col-lg-4 col-sm-6">
                     <a href="img/galerie/PB180249.JPG" class="portfolio-box">
-                        <img src="img/galerie/thumbnails/PB180249_thumb.JPG" class="img-responsive" alt="">
+                        <img style="display:none;" onload="this.style.display='';" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="img/galerie/thumbnails/PB180249_thumb.JPG" class="img-responsive chor-thumbnail" alt="">
                         <div class="portfolio-box-caption">
                         </div>
                     </a>
diff --git a/gospeladlershof.de/layouts/partials/header.tmpl b/gospeladlershof.de/layouts/partials/header.tmpl
index 4e68ffe..657a275 100644
--- a/gospeladlershof.de/layouts/partials/header.tmpl
+++ b/gospeladlershof.de/layouts/partials/header.tmpl
@@ -42,10 +42,10 @@
 	{{$read := getenv "HUGO_READ_CONCAT"}}
 	{{if eq $read "1"}}
 		<style>
-		{{readFile "static/gulp.css/concat.css" | safeCSS}}
+		{{readFile "static/uncss/concat.css" | safeCSS}}
 		</style>
         {{else}}
-    <link rel="stylesheet" href="{{.Site.BaseURL}}concat.css" type="text/css">
+    <link rel="stylesheet" href="{{.Site.BaseURL}}css/concat.css" type="text/css">
 	{{end}}
 
 <!-- Piwik -->
diff --git a/gospeladlershof.de/layouts/partials/js.tmpl b/gospeladlershof.de/layouts/partials/js.tmpl
index f765f4b..f70fa42 100644
--- a/gospeladlershof.de/layouts/partials/js.tmpl
+++ b/gospeladlershof.de/layouts/partials/js.tmpl
@@ -1,9 +1,5 @@
-
-{{$tmp := getenv "HUGO_TEST-BL"}}
+{{$tmp := getenv "HUGO_TEST"}}
 {{if eq $tmp "1"}}
-    <script src="{{.Site.BaseURL}}js/js.min.js" defer async></script>
-{{else}}
-{{end}}
     <!-- jQuery -->
     <script src="{{.Site.BaseURL}}js/jquery.min.js"></script>
 
@@ -17,7 +13,10 @@
     <!--script src="{{.Site.BaseURL}}js/wow.min.js"></script-->
 
     <!-- Custom Theme JavaScript -->
-    <script src="{{.Site.BaseURL}}js/gc.js"></script>
+    <script src="{{.Site.BaseURL}}js/gospelchor.js"></script>
+{{else}}
+    <script src="{{.Site.BaseURL}}js/chor.min.js" defer async></script>
+{{end}}
 
 </body>
 
diff --git a/gospeladlershof.de/static/js/gc.js b/gospeladlershof.de/static/js/gospelchor.js
index 80773d8..70c7631 100644
--- a/gospeladlershof.de/static/js/gc.js
+++ b/gospeladlershof.de/static/js/gospelchor.js
@@ -120,3 +120,13 @@ $(window).load(function(){
 		});
 	}
 });
+$(document).ready(function(){
+	lzld(document.getElementById('img-chor-alt'));
+	lzld(document.getElementById('osm'));
+
+	var thumbs = document.getElementsByClassName("chor-thumbnail");
+	for( i = 0; i < thumbs.length; i++) {
+		console.log("lazyloading " + thumbs[i]);
+		lzld(thumbs[i]);
+	}
+});