From 464cce29a2e04e508a39cf9e68da4458d53873f8 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Sun, 23 Oct 2016 19:03:43 +0200
Subject: load low-res images first

---
 compress.sh                               |   6 ++++++
 static/images/min/.directory              |   4 ++++
 static/images/min/dreharbeiten.jpg        | Bin 0 -> 142429 bytes
 static/images/min/kronen.jpg              | Bin 0 -> 132073 bytes
 static/images/min/mensa.jpg               | Bin 0 -> 150222 bytes
 static/images/min/minibar.jpg             | Bin 0 -> 105308 bytes
 static/images/min/skyline.jpg             | Bin 0 -> 150028 bytes
 static/images/min/trdlenik.jpg            | Bin 0 -> 132199 bytes
 themes/flog/layouts/_default/single.html  |   6 +++++-
 themes/flog/layouts/partials/footer.html  |   7 ++++---
 themes/flog/layouts/partials/header.html  |   3 +--
 themes/flog/layouts/partials/listing.html |   6 +++++-
 12 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 compress.sh
 create mode 100644 static/images/min/.directory
 create mode 100644 static/images/min/dreharbeiten.jpg
 create mode 100644 static/images/min/kronen.jpg
 create mode 100644 static/images/min/mensa.jpg
 create mode 100644 static/images/min/minibar.jpg
 create mode 100644 static/images/min/skyline.jpg
 create mode 100644 static/images/min/trdlenik.jpg

diff --git a/compress.sh b/compress.sh
new file mode 100644
index 0000000..da5a3bb
--- /dev/null
+++ b/compress.sh
@@ -0,0 +1,6 @@
+#!/usr/bin/bash
+RATIO=10
+cd static/images
+mkdir -p min/
+#find -maxdepth 1 -name "*.jpg" | xargs -I_ convert -scale $((100/$RATIO))% -scale $((100*$RATIO))% -gaussian-blur x${RATIO} -interlace Plane -quality 70% _ min/_
+find -maxdepth 1 -name "*.jpg" | xargs -I_ convert -gaussian-blur x${RATIO} -interlace Plane -quality 70% -verbose _ min/_
diff --git a/static/images/min/.directory b/static/images/min/.directory
new file mode 100644
index 0000000..2df0508
--- /dev/null
+++ b/static/images/min/.directory
@@ -0,0 +1,4 @@
+[Dolphin]
+PreviewsShown=true
+Timestamp=2016,10,23,17,40,36
+Version=3
diff --git a/static/images/min/dreharbeiten.jpg b/static/images/min/dreharbeiten.jpg
new file mode 100644
index 0000000..70f7c5e
Binary files /dev/null and b/static/images/min/dreharbeiten.jpg differ
diff --git a/static/images/min/kronen.jpg b/static/images/min/kronen.jpg
new file mode 100644
index 0000000..514bc0d
Binary files /dev/null and b/static/images/min/kronen.jpg differ
diff --git a/static/images/min/mensa.jpg b/static/images/min/mensa.jpg
new file mode 100644
index 0000000..71060f3
Binary files /dev/null and b/static/images/min/mensa.jpg differ
diff --git a/static/images/min/minibar.jpg b/static/images/min/minibar.jpg
new file mode 100644
index 0000000..555cee5
Binary files /dev/null and b/static/images/min/minibar.jpg differ
diff --git a/static/images/min/skyline.jpg b/static/images/min/skyline.jpg
new file mode 100644
index 0000000..2af16f8
Binary files /dev/null and b/static/images/min/skyline.jpg differ
diff --git a/static/images/min/trdlenik.jpg b/static/images/min/trdlenik.jpg
new file mode 100644
index 0000000..fcc6045
Binary files /dev/null and b/static/images/min/trdlenik.jpg differ
diff --git a/themes/flog/layouts/_default/single.html b/themes/flog/layouts/_default/single.html
index 44bdae9..bae38f8 100644
--- a/themes/flog/layouts/_default/single.html
+++ b/themes/flog/layouts/_default/single.html
@@ -4,7 +4,11 @@
         <main role="main" class="container">
             <article itemscope itemtype="http://schema.org/BlogPosting" class="section">
                 {{ if .Params.image }}
-                <img src="/images/{{ .Params.image }}" style="width: 100%;">
+                <img class="jsonly" src="/images/min/{{ .Params.image }}" style="width: 100%;" onload="this.src = '/images/{{ .Params.image }}'">
+                <noscript>
+                    <img src="/images/{{ .Params.image }}" style="width: 100%;">
+                    <style>.jsonly { display: none }</style>
+                </noscript>
                 {{ end }}
                 <h1 itemprop="headline" class="header">{{ .Title }}</h1>
                 <span><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "02.01.2006" }}</time></span>
diff --git a/themes/flog/layouts/partials/footer.html b/themes/flog/layouts/partials/footer.html
index 6a2857e..0dcd9e1 100644
--- a/themes/flog/layouts/partials/footer.html
+++ b/themes/flog/layouts/partials/footer.html
@@ -17,9 +17,10 @@
                 $('.button-collapse').sideNav();
                 $('#main').smoothState({ prefetch: true, onAfter: ready });
             });
-
-            $(document).ready(function() {
-                $('.parallax').parallax();
+            $('body').imagesLoaded({ background: true }, function() {
+                $('<img src="/images/skyline.jpg">').load(function() {
+                    $('body').css('background-image', 'url(' + this.src + ')');
+                });
             });
         </script>
     </body>
diff --git a/themes/flog/layouts/partials/header.html b/themes/flog/layouts/partials/header.html
index 07fdd3d..8016f53 100644
--- a/themes/flog/layouts/partials/header.html
+++ b/themes/flog/layouts/partials/header.html
@@ -9,8 +9,7 @@
         <link rel="alternate" href="/index.xml" type="application/rss+xml" title="{{ .Site.Title }}">
         <title>{{ .Title }}{{ if not .IsHome }} - {{ .Site.Title }}{{ end }}</title>
     </head>
-    <body style="background: url(/images/skyline.jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;">
-    <body>
+    <body style="background-image: url(/images/min/skyline.jpg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;">
         <div id="main">
             <header class="navbar-fixed">
                 <nav class="black">
diff --git a/themes/flog/layouts/partials/listing.html b/themes/flog/layouts/partials/listing.html
index a893211..a5556b6 100644
--- a/themes/flog/layouts/partials/listing.html
+++ b/themes/flog/layouts/partials/listing.html
@@ -11,7 +11,11 @@
             <div class="card">
                 {{ if .Params.image }}
                 <div class="card-image">
-                    <a href="{{ .RelPermalink }}"><img src="/images/{{ .Params.image }}"></a>
+                    <a class="jsonly" href="{{ .RelPermalink }}"><img src="/images/min/{{ .Params.image }}" onload="this.src = '/images/{{ .Params.image }}'"></a>
+                    <noscript>
+                        <a href="{{ .RelPermalink }}"><img src="/images/{{ .Params.image }}"></a>
+                        <style>.jsonly { display: none }</style>
+                    </noscript>
                 </div>
                 {{ end }}
                 <section class="card-content" itemprop="text">
-- 
cgit v1.3.1