From 2e324123b6fdf6416627f603ced04148c483e5db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antoine=20Beaupr=C3=A9?= Date: Sun, 31 Dec 2017 17:57:15 -0500 Subject: [PATCH 1/5] include camera model and shorten exif stats MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This adds a line to show the camera model and make, if available, and reorders and cleans up the EXIF parameters extracted so they are more readable for photographers (who are the ones who care about this anyways). Note that, as a photographer, I know what "Fstop" mean, but I would expect "exposure" or the common f/X.Y notation. The "Focal" label means nothing to me: "Focal length" would mean something, but it's long - and what are the units? Just using "mm" here clarifies any possible misunderstanding. I have found this format to be way more readable. The following: ISO: 3200, Focal: 50, Exposure: 1/40, Fstop: 4.0 Date: dimanche, 31. décembre 2017 Becomes: ISO 3200, 1/40s f/4.0, 50mm FUJIFILM X-T2 dimanche, 31. décembre 2017 Now: dropping the explicit labels may be controversial, but I would argue this is what markup is for. We could wrap those elements in named or elements to provide more information through mouse-over or CSS. --- sigal/themes/galleria/templates/index.html | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/sigal/themes/galleria/templates/index.html b/sigal/themes/galleria/templates/index.html index 706a698..6013859 100644 --- a/sigal/themes/galleria/templates/index.html +++ b/sigal/themes/galleria/templates/index.html @@ -79,18 +79,21 @@ {%- if media.exif %}
- {% if media.exif.iso %}ISO: {{ media.exif.iso }}, {% endif %} - {% if media.exif.focal %}Focal: {{ media.exif.focal }}, {% endif %} - {% if media.exif.exposure %}Exposure: {{ media.exif.exposure }}, {% endif %} - {% if media.exif.fstop %}Fstop: {{ media.exif.fstop }}{% endif %} + {% if media.exif.iso %}ISO {{ media.exif.iso }}, {% endif %} + {% if media.exif.exposure %}{{ media.exif.exposure }}s, {% endif %} + {% if media.exif.fstop %}f/{{ media.exif.fstop }}, {% endif %} + {% if media.exif.focal %}{{ media.exif.focal }}mm {% endif %} {% if media.exif.gps %}
Location: {{ 'N{:.6f}'.format(media.exif.gps.lat) if media.exif.gps.lat > 0 else 'S{:.6f}'.format(-media.exif.gps.lat) }} {{ 'E{:.6f}'.format(media.exif.gps.lon) if media.exif.gps.lon > 0 else 'W{:.6f}'.format(-media.exif.gps.lon) }} {% endif %} + {% if media.exif.Make or media.exif.Model %} +
{{ media.exif.Make }} {{ media.exif.Model }} + {% endif %} {% if media.exif.datetime %} -
Date: {{ media.exif.datetime }} +
{{ media.exif.datetime }} {% endif %} {% endif %} {%- endmacro %} From 48c064d9f15db49bb85970a18db865b0119decb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antoine=20Beaupr=C3=A9?= Date: Wed, 3 Jan 2018 13:34:52 -0500 Subject: [PATCH 2/5] use abbr to explain what the metadata fields are Keep the normal font for browsers that switch to smallcaps, as suggested by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr We remove the dotted line normalization currently configured in the `normalize.css` file because it actually creates a *second* dotted line in Firefox 57. The directive there is `text-decoration` which is what we disable here instead. It looks better without any dotted line. We leave the trailing commas and strings like `ISO`, `f/` or `mm` but those could also be managed through CSS. `
` tags may similarly be managed better through CSS as well. --- sigal/themes/galleria/static/css/normalize.css | 3 ++- sigal/themes/galleria/static/css/style.min.css | 2 +- sigal/themes/galleria/templates/index.html | 14 +++++++------- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/sigal/themes/galleria/static/css/normalize.css b/sigal/themes/galleria/static/css/normalize.css index 08f8950..c0f40ac 100644 --- a/sigal/themes/galleria/static/css/normalize.css +++ b/sigal/themes/galleria/static/css/normalize.css @@ -105,7 +105,8 @@ a:hover { */ abbr[title] { - border-bottom: 1px dotted; + text-decoration: dotted underline; + font-variant: none; } /** diff --git a/sigal/themes/galleria/static/css/style.min.css b/sigal/themes/galleria/static/css/style.min.css index d0a2389..ef68405 100644 --- a/sigal/themes/galleria/static/css/style.min.css +++ b/sigal/themes/galleria/static/css/style.min.css @@ -1 +1 @@ -/*!normalize.css v3.0.1 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body{background-color:#242424;color:#aaa;text-shadow:0 1px 3px rgba(0,0,0,0.7)}.container{margin:0 auto;text-align:left;width:96%}a,a:link,a:visited{color:#999;text-decoration:underline}a:hover{color:#dadada}header{padding:1em 0;color:#eee}header h1,header h2{color:#eee;margin:10px 0}header h1 a,header h1 a:link,header h1 a:visited,header h2 a,header h2 a:link,header h2 a:visited{color:#eee;text-shadow:0 2px 0 #000;text-decoration:none}header h1 a:hover,header h2 a:hover{color:#fff;text-decoration:none}#menu ul{list-style-type:none;margin:0 0 10px;padding:0}#menu ul li{display:inline-block}#menu ul li a,#menu ul li a:link,#menu ul li a:visited{color:#aaa;border-bottom:1px solid #aaa;padding-bottom:2px;margin-left:5px;text-decoration:none}#menu ul li a:hover{color:#eee;border-color:#eee;text-decoration:none}#albums ul{list-style-type:none;padding-left:0}#albums ul li{display:inline-block;margin:0 55px 30px 0;text-align:center;vertical-align:top;width:280px}#albums ul li:nth-child(3n+3){margin-right:0}#albums ul li a img{opacity:1;-webkit-transition:opacity .2s ease-in;-moz-transition-property:opacity;-moz-transition-duration:.2s;-moz-box-shadow:0 1px 6px rgba(0,0,0,0.6);-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.6);-o-box-shadow:0 1px 6px rgba(0,0,0,0.6);box-shadow:0 1px 6px rgba(0,0,0,0.6)}#albums ul li a:hover img{opacity:.5}.album_title{display:block;color:#eee;font-size:1.3em;font-variant:small-caps;font-weight:bold}#gallery{line-height:0;width:100%;height:600px;clear:both}#gallery video{position:absolute;top:10%;width:100%;margin:0 auto}.icons{top:10px;right:20px;padding:5px;z-index:2;position:absolute;text-align:right}.icons a{cursor:pointer}.icons img{opacity:.7}.icons img:hover{opacity:.9}#galleria-map{position:absolute;bottom:80px;left:10px;top:0;right:10px}footer{clear:both;display:block;margin:1em 0;text-align:center}footer a:link,footer a:visited{font-weight:bold;text-decoration:none}footer a:hover{border-bottom:1px solid;text-decoration:none}@media only screen and (min-width:980px){.container{width:960px}#gallery{width:980px;margin:0 0 40px -10px}header h1,#menu{display:inline-block;width:49.5%}#menu{text-align:right}} \ No newline at end of file +/*!normalize.css v3.0.1 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{text-decoration:dotted underline;font-variant:none}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body{background-color:#242424;color:#aaa;text-shadow:0 1px 3px rgba(0,0,0,0.7)}.container{margin:0 auto;text-align:left;width:96%}a,a:link,a:visited{color:#999;text-decoration:underline}a:hover{color:#dadada}header{padding:1em 0;color:#eee}header h1,header h2{color:#eee;margin:10px 0}header h1 a,header h1 a:link,header h1 a:visited,header h2 a,header h2 a:link,header h2 a:visited{color:#eee;text-shadow:0 2px 0 #000;text-decoration:none}header h1 a:hover,header h2 a:hover{color:#fff;text-decoration:none}#menu ul{list-style-type:none;margin:0 0 10px;padding:0}#menu ul li{display:inline-block}#menu ul li a,#menu ul li a:link,#menu ul li a:visited{color:#aaa;border-bottom:1px solid #aaa;padding-bottom:2px;margin-left:5px;text-decoration:none}#menu ul li a:hover{color:#eee;border-color:#eee;text-decoration:none}#albums ul{list-style-type:none;padding-left:0}#albums ul li{display:inline-block;margin:0 55px 30px 0;text-align:center;vertical-align:top;width:280px}#albums ul li:nth-child(3n+3){margin-right:0}#albums ul li a img{opacity:1;-webkit-transition:opacity .2s ease-in;-moz-transition-property:opacity;-moz-transition-duration:.2s;-moz-box-shadow:0 1px 6px rgba(0,0,0,0.6);-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.6);-o-box-shadow:0 1px 6px rgba(0,0,0,0.6);box-shadow:0 1px 6px rgba(0,0,0,0.6)}#albums ul li a:hover img{opacity:.5}.album_title{display:block;color:#eee;font-size:1.3em;font-variant:small-caps;font-weight:bold}#gallery{line-height:0;width:100%;height:600px;clear:both}#gallery video{position:absolute;top:10%;width:100%;margin:0 auto}.icons{top:10px;right:20px;padding:5px;z-index:2;position:absolute;text-align:right}.icons a{cursor:pointer}.icons img{opacity:.7}.icons img:hover{opacity:.9}#galleria-map{position:absolute;bottom:80px;left:10px;top:0;right:10px}footer{clear:both;display:block;margin:1em 0;text-align:center}footer a:link,footer a:visited{font-weight:bold;text-decoration:none}footer a:hover{border-bottom:1px solid;text-decoration:none}@media only screen and (min-width:980px){.container{width:960px}#gallery{width:980px;margin:0 0 40px -10px}header h1,#menu{display:inline-block;width:49.5%}#menu{text-align:right}} \ No newline at end of file diff --git a/sigal/themes/galleria/templates/index.html b/sigal/themes/galleria/templates/index.html index 6013859..1d8659e 100644 --- a/sigal/themes/galleria/templates/index.html +++ b/sigal/themes/galleria/templates/index.html @@ -79,21 +79,21 @@ {%- if media.exif %}
- {% if media.exif.iso %}ISO {{ media.exif.iso }}, {% endif %} - {% if media.exif.exposure %}{{ media.exif.exposure }}s, {% endif %} - {% if media.exif.fstop %}f/{{ media.exif.fstop }}, {% endif %} - {% if media.exif.focal %}{{ media.exif.focal }}mm {% endif %} + {% if media.exif.iso %}ISO {{ media.exif.iso }} {% endif %} + {% if media.exif.exposure %}{{ media.exif.exposure }}s {% endif %} + {% if media.exif.fstop %}f/{{ media.exif.fstop }} {% endif %} + {% if media.exif.focal %}{{ media.exif.focal }}mm {% endif %} {% if media.exif.gps %} -
Location: {{ 'N{:.6f}'.format(media.exif.gps.lat) if media.exif.gps.lat > 0 else 'S{:.6f}'.format(-media.exif.gps.lat) }} {{ 'E{:.6f}'.format(media.exif.gps.lon) if media.exif.gps.lon > 0 else 'W{:.6f}'.format(-media.exif.gps.lon) }} {% endif %} {% if media.exif.Make or media.exif.Model %} -
{{ media.exif.Make }} {{ media.exif.Model }} +
{{ media.exif.Make }} {{ media.exif.Model }} {% endif %} {% if media.exif.datetime %} -
{{ media.exif.datetime }} +
{{ media.exif.datetime }} {% endif %} {% endif %} {%- endmacro %} From 24564d5f2a1bab896681ecd7688ff5c26c9d75b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antoine=20Beaupr=C3=A9?= Date: Sat, 6 Jan 2018 21:43:52 -0500 Subject: [PATCH 3/5] move CSS change to theme-specific file This way our changes will survive eventual normalize.css updates. --- sigal/themes/galleria/static/css/normalize.css | 3 +-- sigal/themes/galleria/static/css/style.css | 7 +++++++ sigal/themes/galleria/static/css/style.min.css | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/sigal/themes/galleria/static/css/normalize.css b/sigal/themes/galleria/static/css/normalize.css index c0f40ac..08f8950 100644 --- a/sigal/themes/galleria/static/css/normalize.css +++ b/sigal/themes/galleria/static/css/normalize.css @@ -105,8 +105,7 @@ a:hover { */ abbr[title] { - text-decoration: dotted underline; - font-variant: none; + border-bottom: 1px dotted; } /** diff --git a/sigal/themes/galleria/static/css/style.css b/sigal/themes/galleria/static/css/style.css index 6253534..7b7d2cd 100644 --- a/sigal/themes/galleria/static/css/style.css +++ b/sigal/themes/galleria/static/css/style.css @@ -19,6 +19,13 @@ a:hover { color: #dadada; } +/* remove SMALLCAPS style and dotted underline from some browsers */ +abbr[title] { + text-decoration: dotted underline; + font-variant: none; + border-bottom: none; +} + /* header */ header { padding: 1em 0; diff --git a/sigal/themes/galleria/static/css/style.min.css b/sigal/themes/galleria/static/css/style.min.css index ef68405..ab66e3c 100644 --- a/sigal/themes/galleria/static/css/style.min.css +++ b/sigal/themes/galleria/static/css/style.min.css @@ -1 +1 @@ -/*!normalize.css v3.0.1 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{text-decoration:dotted underline;font-variant:none}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body{background-color:#242424;color:#aaa;text-shadow:0 1px 3px rgba(0,0,0,0.7)}.container{margin:0 auto;text-align:left;width:96%}a,a:link,a:visited{color:#999;text-decoration:underline}a:hover{color:#dadada}header{padding:1em 0;color:#eee}header h1,header h2{color:#eee;margin:10px 0}header h1 a,header h1 a:link,header h1 a:visited,header h2 a,header h2 a:link,header h2 a:visited{color:#eee;text-shadow:0 2px 0 #000;text-decoration:none}header h1 a:hover,header h2 a:hover{color:#fff;text-decoration:none}#menu ul{list-style-type:none;margin:0 0 10px;padding:0}#menu ul li{display:inline-block}#menu ul li a,#menu ul li a:link,#menu ul li a:visited{color:#aaa;border-bottom:1px solid #aaa;padding-bottom:2px;margin-left:5px;text-decoration:none}#menu ul li a:hover{color:#eee;border-color:#eee;text-decoration:none}#albums ul{list-style-type:none;padding-left:0}#albums ul li{display:inline-block;margin:0 55px 30px 0;text-align:center;vertical-align:top;width:280px}#albums ul li:nth-child(3n+3){margin-right:0}#albums ul li a img{opacity:1;-webkit-transition:opacity .2s ease-in;-moz-transition-property:opacity;-moz-transition-duration:.2s;-moz-box-shadow:0 1px 6px rgba(0,0,0,0.6);-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.6);-o-box-shadow:0 1px 6px rgba(0,0,0,0.6);box-shadow:0 1px 6px rgba(0,0,0,0.6)}#albums ul li a:hover img{opacity:.5}.album_title{display:block;color:#eee;font-size:1.3em;font-variant:small-caps;font-weight:bold}#gallery{line-height:0;width:100%;height:600px;clear:both}#gallery video{position:absolute;top:10%;width:100%;margin:0 auto}.icons{top:10px;right:20px;padding:5px;z-index:2;position:absolute;text-align:right}.icons a{cursor:pointer}.icons img{opacity:.7}.icons img:hover{opacity:.9}#galleria-map{position:absolute;bottom:80px;left:10px;top:0;right:10px}footer{clear:both;display:block;margin:1em 0;text-align:center}footer a:link,footer a:visited{font-weight:bold;text-decoration:none}footer a:hover{border-bottom:1px solid;text-decoration:none}@media only screen and (min-width:980px){.container{width:960px}#gallery{width:980px;margin:0 0 40px -10px}header h1,#menu{display:inline-block;width:49.5%}#menu{text-align:right}} \ No newline at end of file +/*!normalize.css v3.0.1 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body{background-color:#242424;color:#aaa;text-shadow:0 1px 3px rgba(0,0,0,0.7)}.container{margin:0 auto;text-align:left;width:96%}a,a:link,a:visited{color:#999;text-decoration:underline}a:hover{color:#dadada}abbr[title]{text-decoration:dotted underline;font-variant:none;border-bottom:none}header{padding:1em 0;color:#eee}header h1,header h2{color:#eee;margin:10px 0}header h1 a,header h1 a:link,header h1 a:visited,header h2 a,header h2 a:link,header h2 a:visited{color:#eee;text-shadow:0 2px 0 #000;text-decoration:none}header h1 a:hover,header h2 a:hover{color:#fff;text-decoration:none}#menu ul{list-style-type:none;margin:0 0 10px;padding:0}#menu ul li{display:inline-block}#menu ul li a,#menu ul li a:link,#menu ul li a:visited{color:#aaa;border-bottom:1px solid #aaa;padding-bottom:2px;margin-left:5px;text-decoration:none}#menu ul li a:hover{color:#eee;border-color:#eee;text-decoration:none}#albums ul{list-style-type:none;padding-left:0}#albums ul li{display:inline-block;margin:0 55px 30px 0;text-align:center;vertical-align:top;width:280px}#albums ul li:nth-child(3n+3){margin-right:0}#albums ul li a img{opacity:1;-webkit-transition:opacity .2s ease-in;-moz-transition-property:opacity;-moz-transition-duration:.2s;-moz-box-shadow:0 1px 6px rgba(0,0,0,0.6);-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.6);-o-box-shadow:0 1px 6px rgba(0,0,0,0.6);box-shadow:0 1px 6px rgba(0,0,0,0.6)}#albums ul li a:hover img{opacity:.5}.album_title{display:block;color:#eee;font-size:1.3em;font-variant:small-caps;font-weight:bold}#gallery{line-height:0;width:100%;height:600px;clear:both}#gallery video{position:absolute;top:10%;width:100%;margin:0 auto}.icons{top:10px;right:20px;padding:5px;z-index:2;position:absolute;text-align:right}.icons a{cursor:pointer}.icons img{opacity:.7}.icons img:hover{opacity:.9}#galleria-map{position:absolute;bottom:80px;left:10px;top:0;right:10px}footer{clear:both;display:block;margin:1em 0;text-align:center}footer a:link,footer a:visited{font-weight:bold;text-decoration:none}footer a:hover{border-bottom:1px solid;text-decoration:none}@media only screen and (min-width:980px){.container{width:960px}#gallery{width:980px;margin:0 0 40px -10px}header h1,#menu{display:inline-block;width:49.5%}#menu{text-align:right}} \ No newline at end of file From 8ea033652095b45cec010d5b9ae1dd75bf36d9b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antoine=20Beaupr=C3=A9?= Date: Sat, 6 Jan 2018 21:44:44 -0500 Subject: [PATCH 4/5] remove dotted line completely, too noisy --- sigal/themes/galleria/static/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sigal/themes/galleria/static/css/style.css b/sigal/themes/galleria/static/css/style.css index 7b7d2cd..d4cf9e7 100644 --- a/sigal/themes/galleria/static/css/style.css +++ b/sigal/themes/galleria/static/css/style.css @@ -21,7 +21,7 @@ a:hover { /* remove SMALLCAPS style and dotted underline from some browsers */ abbr[title] { - text-decoration: dotted underline; + text-decoration: none; font-variant: none; border-bottom: none; } From 2d5cd23da3b894fb3ca3af9ff7d5ba428496a788 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antoine=20Beaupr=C3=A9?= Date: Sat, 6 Jan 2018 22:03:58 -0500 Subject: [PATCH 5/5] move layout and metadata suffixes to CSS This way this can be override by client-side CSS or more easily controled through the theme --- sigal/themes/galleria/static/css/style.css | 8 ++++++++ sigal/themes/galleria/static/css/style.min.css | 2 +- sigal/themes/galleria/templates/index.html | 17 +++++++++-------- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/sigal/themes/galleria/static/css/style.css b/sigal/themes/galleria/static/css/style.css index d4cf9e7..c1df77b 100644 --- a/sigal/themes/galleria/static/css/style.css +++ b/sigal/themes/galleria/static/css/style.css @@ -26,6 +26,14 @@ abbr[title] { border-bottom: none; } +abbr[title="exposure"]::after { content: "s" } +abbr[title="film speed"]::before { content: "ISO " } +abbr[title="aperture"]::before { content: "f/" } +abbr[title="focal length"]::after { content: "mm" } +abbr[title="camera make and model"], abbr[title="date"] { + display: block; +} + /* header */ header { padding: 1em 0; diff --git a/sigal/themes/galleria/static/css/style.min.css b/sigal/themes/galleria/static/css/style.min.css index ab66e3c..b88482c 100644 --- a/sigal/themes/galleria/static/css/style.min.css +++ b/sigal/themes/galleria/static/css/style.min.css @@ -1 +1 @@ -/*!normalize.css v3.0.1 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body{background-color:#242424;color:#aaa;text-shadow:0 1px 3px rgba(0,0,0,0.7)}.container{margin:0 auto;text-align:left;width:96%}a,a:link,a:visited{color:#999;text-decoration:underline}a:hover{color:#dadada}abbr[title]{text-decoration:dotted underline;font-variant:none;border-bottom:none}header{padding:1em 0;color:#eee}header h1,header h2{color:#eee;margin:10px 0}header h1 a,header h1 a:link,header h1 a:visited,header h2 a,header h2 a:link,header h2 a:visited{color:#eee;text-shadow:0 2px 0 #000;text-decoration:none}header h1 a:hover,header h2 a:hover{color:#fff;text-decoration:none}#menu ul{list-style-type:none;margin:0 0 10px;padding:0}#menu ul li{display:inline-block}#menu ul li a,#menu ul li a:link,#menu ul li a:visited{color:#aaa;border-bottom:1px solid #aaa;padding-bottom:2px;margin-left:5px;text-decoration:none}#menu ul li a:hover{color:#eee;border-color:#eee;text-decoration:none}#albums ul{list-style-type:none;padding-left:0}#albums ul li{display:inline-block;margin:0 55px 30px 0;text-align:center;vertical-align:top;width:280px}#albums ul li:nth-child(3n+3){margin-right:0}#albums ul li a img{opacity:1;-webkit-transition:opacity .2s ease-in;-moz-transition-property:opacity;-moz-transition-duration:.2s;-moz-box-shadow:0 1px 6px rgba(0,0,0,0.6);-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.6);-o-box-shadow:0 1px 6px rgba(0,0,0,0.6);box-shadow:0 1px 6px rgba(0,0,0,0.6)}#albums ul li a:hover img{opacity:.5}.album_title{display:block;color:#eee;font-size:1.3em;font-variant:small-caps;font-weight:bold}#gallery{line-height:0;width:100%;height:600px;clear:both}#gallery video{position:absolute;top:10%;width:100%;margin:0 auto}.icons{top:10px;right:20px;padding:5px;z-index:2;position:absolute;text-align:right}.icons a{cursor:pointer}.icons img{opacity:.7}.icons img:hover{opacity:.9}#galleria-map{position:absolute;bottom:80px;left:10px;top:0;right:10px}footer{clear:both;display:block;margin:1em 0;text-align:center}footer a:link,footer a:visited{font-weight:bold;text-decoration:none}footer a:hover{border-bottom:1px solid;text-decoration:none}@media only screen and (min-width:980px){.container{width:960px}#gallery{width:980px;margin:0 0 40px -10px}header h1,#menu{display:inline-block;width:49.5%}#menu{text-align:right}} \ No newline at end of file +/*!normalize.css v3.0.1 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body{background-color:#242424;color:#aaa;text-shadow:0 1px 3px rgba(0,0,0,0.7)}.container{margin:0 auto;text-align:left;width:96%}a,a:link,a:visited{color:#999;text-decoration:underline}a:hover{color:#dadada}abbr[title]{text-decoration:none;font-variant:none;border-bottom:none}abbr[title="exposure"]::after{content:"s"}abbr[title="film speed"]::before{content:"ISO "}abbr[title="aperture"]::before{content:"f/"}abbr[title="focal length"]::after{content:"mm"}abbr[title="camera make and model"],abbr[title="date"]{display:block}header{padding:1em 0;color:#eee}header h1,header h2{color:#eee;margin:10px 0}header h1 a,header h1 a:link,header h1 a:visited,header h2 a,header h2 a:link,header h2 a:visited{color:#eee;text-shadow:0 2px 0 #000;text-decoration:none}header h1 a:hover,header h2 a:hover{color:#fff;text-decoration:none}#menu ul{list-style-type:none;margin:0 0 10px;padding:0}#menu ul li{display:inline-block}#menu ul li a,#menu ul li a:link,#menu ul li a:visited{color:#aaa;border-bottom:1px solid #aaa;padding-bottom:2px;margin-left:5px;text-decoration:none}#menu ul li a:hover{color:#eee;border-color:#eee;text-decoration:none}#albums ul{list-style-type:none;padding-left:0}#albums ul li{display:inline-block;margin:0 55px 30px 0;text-align:center;vertical-align:top;width:280px}#albums ul li:nth-child(3n+3){margin-right:0}#albums ul li a img{opacity:1;-webkit-transition:opacity .2s ease-in;-moz-transition-property:opacity;-moz-transition-duration:.2s;-moz-box-shadow:0 1px 6px rgba(0,0,0,0.6);-webkit-box-shadow:0 1px 6px rgba(0,0,0,0.6);-o-box-shadow:0 1px 6px rgba(0,0,0,0.6);box-shadow:0 1px 6px rgba(0,0,0,0.6)}#albums ul li a:hover img{opacity:.5}.album_title{display:block;color:#eee;font-size:1.3em;font-variant:small-caps;font-weight:bold}#gallery{line-height:0;width:100%;height:600px;clear:both}#gallery video{position:absolute;top:10%;width:100%;margin:0 auto}.icons{top:10px;right:20px;padding:5px;z-index:2;position:absolute;text-align:right}.icons a{cursor:pointer}.icons img{opacity:.7}.icons img:hover{opacity:.9}#galleria-map{position:absolute;bottom:80px;left:10px;top:0;right:10px}footer{clear:both;display:block;margin:1em 0;text-align:center}footer a:link,footer a:visited{font-weight:bold;text-decoration:none}footer a:hover{border-bottom:1px solid;text-decoration:none}@media only screen and (min-width:980px){.container{width:960px}#gallery{width:980px;margin:0 0 40px -10px}header h1,#menu{display:inline-block;width:49.5%}#menu{text-align:right}} \ No newline at end of file diff --git a/sigal/themes/galleria/templates/index.html b/sigal/themes/galleria/templates/index.html index 1d8659e..15dc6a3 100644 --- a/sigal/themes/galleria/templates/index.html +++ b/sigal/themes/galleria/templates/index.html @@ -78,22 +78,23 @@ {% if media.description %}
{{ media.description }}{% endif %} {%- if media.exif %} -
- {% if media.exif.iso %}ISO {{ media.exif.iso }} {% endif %} - {% if media.exif.exposure %}{{ media.exif.exposure }}s {% endif %} - {% if media.exif.fstop %}f/{{ media.exif.fstop }} {% endif %} - {% if media.exif.focal %}{{ media.exif.focal }}mm {% endif %} +
+ {% if media.exif.iso %}{{ media.exif.iso }} {% endif %} + {% if media.exif.exposure %}{{ media.exif.exposure }} {% endif %} + {% if media.exif.fstop %}{{ media.exif.fstop }} {% endif %} + {% if media.exif.focal %}{{ media.exif.focal }} {% endif %} +
{% if media.exif.gps %} -
{{ 'N{:.6f}'.format(media.exif.gps.lat) if media.exif.gps.lat > 0 else 'S{:.6f}'.format(-media.exif.gps.lat) }} {{ 'E{:.6f}'.format(media.exif.gps.lon) if media.exif.gps.lon > 0 else 'W{:.6f}'.format(-media.exif.gps.lon) }} {% endif %} {% if media.exif.Make or media.exif.Model %} -
{{ media.exif.Make }} {{ media.exif.Model }} + {{ media.exif.Make }} {{ media.exif.Model }} {% endif %} {% if media.exif.datetime %} -
{{ media.exif.datetime }} + {{ media.exif.datetime }} {% endif %} {% endif %} {%- endmacro %}