* Simple Justified Gallery
       
   URI git clone git://git.codevoid.de/mkpicindex
   DIR Log
   DIR Files
   DIR Refs
   DIR README
       ---
   DIR commit 2f5d0ad4accb113a2bc7854dd2b0fb3b08820e77
   DIR parent 50ebf2ce63e6603ac02af60d4212c2eb689f2c73
   URI Author: Stefan Hagen <sh+git[at]codevoid[dot]de>
       Date:   Sat, 26 Oct 2019 14:13:47 +0200
       
       Add static version
       
       Diffstat:
         M Makefile                            |       2 ++
         M mkpicindex-static.sh                |     267 ++++++++++++++++++-------------
       
       2 files changed, 156 insertions(+), 113 deletions(-)
       ---
   DIR diff --git a/Makefile b/Makefile
       @@ -1,4 +1,6 @@
        all:
                ./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:
                rm -rf index.html.tmp index.html style.css justify.js LICENSE
   DIR diff --git a/mkpicindex-static.sh b/mkpicindex-static.sh
       @@ -10,151 +10,199 @@ printf '%s' \
        ' > LICENSE
        
        # CONFIGURE
       -GALLERY_TITLE="My Gallery" # browser title
       -GALLERY_WIDTH=1000         # how wide will the gallery be
       -GALLERY_ROW_HEIGHT=150     # how high will the justified rows be?
       -GALLERY_RANDOMIZE=false     # enable random sorting (true,false)
       -BODY_STYLE="color:orange; background:black;" # <body style="?">
       -THUMBNAIL_QUALITY=83       # quality for thumbnails
       -THUMBNAIL_PATH="thm"       # relative path to thumbnail folder
       -INCLUDE_HEADER="HEADER"    # file with html to include before gallery
       -INCLUDE_FOOTER="FOOTER"    # file with html to include after gallery
       +TITLE="My Gallery"          # browser title
       +WIDTH=1000                  # how wide will the gallery be
       +ROW_HEIGHT=150              # how high will the justified rows be?
       +THUMB_QUALITY=83            # quality for thumbnails
       +THUMB_PATH="thm"            # relative path to thumbnail folder
       +THUMB_PADDING="6"           # image padding
       +DEBUG=$1                    # debug output
       +
       +# 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 ##############################################
        cleanup() {
            # DELETE BROKEN IMAGES
            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
        }
        trap cleanup 1 2 3 6
        
        # CREATE THUMBNAIL DIRECTORY
       -mkdir -p $THUMBNAIL_PATH
       +mkdir -p "$THUMB_PATH"
       +
       +# OUTPUT HELPER
       +debug() { [ "$DEBUG" == "1" ] && printf '%s\n' "Debug: $1" >&2; }
       +console() { printf '%s\n' "$1" >&2; }
       +
       +# CALCULATORS
       +get_width_by_height() {
       +    # returns aspect ratio calculated width
       +    local F=$1  # image file
       +    local TH=$2 # target height
       +    local WH="$(identify -format ' %w %h ' "$1" | awk '{ printf("%.3f %.3f",$1,$2) }')"
       +    R="$(printf "$WH" | awk -vTH=$TH '{ printf("%.0f", TH*($1/$2)) }')"
       +    printf '%.0f' "$(($R))"
       +    debug "get_width_by_height: FILE=$F TARGET_HEIGHT=$TH FILE_WxH=$WH RET_WIDTH=$R"
       +}
       +get_height_by_width() {
       +    # returns aspect ratio calculated height
       +    local F=$1  # image file
       +    local TW=$2 # target width
       +    local WH="$(identify -format ' %w %h ' "$1" | awk '{ printf("%.3f %.3f",$1,$2) }')"
       +    R="$(printf "$WH" | awk -vTW=$TW '{ printf("%.0f", TW*($2/$1)) }')"
       +    printf '%.0f' "$R"
       +    debug "get_height_by_width: FILE=$F TARGET_WIDTH=$TW FILE_WxH=$WH RET_HEIGHT=$R"
       +}
        
       -# INCLUDE CUSTOM HEADER & FOOTER
       -FOOTER=$([ -f $INCLUDE_FOOTER ] && cat $INCLUDE_FOOTER | sed 's/^/        /g')
       -HEADER=$([ -f $INCLUDE_HEADER ] && cat $INCLUDE_HEADER | sed 's/^/        /g')
       +# CREATE THUMBNAIL
       +create_thumb() {
       +    # $F - original
       +    # $W - width
       +    # $H - height
       +    # $R - thumbnailpath
       +    local F="$1" # original
       +    local W="$2" # width
       +    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
       +}
        
       -# PRINT HEADER
       -printf '%s%s%s%s%s\n' \
       -"<html>
       -    <head>
       -        <title>$GALLERY_TITLE</title>
       -        <meta name=\"viewport\" content=\"width=device-width\">
       -    </head>
       -    <body style=\"$BODY_STYLE\">
       -$HEADER"
       +# ADD IMAGE LOOP
       +add_image() {
       +    local F=$1 # image file
        
       +    # How wide would the image be when we rescale it to $ROW_HEIGHT?
       +    local NW=$(get_width_by_height "$F" "$ROW_HEIGHT")
       +    debug "add_image: FILE=$F NW=${NW}x$ROW_HEIGHT"
        
       -# take one image
       -  # resize to $ROW_HEIGHT
       -    # check if width exceeds $GALLERY_WIDTH
       -      # if not: take next picture
       -        # resize to $ROW_HEIGHT
       -          # check if first picture width + second picture width exceeds $GALLERY_WIDTH
       -      # if yes: 
       +    # We add images and their width to $G_ROW_WIDTH until $WIDTH will
       +    # 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";
        
       -# $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 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"
        
       -# CALCULATE ASPECT RATIO WITH FOR TARGET ROW HEIGHT
       -# $1 - path to image
       -# $2 - target row height
       -# ret - calculated width for target height
       -get_width() {
       -    local FILE="$1";
       -    local TARGET_H="$2";
       -    local FILE_WH="$(identify -format ' %w %h ' "$FILE" | awk '{ print $1" "$2 }')"
       -    printf '%.0f' "$(printf "$FILE_WH" | awk -vTH=$TARGET_H '{ printf("%f", TH*($2/$1)) }')"
       -}
       +        # 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"
        
       -get_streched_height() {
       -    printf "$GALLERY_HEIGHT $CURRENT_ROW_WIDTH $GALLERY_WIDTH" \
       -        | awk '{ printf("%f", ($2/$1)*$3) }'
       -}
       +            local T=$(create_thumb "$RF" "$RFW" "$RFH")
       +            debug "add_image: created thumbnail $T"
        
       -# ADD NEXT IMAGE AND DECIDE
       -# $1 - path to image
       -CURRENT_ROW_WIDTH=0
       -CURRENT_ROW_FILES=""
       -add_image() {
       -    local FILE=$1
       -    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
       -        # calculate target image height with gallery_width
       -        get_streched_height;
       -        # loop at images and resize to streched height
       -        # resize items
       -        # output souce
       +            # 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
       -        CURRENT_ROW_WIDTH="$NEXT_W"
       -        CURRENT_ROW_FILES="|$FILE"
       +        G_ROW_WIDTH="$NW"
       +        G_ROW_FILES="$F|"
            else
                # add more items...
       -        CURRENT_ROW_WIDTH=$(( $CURRENT_ROW_WIDTH + $NEXT_W ))
       -        CURRENT_ROW_FILES="$CURRENT_ROW_FILES|$FILE"
       +        debug "add_image: width has not been reached, continue loop."
       +        G_ROW_WIDTH=$(( $G_ROW_WIDTH + $NW ))
       +        G_ROW_FILES="$F|$G_ROW_FILES"
            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">
       +'
        
       -
       -for file in *.*;
       +### MAIN LOOP ##########################################################
       +for F in *.*;
        do
       -    if [ -f "$file" ];
       +    if [ -f "$F" ];
            then
       -        case $(printf '%s' ${file##*.} | tr '[:upper:]' '[:lower:]') in
       -            jpg|jpeg|png) 
       -
       -
       -
       -            *) printf '%s\n' "Ignoring: $file" >&2 ;;
       +        case $(printf '%s' ${F##*.} | tr '[:upper:]' '[:lower:]') in
       +            jpg|jpeg|png|gif) add_image "$F" ;;
       +            *) console "Ignoring: $F" ;;
                esac
            fi
        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 ##########################################################
        
       @@ -173,10 +221,3 @@ done
        #done
        
        ### MAIN LOOP END ######################################################
       -
       -# PRINT FOOTER
       -printf '%s%s\n' \
       -"        </div>
       -$FOOTER
       -    </body>
       -</html>"