diff options
| author | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2021-01-14 18:28:31 +0100 |
|---|---|---|
| committer | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2021-01-14 18:28:31 +0100 |
| commit | 7dd03903b8716db807f5e7119d6efcbb117b341b (patch) | |
| tree | 1c6d0ed57991d9b6a3268ffe0217b604c7ec777c | |
| download | gal-7dd03903b8716db807f5e7119d6efcbb117b341b.tar.gz gal-7dd03903b8716db807f5e7119d6efcbb117b341b.zip | |
Init
| -rwxr-xr-x | gal | 60 | ||||
| -rw-r--r-- | style.css | 47 |
2 files changed, 107 insertions, 0 deletions
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 <<EOF +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <title>Gallery</title> + <link rel="stylesheet" href="style.css" type="text/css" > + </head> + <body> + <div class="tiles"> +EOF + + +for f in $PHOTOS/*.{jpg,JPG,jpeg,JPEG,png,PNG}; do + filename=$(basename $f) + [ -f $f ] && cat >> $OUTPUT/index.html <<EOF + <div class="tile"> + <a href="photos/$filename"> + <img src="thumbs/$filename" /> + </a> + </div> +EOF +done + +cat >> $OUTPUT/index.html <<EOF + </div> + </body> +</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; + } +} |