commit: 4b89c8f3f66b3cd51b88ec0f3e7f3412de077844
parent: 426c9141e2ca417e02fb90d890b47740b31a0262
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date: Wed, 25 Oct 2017 23:11:43 +0200
README.md,photo_gallery: Initial commit
Diffstat:
3 files changed, 99 insertions(+), 0 deletions(-)
diff --git a/README.md b/README.md
@@ -1,3 +1,13 @@
#Screenshots for the GUI scripts
+
+## Photo Gallery
+Static (HTML5/CSS3) generator of Photo gallery with detailed information on dedicated pages.
+* ``script.sh``: generator (POSIX Shell, gives HTML5)
+* ``style.css``: provided/example of CSS styling
+* Use case/example: [2014-04-26 → 2014-05-12 Japan — AFKs of lanodan](https://hacktivis.me/photos/2014-04-26%20%E2%86%92%202014-05-12%20Japan/)
+
+### Dependencies
+* POSIX Shell
+* GraphicsMagick (note: ImageMagick is probably useable by replacing ``gm convert`` with ``convert`` and ``gm identify`` with ``identify``)
diff --git a/photo_gallery/script.sh b/photo_gallery/script.sh
@@ -0,0 +1,56 @@
+#!/bin/sh
+# Copyright 2017 CC-BY-SA-4.0 Haelwenn (lanodan) Monnier <contact@hacktivis.me>
+# Script that generates a photo gallery with details on dedicated pages
+
+## Generate the index
+
+test -e index.html || (
+ title=$(basename "${PWD}")
+ echo "<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset=\"utf-8\"/>
+ <title>${title} — AFKs of lanodan</title>
+ <link rel=\"stylesheet\" href=\"../style.css\" />
+ </head>
+ <body>
+ <h1>${title}</h1>
+ <main>"
+for img in *.JPG; do
+ test -e "./thumbs/$img" || gm convert "$img" -resize 8% -auto-orient -quality 69% "./thumbs/$img"
+ echo "<a class=\"photo\" href=\"${img//.JPG/.html}\"><img src=\"thumbs/$img\"/></a>";
+done
+echo " </main>
+ <footer rel=\"copyright\">© 2014-2017 <a rel=\"license\" href=\"http://creativecommons.org/licenses/by-sa/4.0/\">CC-BY-SA-4.0</a> Haelwenn (lanodan) Monnier</footer>
+ </body>
+</html>" ) | tee index.html
+
+## Generate pages for images (with EXIF data)
+
+for img in *.JPG; do
+ test -e "${img//.JPG/.html}" || (
+ echo "<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset=\"utf-8\"/>
+ <title>$(basename "${PWD}")/${img//.JPG} — AFKs of lanodan</title>
+ <link rel=\"stylesheet\" href=\"../style.css\" />
+ </head>
+ <body>
+ <h1><a href=\"./\">$(basename "${PWD}")</a>/${img//.JPG}</h1>
+ <main>"
+test -e "./preview/$img" || gm convert "$img" -resize 50% -auto-orient -quality 80% "./preview/$img"
+echo "<a class=\"photo\" href=\"$img\"><img src=\"preview/$img\"/></a>"
+gm identify "$img" -format '<ul>
+ <li>Camera: %[EXIF:Make]%[EXIF:Model]'
+printf ' <li>DateTime: '; date "+%F %T%z" --date="$(gm identify "$img" -format '%[EXIF:DateTime]'|sed -r 's/:(..):/-\1-/')Z"
+gm identify "$img" -format ' <li>ExposureTime: %[EXIF:ExposureTime]
+ <li>ISOSpeedRatings: %[EXIF:ISOSpeedRatings]
+ <li>FNumber: %[EXIF:FNumber]
+ <li>MaxApertureValue: %[EXIF:MaxApertureValue]
+ <li rel=\"copyright\">© 2014-2017 <a rel=\"license\" href=\"http://creativecommons.org/licenses/by-sa/4.0/\">CC-BY-SA-4.0</a> Haelwenn (lanodan) Monnier</li>
+</ul>'
+echo " </main>
+ </body>
+</html>") | tee "${img//.JPG/.html}"
+done
diff --git a/photo_gallery/style.css b/photo_gallery/style.css
@@ -0,0 +1,32 @@
+/* Copyright 2017 CC-BY-SA-4.0 Haelwenn (lanodan) Monnier <contact@hacktivis.me> */
+
+html, body {
+ background: #212121;
+ color: #8c8c8c;
+ text-align: center;
+}
+h1, h2, h3, h4, h5, h6 {
+ font-family: serif;
+}
+a {
+ color: #3498DB;
+ text-decoration: none;
+}
+main a.photo {
+ display: inline-block;
+ vertical-align: middle;
+ min-width: 317px;
+ background: #333333;
+ border: 1ch solid #333333;
+ border-radius: .5ch;
+ margin: 1ch;
+ padding: 0;
+}
+main a.photo img {
+ max-width: 90vw;
+ max-height: 90vh;
+}
+main ul {
+ text-align: initial;
+ display: inline-table;
+}+
\ No newline at end of file
