logo

scripts

Unnamed repository; edit this file 'description' to name the repository.
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:

README.md | 10++++++++++
photo_gallery/script.sh | 56++++++++++++++++++++++++++++++++++++++++++++++++++++++++
photo_gallery/style.css | 33+++++++++++++++++++++++++++++++++
3 files changed, 99 insertions(+), 0 deletions(-)

diff --git a/README.md b/README.md @@ -1,3 +1,13 @@ #Screenshots for the GUI scripts ![screenshot](screenshots/image.png "image.py") ![screenshot](screenshots/colorpicker.png "colorpicker.py") + +## 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