diff options
| -rw-r--r-- | README.md | 16 | ||||
| -rwxr-xr-x | gal | 96 | ||||
| -rwxr-xr-x | galier | 162 | ||||
| -rw-r--r-- | style.css | 7 |
4 files changed, 172 insertions, 109 deletions
diff --git a/README.md b/README.md index 7d39b2c..2c7b068 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,7 @@ -# gal +# galier -Yet another photo gallery generator. +Better [gal](https://github.com/19pdh/gal) - media gallery generator. -[Demo page](http://pics.niedzwiedzinski.cyou/mando/) - -## Why? - -I could not find any other working solution that would be as simple as this. This script just resizes all images and generates grid menu for them. That is all. +It supports images and videos ## Usage - -``` -nix shell github:19pdh/gal - -gal [PHOTOS DIR] [OUTPUT DIR] -``` diff --git a/gal b/gal deleted file mode 100755 index 6dbcfd4..0000000 --- a/gal +++ /dev/null @@ -1,96 +0,0 @@ -#!/bin/sh -## Script for generating photo gallery website -## -## Usage: -## $ ./gal [PHOTOS DIR] [OUTPUT DIR] -## -## Setting custom title: -## $ TITLE=Title ./gal [AS ABOVE] - -## === Customize === - -QUALITY=70 -THUMBNAIL_RESOLUTION=250 -RESOLUTION=1500 - -## ================= - -[ -z $1 ] && echo "You need to pass photos dir" && exit 1 -[ -z $2 ] && echo "You need to pass output dir" && exit 1 - -PHOTOS=$1 -OUTPUT=$2 -TITLE=${TITLE:-$(basename $OUTPUT)} -mkdir -p $2/{photos,thumbs} - -## Generate index.html menu file -cp style.css $OUTPUT -chmod 644 $OUTPUT/style.css -echo "Generating index.html" - -cat > $OUTPUT/index.html <<EOF -<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width"> - <title>$TITLE</title> - <link rel="stylesheet" href="style.css" type="text/css" > - </head> - <body> - <h1>$TITLE</h1> - <h3>Last update: $(date '+%d.%m.%Y')</h3> - <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"> - <picture> - <source srcset="thumbs/${filename%.*}.webp" type="image/webp"> - <source srcset="thumbs/$filename" type="image/${filename##*.}"> - <img src="thumbs/$filename" alt="$filename" /> - </picture> - </a> - </div> -EOF -done - -cat >> $OUTPUT/index.html <<EOF - </div> - <footer> - <p>Pobierz: <a href="archive_$TITLE.zip">📁 Archiwum</a></p> - <p>This page is <a href="https://jeffhuang.com/designed_to_last/">designed to last</a>.</p> - </footer> - </body> -</html> -EOF - -## Generate photo_list -echo "Generating photo_list" - -[ -f $OUTPUT/photo_list ] && echo "Replacing existing photo_list" && rm $OUTPUT/photo_list - -for f in $PHOTOS/*.{jpg,JPG,jpeg,JPEG,png,PNG}; do - filename=$(basename $f) - [ -f $f ] && cat >> $OUTPUT/photo_list <<EOF -$filename -EOF -done - -## Optimize images - -for f in $PHOTOS/*.{jpg,JPG,jpeg,JPEG,png,PNG}; do - filename=$(basename $f) - echo "Optimizing $filename" - [ -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" && \ - cwebp -q $QUALITY -resize 400 0 $f -o "$OUTPUT/thumbs/${filename%.*}.webp" -done - -## Create zip archive - -zip $OUTPUT/"archive_$TITLE.zip" -r $OUTPUT/photos diff --git a/galier b/galier new file mode 100755 index 0000000..1c40b02 --- /dev/null +++ b/galier @@ -0,0 +1,162 @@ +#!/bin/sh +## Script for generating photo gallery website +## +## Usage: +## $ ./galier [MEDIA DIR] [OUTPUT DIR] +## +## Setting custom title: +## $ TITLE=Title ./galier [AS ABOVE] + +## === Customize === + +QUALITY=70 +THUMBNAIL_RESOLUTION=250 +RESOLUTION=1500 + +## ================= + +[ -z $1 ] && echo "You need to pass media dir" && exit 1 +[ -z $2 ] && echo "You need to pass output dir" && exit 1 + +MEDIA=$1 +OUTPUT=$2 +TITLE=${TITLE:-$(basename $OUTPUT)} +mkdir -p $2/{photos,vids,thumbs} + +## Generate index.html menu file +src=`dirname $(readlink -f $0)` +cp $src/style.css $OUTPUT +chmod 644 $OUTPUT/style.css +echo "Generating index.html" + +cat > $OUTPUT/index.html <<EOF +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <title>$TITLE</title> + <link rel="stylesheet" href="style.css" type="text/css" > + </head> + <body> + <h1>$TITLE</h1> + <h3>Last update: $(date '+%d.%m.%Y')</h3> + <div class="tiles"> +EOF + +### Images + +[ -f $OUTPUT/photo_list ] && echo "Replacing existing photo_list" && rm $OUTPUT/photo_list + +for f in $MEDIA/*.{jpg,JPG,jpeg,JPEG,png,PNG}; do + filename=$(basename $f) + [ -f $f ] || continue + + cat >> $OUTPUT/index.html <<EOF + <div class="tile"> + <a href="photos/$filename"> + <picture> + <source srcset="thumbs/${filename%.*}.webp" type="image/webp"> + <source srcset="thumbs/$filename" type="image/${filename##*.}"> + <img src="thumbs/$filename" alt="$filename" /> + </picture> + </a> + </div> +EOF + + echo "Optimizing $filename" + 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" + cwebp -q $QUALITY -resize 400 0 $f -o "$OUTPUT/thumbs/${filename%.*}.webp" + + echo $filename >> $OUTPUT/photo_list + +done + +### Movies + +cat >> $OUTPUT/index.html <<EOF + </div> + <h2>Filmy</h2> + <div class="tiles"> +EOF + +[ -f $OUTPUT/vids_list ] && echo "Replacing existing vids_list" && rm $OUTPUT/vids_list + +for f in $MEDIA/*.{webm,mp4,MP4,avi,AVI}; do + filename=$(basename $f) + [ -f $f ] || continue + + mkdir $OUTPUT/vids/${filename%.*} + + cat >> $OUTPUT/index.html <<EOF + <div class="tile"> + <a href="vids/${filename%.*}/index.html"> + <picture> + <source srcset="thumbs/${filename%.*}.vid.webp" type="image/webp"> + <source srcset="thumbs/${filename%.*}.vid.jpg" type="image/jpg"> + <img src="thumbs/${filename%.*}.vid.jpg" alt="$filename" /> + </picture> + </a> + </div> +EOF + tmp=`mktemp galier.XXX.jpg` + duration=`ffprobe -i $f -show_entries format=duration -v quiet -of csv="p=0" | cut -d'.' -f1` + echo $duration + [ -z $duration ] && echo "Empty \$duration for file $f" && exit 1 + ffmpeg -y -ss $(($duration/2)) -i $f -vframes 1 $tmp + + convert -auto-orient -strip -quality $QUALITY -resize x$THUMBNAIL_RESOLUTION "$tmp" "$OUTPUT/thumbs/${filename%.*}.vid.jpg" + cwebp -q $QUALITY -resize 400 0 $tmp -o "$OUTPUT/thumbs/${filename%.*}.vid.webp" + rm $tmp + + [ -f $OUTPUT/vids/${filename%.*}/source.mp4 ] && \ + echo "MP4 file for $filename exists" || \ + ffmpeg -i $f -vcodec libx264 -crf 23 "$OUTPUT/vids/${filename%.*}/source.mp4" + [ -f $OUTPUT/vids/${filename%.*}/source.webm ] && \ + echo "WEBM file for $filename exists" || \ + ffmpeg -i $f -c:v libvpx -crf 23 -b:v 1M -c:a libvorbis "$OUTPUT/vids/${filename%.*}/source.webm" + + cat > $OUTPUT/vids/${filename%.*}/index.html <<EOF +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <title>${filename%.*}</title> + <link rel="stylesheet" href="../../style.css" type="text/css" > + </head> + <body> + <video controls> + <source src="source.webm" type="video/webm"> + <source src="source.mp4" type="video/mp4"> + </video> + <h1>${filename%.*}</h1> + <h3>Last update: $(date '+%d.%m.%Y')</h3> + <footer> + <p>Pobierz: <a href="source.mp4">MP4</a></p> + <p>Pobierz: <a href="source.webm">WEBM</a></p> + <p>This page is <a href="https://jeffhuang.com/designed_to_last/">designed to last</a>.</p> + </footer> + </body> +</html> +EOF + + echo ${filename%.*} >> $OUTPUT/vids_list + +done + +cat >> $OUTPUT/index.html <<EOF + </div> + <footer> + <p>Pobierz: <a href="archive_$TITLE.zip">📁 Archiwum</a></p> + <p>This page is <a href="https://jeffhuang.com/designed_to_last/">designed to last</a>.</p> + </footer> + </body> +</html> +EOF + + +## Create zip archive + +zip $OUTPUT/"archive_$TITLE.zip" -r $OUTPUT diff --git a/style.css b/style.css index 43ae13d..76adc92 100644 --- a/style.css +++ b/style.css @@ -6,6 +6,13 @@ body { height: 100vh; font-family: sans-serif; } +body * { + margin: 0 auto; +} +video { + display: block; + max-width: 58vw; +} h1, h3 { width: 58vw; margin: auto; |