Add static version
This commit is contained in:
sh+git@codevoid.de
parent
54d17c3cf5
commit
ce20a1b752
2
Makefile
2
Makefile
@ -1,4 +1,6 @@
|
|||||||
all:
|
all:
|
||||||
./mkpicindex.sh > index.html.tmp && mv index.html.tmp index.html
|
./mkpicindex.sh > index.html.tmp && mv index.html.tmp index.html
|
||||||
|
static:
|
||||||
|
./mkpicindex-static.sh 0 > index.html.tmp && mv index.html.tmp index.html
|
||||||
clean:
|
clean:
|
||||||
rm -rf index.html.tmp index.html style.css justify.js LICENSE
|
rm -rf index.html.tmp index.html style.css justify.js LICENSE
|
||||||
|
|||||||
@ -10,152 +10,200 @@ printf '%s' \
|
|||||||
' > LICENSE
|
' > LICENSE
|
||||||
|
|
||||||
# CONFIGURE
|
# CONFIGURE
|
||||||
GALLERY_TITLE="My Gallery" # browser title
|
TITLE="My Gallery" # browser title
|
||||||
GALLERY_WIDTH=1000 # how wide will the gallery be
|
WIDTH=1000 # how wide will the gallery be
|
||||||
GALLERY_ROW_HEIGHT=150 # how high will the justified rows be?
|
ROW_HEIGHT=150 # how high will the justified rows be?
|
||||||
GALLERY_RANDOMIZE=false # enable random sorting (true,false)
|
THUMB_QUALITY=83 # quality for thumbnails
|
||||||
BODY_STYLE="color:orange; background:black;" # <body style="?">
|
THUMB_PATH="thm" # relative path to thumbnail folder
|
||||||
THUMBNAIL_QUALITY=83 # quality for thumbnails
|
THUMB_PADDING="6" # image padding
|
||||||
THUMBNAIL_PATH="thm" # relative path to thumbnail folder
|
DEBUG=$1 # debug output
|
||||||
INCLUDE_HEADER="HEADER" # file with html to include before gallery
|
|
||||||
INCLUDE_FOOTER="FOOTER" # file with html to include after gallery
|
# GLOBAL TMP VARIABLES
|
||||||
|
G_ROW_WIDTH=0 # combined pic width < WIDTH @ ROW_HEIGHT
|
||||||
|
G_ROW_FILES="" # pipe separated files < WIDTH
|
||||||
|
MORE=1 # trigger next loop
|
||||||
|
|
||||||
### ZE PROGAM STARTZ HERE ##############################################
|
### ZE PROGAM STARTZ HERE ##############################################
|
||||||
cleanup() {
|
cleanup() {
|
||||||
# DELETE BROKEN IMAGES
|
# DELETE BROKEN IMAGES
|
||||||
printf '%s\n' "Removing incomplete thumbnails." >&2
|
printf '%s\n' "Removing incomplete thumbnails." >&2
|
||||||
find $THUMBNAIL_PATH -name "*_tmp.*" -exec rm -v "{}" \;
|
find $THUMB_PATH -name "*_tmp.*" -exec rm -v "{}" \;
|
||||||
exit 1
|
exit 1
|
||||||
}
|
}
|
||||||
trap cleanup 1 2 3 6
|
trap cleanup 1 2 3 6
|
||||||
|
|
||||||
# CREATE THUMBNAIL DIRECTORY
|
# CREATE THUMBNAIL DIRECTORY
|
||||||
mkdir -p $THUMBNAIL_PATH
|
mkdir -p "$THUMB_PATH"
|
||||||
|
|
||||||
# INCLUDE CUSTOM HEADER & FOOTER
|
# OUTPUT HELPER
|
||||||
FOOTER=$([ -f $INCLUDE_FOOTER ] && cat $INCLUDE_FOOTER | sed 's/^/ /g')
|
debug() { [ "$DEBUG" == "1" ] && printf '%s\n' "Debug: $1" >&2; }
|
||||||
HEADER=$([ -f $INCLUDE_HEADER ] && cat $INCLUDE_HEADER | sed 's/^/ /g')
|
console() { printf '%s\n' "$1" >&2; }
|
||||||
|
|
||||||
# PRINT HEADER
|
# CALCULATORS
|
||||||
printf '%s%s%s%s%s\n' \
|
get_width_by_height() {
|
||||||
"<html>
|
# returns aspect ratio calculated width
|
||||||
<head>
|
local F=$1 # image file
|
||||||
<title>$GALLERY_TITLE</title>
|
local TH=$2 # target height
|
||||||
<meta name=\"viewport\" content=\"width=device-width\">
|
local WH="$(identify -format ' %w %h ' "$1" | awk '{ printf("%.3f %.3f",$1,$2) }')"
|
||||||
</head>
|
R="$(printf "$WH" | awk -vTH=$TH '{ printf("%.0f", TH*($1/$2)) }')"
|
||||||
<body style=\"$BODY_STYLE\">
|
printf '%.0f' "$(($R))"
|
||||||
$HEADER"
|
debug "get_width_by_height: FILE=$F TARGET_HEIGHT=$TH FILE_WxH=$WH RET_WIDTH=$R"
|
||||||
|
}
|
||||||
|
get_height_by_width() {
|
||||||
# take one image
|
# returns aspect ratio calculated height
|
||||||
# resize to $ROW_HEIGHT
|
local F=$1 # image file
|
||||||
# check if width exceeds $GALLERY_WIDTH
|
local TW=$2 # target width
|
||||||
# if not: take next picture
|
local WH="$(identify -format ' %w %h ' "$1" | awk '{ printf("%.3f %.3f",$1,$2) }')"
|
||||||
# resize to $ROW_HEIGHT
|
R="$(printf "$WH" | awk -vTW=$TW '{ printf("%.0f", TW*($2/$1)) }')"
|
||||||
# check if first picture width + second picture width exceeds $GALLERY_WIDTH
|
printf '%.0f' "$R"
|
||||||
# if yes:
|
debug "get_height_by_width: FILE=$F TARGET_WIDTH=$TW FILE_WxH=$WH RET_HEIGHT=$R"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# $1 - Width
|
|
||||||
# $2 - Height
|
|
||||||
# < - Ratio (f)
|
|
||||||
get_aspect_ratio() {
|
|
||||||
W=$1 # Width
|
|
||||||
H=$2 # Height
|
|
||||||
printf '%f' "$(printf "$FILE_WH" | awk -vTH=$TARGET_H '{ printf("%f", TH*($2/$1)) }')"
|
|
||||||
}
|
}
|
||||||
|
|
||||||
# CALCULATE ASPECT RATIO WITH FOR TARGET ROW HEIGHT
|
# CREATE THUMBNAIL
|
||||||
# $1 - path to image
|
create_thumb() {
|
||||||
# $2 - target row height
|
# $F - original
|
||||||
# ret - calculated width for target height
|
# $W - width
|
||||||
get_width() {
|
# $H - height
|
||||||
local FILE="$1";
|
# $R - thumbnailpath
|
||||||
local TARGET_H="$2";
|
local F="$1" # original
|
||||||
local FILE_WH="$(identify -format ' %w %h ' "$FILE" | awk '{ print $1" "$2 }')"
|
local W="$2" # width
|
||||||
printf '%.0f' "$(printf "$FILE_WH" | awk -vTH=$TARGET_H '{ printf("%f", TH*($2/$1)) }')"
|
local H="$3" # height
|
||||||
|
local T="${F%%.*}-$H"
|
||||||
|
if ! [ -f "$THUMB_PATH/$T" ];
|
||||||
|
then
|
||||||
|
case $(printf '%s' "${F##*.}" | tr '[:upper:]' '[:lower:]') in
|
||||||
|
gif) console "Creating Thumbnail: $THUMB_PATH/$T.gif"
|
||||||
|
convert -quality $THUMB_QUALITY -sharpen 2x2 \
|
||||||
|
-coalesce -resize 6000x$H\> \
|
||||||
|
-deconstruct "$F" \
|
||||||
|
"$THUMB_PATH/${T}_tmp.gif" && \
|
||||||
|
mv "$THUMB_PATH/${T}_tmp.gif" "$THUMB_PATH/$T.gif"
|
||||||
|
printf '%s' "$THUMB_PATH/$T.gif" ;;
|
||||||
|
*) convert -quality $THUMB_QUALITY -sharpen 2x2 \
|
||||||
|
-resize 6000x$H\> "$F" \
|
||||||
|
"$THUMB_PATH/${T}_tmp.jpeg" && \
|
||||||
|
mv "$THUMB_PATH/${T}_tmp.jpeg" "$THUMB_PATH/$T.jpeg"
|
||||||
|
printf '%s' "$THUMB_PATH/$T.jpeg" ;;
|
||||||
|
esac
|
||||||
|
fi
|
||||||
}
|
}
|
||||||
|
|
||||||
get_streched_height() {
|
# ADD IMAGE LOOP
|
||||||
printf "$GALLERY_HEIGHT $CURRENT_ROW_WIDTH $GALLERY_WIDTH" \
|
|
||||||
| awk '{ printf("%f", ($2/$1)*$3) }'
|
|
||||||
}
|
|
||||||
|
|
||||||
# ADD NEXT IMAGE AND DECIDE
|
|
||||||
# $1 - path to image
|
|
||||||
CURRENT_ROW_WIDTH=0
|
|
||||||
CURRENT_ROW_FILES=""
|
|
||||||
add_image() {
|
add_image() {
|
||||||
local FILE=$1
|
local F=$1 # image file
|
||||||
local NEXT_W=$(get_width "$FILE" "$GALLERY_ROW_HEIGHT")
|
|
||||||
# when the next item with is too much for the current row..
|
|
||||||
if [ $(( $CURRENT_ROW_WIDTH + $NEXT_W )) > $GALLERY_WIDTH ];
|
|
||||||
# build gallery
|
|
||||||
|
|
||||||
# calculate aspect ratio of row_height and all items
|
# How wide would the image be when we rescale it to $ROW_HEIGHT?
|
||||||
# calculate target image height with gallery_width
|
local NW=$(get_width_by_height "$F" "$ROW_HEIGHT")
|
||||||
get_streched_height;
|
debug "add_image: FILE=$F NW=${NW}x$ROW_HEIGHT"
|
||||||
# loop at images and resize to streched height
|
|
||||||
# resize items
|
# We add images and their width to $G_ROW_WIDTH until $WIDTH will
|
||||||
# output souce
|
# be exceeded.
|
||||||
|
if [ "$(( $G_ROW_WIDTH + $NW ))" -gt "$WIDTH" ]; then
|
||||||
|
|
||||||
|
debug "add_image: max width reached with F=$F @ $G_ROW_WIDTH"
|
||||||
|
|
||||||
|
# we're building a row now
|
||||||
|
printf "<div class=\"row\">\n";
|
||||||
|
|
||||||
|
# calculate how much we need to stretch images to fill the
|
||||||
|
# whole row.
|
||||||
|
RFH=$(printf "$G_ROW_WIDTH $WIDTH $ROW_HEIGHT" \
|
||||||
|
| awk '{ printf("%.0f",$3*($2/$1)) }')
|
||||||
|
debug "RFH=$RFH"
|
||||||
|
|
||||||
|
# loop through the images in this row and recalculate
|
||||||
|
# them with their new, real height.
|
||||||
|
local IFS='|'; for RF in $G_ROW_FILES;
|
||||||
|
do
|
||||||
|
local RFW=$(($(get_width_by_height "$RF" "$RFH") - 2*$THUMB_PADDING))
|
||||||
|
debug "add_image: adding file: F=$RF with W=$RFW H=$RFH"
|
||||||
|
|
||||||
|
local T=$(create_thumb "$RF" "$RFW" "$RFH")
|
||||||
|
debug "add_image: created thumbnail $T"
|
||||||
|
|
||||||
|
# output HTML for image
|
||||||
|
console "Adding Image: $RF"
|
||||||
|
printf " <div class=\"image\">\n"
|
||||||
|
printf " <a href=\"$RF\">\n"
|
||||||
|
printf " <img width=$RFW height=$RFH src=\"$T\">"
|
||||||
|
printf " </a>\n"
|
||||||
|
printf " </div>\n"
|
||||||
|
done
|
||||||
|
|
||||||
|
# we're done with this row now.
|
||||||
|
printf "</div>\n";
|
||||||
|
|
||||||
# set leftover file as for next iteration
|
# set leftover file as for next iteration
|
||||||
CURRENT_ROW_WIDTH="$NEXT_W"
|
G_ROW_WIDTH="$NW"
|
||||||
CURRENT_ROW_FILES="|$FILE"
|
G_ROW_FILES="$F|"
|
||||||
else
|
else
|
||||||
# add more items...
|
# add more items...
|
||||||
CURRENT_ROW_WIDTH=$(( $CURRENT_ROW_WIDTH + $NEXT_W ))
|
debug "add_image: width has not been reached, continue loop."
|
||||||
CURRENT_ROW_FILES="$CURRENT_ROW_FILES|$FILE"
|
G_ROW_WIDTH=$(( $G_ROW_WIDTH + $NW ))
|
||||||
|
G_ROW_FILES="$F|$G_ROW_FILES"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
# HEADER
|
||||||
|
printf '%s\n' \
|
||||||
|
'<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width">
|
||||||
|
<title>My Gallery</title>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
background: black;
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
.base {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: min-content;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
display: block;
|
||||||
|
float: clear;
|
||||||
|
width: max-content;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.image {
|
||||||
|
float: left;
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
padding: '"$THUMB_PADDING"';
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="base">
|
||||||
|
'
|
||||||
|
|
||||||
|
### MAIN LOOP ##########################################################
|
||||||
for file in *.*;
|
for F in *.*;
|
||||||
do
|
do
|
||||||
if [ -f "$file" ];
|
if [ -f "$F" ];
|
||||||
then
|
then
|
||||||
case $(printf '%s' ${file##*.} | tr '[:upper:]' '[:lower:]') in
|
case $(printf '%s' ${F##*.} | tr '[:upper:]' '[:lower:]') in
|
||||||
jpg|jpeg|png)
|
jpg|jpeg|png|gif) add_image "$F" ;;
|
||||||
|
*) console "Ignoring: $F" ;;
|
||||||
|
|
||||||
|
|
||||||
*) printf '%s\n' "Ignoring: $file" >&2 ;;
|
|
||||||
esac
|
esac
|
||||||
fi
|
fi
|
||||||
done
|
done
|
||||||
|
### MAIN LOOP END ######################################################
|
||||||
|
|
||||||
|
# FOOTER
|
||||||
|
printf '%s\n' \
|
||||||
|
' </div>
|
||||||
|
</body>
|
||||||
|
</html>'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## RESCALE AND ADD IMAGE
|
|
||||||
## PARAM 1: original
|
|
||||||
## 2: thumbnail_basename
|
|
||||||
## 3: thumbnail_format (extension)
|
|
||||||
#add_image() {
|
|
||||||
# local FILE="$1"
|
|
||||||
# get_width "$1" 300
|
|
||||||
# local THUMB="$THUMBNAIL_PATH/$2-$GALLERY_ROW_HEIGHT"
|
|
||||||
# local EXT="$3"
|
|
||||||
# printf '%s\n' "Adding image: $FILE" >&2
|
|
||||||
# if ! [ -f "$THUMB.$EXT" ] && [ "$FILE" != "$THUMB.$EXT" ];
|
|
||||||
# then convert -quality $THUMBNAIL_QUALITY -sharpen 2x2 \
|
|
||||||
# -coalesce -resize 6000x$GALLERY_ROW_HEIGHT\> \
|
|
||||||
# -deconstruct "$FILE" "${THUMB}_tmp.$EXT" && \
|
|
||||||
# mv "${THUMB}_tmp.$EXT" "$THUMB.$EXT"
|
|
||||||
# fi
|
|
||||||
# local WH="$(identify -format ' %w %h ' "$THUMB.$EXT" \
|
|
||||||
# | awk '{ print "width="$1" height="$2 }')"
|
|
||||||
# printf ' %s\n' "<a href=\"$FILE\">"
|
|
||||||
# printf ' %s\n' "<img $WH src=\"$THUMB.$EXT\">"
|
|
||||||
# printf ' %s\n' '</a>'
|
|
||||||
#}
|
|
||||||
|
|
||||||
### MAIN LOOP ##########################################################
|
### MAIN LOOP ##########################################################
|
||||||
|
|
||||||
#for file in *.*;
|
#for file in *.*;
|
||||||
@ -173,10 +221,3 @@ done
|
|||||||
#done
|
#done
|
||||||
|
|
||||||
### MAIN LOOP END ######################################################
|
### MAIN LOOP END ######################################################
|
||||||
|
|
||||||
# PRINT FOOTER
|
|
||||||
printf '%s%s\n' \
|
|
||||||
" </div>
|
|
||||||
$FOOTER
|
|
||||||
</body>
|
|
||||||
</html>"
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user