diff --git a/docs/changelog.rst b/docs/changelog.rst index 9a0b828..ebf7b3d 100644 --- a/docs/changelog.rst +++ b/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) diff --git a/docs/configuration.rst b/docs/configuration.rst index 94975ed..a6f8263 100644 --- a/docs/configuration.rst +++ b/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 diff --git a/prosopopee/prosopopee.py b/prosopopee/prosopopee.py index 2eb3bff..03359e1 100644 --- a/prosopopee/prosopopee.py +++ b/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) diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css index 1eeb26b..0b4d886 100644 --- a/prosopopee/themes/exposure/static/css/style-page.css +++ b/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 {