From 7dd03903b8716db807f5e7119d6efcbb117b341b Mon Sep 17 00:00:00 2001 From: Patryk Niedźwiedziński Date: Thu, 14 Jan 2021 18:28:31 +0100 Subject: Init --- gal | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100755 gal create mode 100644 style.css diff --git a/gal b/gal new file mode 100755 index 0000000..8667376 --- /dev/null +++ b/gal @@ -0,0 +1,60 @@ +#!/bin/sh +## Script for generating photo gallery website +## +## Usage: +## $ ./gal [PHOTOS DIR] [OUTPUT DIR] + +## === Customize === + +QUALITY=70 +THUMBNAIL_RESOLUTION=250 +RESOLUTION=1500 + +## ================= + + +PHOTOS=$1 +OUTPUT=$2 +mkdir -p $2/{photos,thumbs} + +## Generate index.html menu file +cp style.css $OUTPUT + +cat > $OUTPUT/index.html < + + + + + Gallery + + + +
+EOF + + +for f in $PHOTOS/*.{jpg,JPG,jpeg,JPEG,png,PNG}; do + filename=$(basename $f) + [ -f $f ] && cat >> $OUTPUT/index.html < + + + +
+EOF +done + +cat >> $OUTPUT/index.html < + + +EOF + +## Optimize images + +for f in $PHOTOS/*.{jpg,JPG,jpeg,JPEG,png,PNG}; do + filename=$(basename $f) + [ -f $f ] && convert -auto-orient -strip -quality $QUALITY -resize x$RESOLUTION "$f" "$OUTPUT/photos/$filename" && \ + convert -auto-orient -strip -quality $QUALITY -resize x$THUMBNAIL_RESOLUTION "$f" "$OUTPUT/thumbs/$filename" +done diff --git a/style.css b/style.css new file mode 100644 index 0000000..5f01a57 --- /dev/null +++ b/style.css @@ -0,0 +1,47 @@ + +body { + margin: 0; + padding: 0; + width: 100%; + height: 100vh; +} +.tiles { + padding: 6vh 16vw; + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: center; + position: relative; +} +.tile { + margin: 15px; + cursor: pointer; + overflow: hidden; + min-width: 120px; + min-height: 120px; + width: 18vw; + height: 18vw; +} + +.tile img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 500ms ease; +} + +.tile img:hover { + transform: scale(1.1); +} + +@media only screen and (max-width: 420px) { + .tiles { + padding: 6vh 4vw; + } + + .tile { + margin: 5px; + width: 44vw; + height: 44vw; + } +} -- cgit 1.4.1