merge with upstream

docs/changelog.rst

@@ -11,6 +11,7 @@ Changelog
  * make code a bit more robust by Bram
  * basic CI on travis by Bram
  * Light mode by beudbeud
+ * progressive JPEG/GIF/PNG by default for a better loading experience by 0x010C following sebian's blogpost
 
 0.3.1 (2016-04-13)
 

docs/configuration.rst

@@ -12,7 +12,7 @@ The files organisation is quite simple:
 Root settings.yaml
 ------------------
 
-The root settings.yaml should contains 2 keys : one for the title of your website and one for the subtitle. It should looks like that::
+The root settings.yaml should contains 2 keys: one for the title of your website and one for the subtitle. It should looks like that::
 
     title: My exploration of the outside world
     sub_title: it's a scary place, don't go there
@@ -40,11 +40,11 @@ For example, this could be the content of `settings.yaml` in `about` folder::
 
 You can use the `static` option to get a template closer to the one of the
 homepage that is better suited for a static page. You'll need to specify
-"public: false" if you don't want to list this page on the homepage. On you
+"public: false" if you don't want to list this page on the homepage. On
 case you didn't specified "public: false" you'll **need** to specify a "cover:"
 entry like any other gallery.
 
-**NOTE**: except the "static: " option to disepear quite soon for a more
+**NOTE**: expect the "static: " option to disappear quite soon for a more
 generic approach to "choose your page style".
 
 Global settings
@@ -63,13 +63,15 @@ Currently a `gm` settings key allows to customize the default GraphicsMagick's b
         auto-orient: True
         strip: True
         resize: 50%
+        progressive: True
 
-The meaning of the currently supported GraphicsMagick's settings is as follows :
+The meaning of the currently supported GraphicsMagick's settings is as follows:
 
  * `quality` allows to customize the compression level of thumbnails (between 0 and 100)
  * `auto-orient` change the orientation of pictures so they are upright (based on corresponding EXIF tags if present)
  * `strip` removes all profiles and text attributes from the image (good for privacy, slightly reduce file size)
  * `resize` can be used to resize the fullsize version of pictures. by default, input image size is preserved
+ * `progressive` converts classic baseline JPEG files to progressive JPEG, and interlace PNG/GIF files (improve the page loading impression, slightly reduce file size)
 
 Any GraphicsMagick setting can be customized on a per-image basis (either `cover` or `image`, see below).
 
@@ -202,7 +204,7 @@ _______
       - type: bordered-picture
         image: another_picture.jpg
 
-And here is an example or a **private** gallery (notice the ``public`` keyword)::
+And here is an example of a **private** gallery (notice the ``public`` keyword)::
 
     title: Gallery title
     sub_title: Gallery sub-title

prosopopee/prosopopee.py

@@ -22,7 +22,8 @@ SETTINGS = {
         "quality": 75,
         "auto-orient": True,
         "strip": True,
-        "resize": None
+        "resize": None,
+        "progressive": True
     },
     "ffmpeg": {
         "binary": "ffmpeg",
@@ -138,10 +139,11 @@ class Image(object):
            "auto-orient": "-auto-orient" if options["auto-orient"] else "",
            "strip": "-strip" if options["strip"] else "",
            "quality": "-quality %s" % options["quality"] if "quality" in options else "-define jpeg:preserve-settings",
-           "resize": "-resize %s" % options["resize"] if options.get("resize", None) is not None else ""
+           "resize": "-resize %s" % options["resize"] if options.get("resize", None) is not None else "",
+           "progressive": "-interlace Line" if options.get("progressive", None) is True else ""
         }
 
-        command = "gm convert {source} {auto-orient} {strip} {quality} {resize} {target}".format(**gm_switches)
+        command = "gm convert '{source}' {auto-orient} {strip} {progressive} {quality} {resize} '{target}'".format(**gm_switches)
         warning("Generation", source)
 
         print(command)

prosopopee/themes/exposure/static/css/style-page.css

@@ -350,7 +350,7 @@ a.google {
     left: 0;
     z-index: 0;
     width: 100%;
-    height: auto;
+    height: 100%;
 }
 
 .full-picture video {
@@ -364,6 +364,7 @@ a.google {
     width: 77%;
     margin-left: 11.5%;
     margin-right: 11.5%;
+    object-fit: fill;
 }
 
 .bg-section {