improve CSS styles - also add animationsdevelop

author: Paul Buetow <paul@buetow.org> 2022-02-20 13:44:42 +0000
committer: Paul Buetow <paul@buetow.org> 2022-02-20 13:44:42 +0000
commit: e88eea122ee112e63f7e544fd777ca8ab4cee323 (patch)
tree: 3e9f7af4b1d318b37b7eb2b99f8a011a88d50bc1
parent: 66c34c39d75d73159fe82c1d07961e0505fc8d6c (diff)
7 files changed, 102 insertions, 80 deletions
diff --git a/share/templates/default/footer.tmpl b/share/templates/default/footer.tmpl
index b3ce543..e1139c5 100644
--- a/share/templates/default/footer.tmpl
+++ b/share/templates/default/footer.tmpl
@@ -1,19 +1,16 @@
 cat <<END
-</div>
-END
-
-cat <<END
 <div class="footer">
 END
 
 if [ "${TARBALL_INCLUDE}" = 'yes' ]; then
 cat <<END
-  Download all photos in original size <a href='${backhref}/${tarball_name}'>here</a><br /><br />
+    Download all photos in original size <a href='${backhref}/${tarball_name}'>here</a><br /><br />
 END
 fi
 
 cat <<END
-  Page generated at $(date) using Bash and ImageMagick at $(uname); &lt;photoalbum@dev.buetow.org&gt;
+    Page generated at $(date) using Bash+ImageMagick -
+    <a href="https://codeberg.org/foozone/photoalbum">codeberg.org/foozone/photoalbum</a>
 </div>
 
 </body>
diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl
index 564d547..c0f81fb 100644
--- a/share/templates/default/header.tmpl
+++ b/share/templates/default/header.tmpl
@@ -1,5 +1,5 @@
 if [ "${is_subalbum}" = yes ]; then
-  GOTO_OVERVIEW="<a href='${backhref}/index.html'>Go to Album overview</a>"
+    GOTO_OVERVIEW="<a href='${backhref}/index.html'>Go to Album overview</a>"
 fi
 
 cat <<END
@@ -8,19 +8,52 @@ cat <<END
     <title>${TITLE}</title>
     <style type="text/css">
         body {
-            background-color: #000000;
-            color: #FFFFFF;
+            background-color: #ffffff;
+            background-image: url('${backhref}/${blurs_dir}/${background_image}');
+            background-size: cover;
+            background-repeat: no-repeat;
+            text-align: center;
+
+            color: #000000;
             font-family: verdana, sans-serif;
             width: 100%;
         }
+
         a {
-            color: #FFFFFF;
+            color: #000000;
         }
+
+        div.text, div.footer, div.navigator {
+            background-color: #ffffff;
+            width: 1024px;
+            border: 15px solid #000000;
+            padding: 10px;
+            margin-left: auto;
+            margin-right: auto;
+            margin-top: 10;
+            margin-bottom: 10;
+        }
+
+        img {
+            padding: 5px;
+        }
+
+        img.thumb:hover {
+            -webkit-transform: scaleX(-1);
+            transform: scaleX(-1);
+        }
+
+        .animate-none{}
+        .animate-fading{animation:fading 10s}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
+        .animate-opacity{animation:opac 0.4s}@keyframes opac{from{opacity:0} to{opacity:1}}
+        .animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+        .animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+        .animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+        .animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+        .animate-zoom {animation:animatezoom 0.4s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
     </style>
 </head>
 
 <body>
-  <h1>${TITLE}</h1>
   <p>${GOTO_OVERVIEW}</p>
-  <div>
 END
diff --git a/share/templates/default/next.tmpl b/share/templates/default/next.tmpl
index a4165dc..48287af 100644
--- a/share/templates/default/next.tmpl
+++ b/share/templates/default/next.tmpl
@@ -1,5 +1,5 @@
 cat <<END
-<p>
-  <a href='${next}.html'>Next ${MAXPREVIEWS} pictures of current Album</a>
-</p>
+<div class="navigator">
+    <a href='${next}.html'>Next ${MAXPREVIEWS} pictures&rArr;</a>
+</div>
 END
diff --git a/share/templates/default/prev.tmpl b/share/templates/default/prev.tmpl
index 98dd874..7c7c630 100644
--- a/share/templates/default/prev.tmpl
+++ b/share/templates/default/prev.tmpl
@@ -1,5 +1,5 @@
 cat <<END
-<p>
-    <a href='${prev}.html'>Previous ${MAXPREVIEWS} pictures of current Album</a>
-</p>
+<div class="navigator">
+    <a href='${prev}.html'>Previous ${MAXPREVIEWS} pictures</a>
+</div>
 END
diff --git a/share/templates/default/preview.tmpl b/share/templates/default/preview.tmpl
index feaa1cf..ddd036d 100644
--- a/share/templates/default/preview.tmpl
+++ b/share/templates/default/preview.tmpl
@@ -1,5 +1,5 @@
 cat <<END
 <a name='${photo}' href='${backhref}/${html_dir}/${num}-${i}.html'>
-  <img border='0' src='${backhref}/${thumbs_dir}/${photo}' />
+  <img class='thumb ${animation_class}' src='${backhref}/${thumbs_dir}/${photo}' />
 </a>
 END
diff --git a/share/templates/default/view.tmpl b/share/templates/default/view.tmpl
index 8a64035..a4a41a0 100644
--- a/share/templates/default/view.tmpl
+++ b/share/templates/default/view.tmpl
@@ -1,13 +1,15 @@
 cat <<END
-<p>
-    <a href="${num}-$((i-1)).html">&lt;&lt;&lt;</a>
+<div class="text">
+    <a href="${num}-$((i-1)).html">&lArr;</a>
     <a href="page-${num}.html#$photo">Thumbnails</a>
-    <a href="${num}-$((i+1)).html">&gt;&gt;&gt;</a>
-</p>
+    <a href="${num}-$((i+1)).html">&rArr;</a>
+</div>
 
-<a href="${num}-$((i+1)).html">
-    <img border='0' src='${backhref}/${photos_dir}/${photo}' />
-</a>
+<div class='view'>
+    <a href="${num}-$((i+1)).html">
+        <img class='view ${animation_class}' border='0' src='${backhref}/${photos_dir}/${photo}' />
+    </a>
+</div>
 
 <p>
     <a href="${backhref}/${photos_dir}/${photo}">Direct link</a>
diff --git a/src/photoalbum.sh b/src/photoalbum.sh
index ebaaf71..e79d3d8 100755
--- a/src/photoalbum.sh
+++ b/src/photoalbum.sh
@@ -70,10 +70,28 @@ scalephotos () {
     done
 }
 
+randomphoto () {
+    declare photos_dir="$1" ; shift
+    basename $(find "$photos_dir" -type f -maxpdeth 1 -mindepth 1 | sort -R | head -n 1)
+}
+
+random_animation_css_class () {
+    cat <<END | grep -v fading | sort -R | head -n 1
+animate-fading
+animate-opacity
+animate-top
+animate-left
+animate-right
+animate-bottom
+animate-zoom
+END
+}
+
 albumhtml () {
     declare photos_dir="$1" ; shift
     declare html_dir="$1"   ; shift
     declare thumbs_dir="$1" ; shift
+    declare blurs_dir="$1"  ; shift
     export backhref="$1"    ; shift
 
     declare -i num=1
@@ -81,15 +99,17 @@ albumhtml () {
 
     declare name="page-$num"
 
-    template header "$name.html"
+    # Random background image for preview page.
+    export background_image="$(randomphoto $photos_dir)"
+    template 'header' "$name.html"
 
     cd "$DIST_DIR/$photos_dir" && find ./ -type f | sort | sed 's;^\./;;' |
     while read -r photo; do 
-        : $(( i++ ))
+        let i++
 
         if [ "$i" -gt "$MAXPREVIEWS" ]; then
             i=1
-            : $(( num++ ))
+            let num++
 
             declare next="page-$num"
             template next "$name.html"
@@ -97,27 +117,36 @@ albumhtml () {
 
             export prev="$name"
             declare name="$next"
+            export background_image="$(randomphoto $photos_dir)"
             template header "$name.html"
             template prev "$name.html"
         fi
 
         # Preview page
+        export animation_class=$(random_animation_css_class)
         template preview "$name.html"
+
         # View page
+        export background_image="$photo"
         template header "$num-$i.html"
+
+        export animation_class='animate-none'
         template view "$num-$i.html"
         template footer "$num-$i.html"
 
-        if [ -f "$DIST_DIR/$thumbs_dir/$photo" ]; then 
-            echo "Already exists: $DIST_DIR/$thumbs_dir/$photo"
-            continue
+        if [[ -f "$DIST_DIR/$thumbs_dir/$photo" && -f "$DIST_DIR/$blurs_dir/$photo" ]]; then 
+            echo "Already exists: $DIST_DIR/$thumbs_dir/$photo and $DIST_DIR/$blurs_dir/$photo"
+        else
+            declare dirname="$DIST_DIR/$thumbs_dir"
+            test ! -d "$dirname" && mkdir -p "$dirname"
+            echo "Creating thumb $DIST_DIR/$thumbs_dir/$photo"
+            convert -geometry "x$THUMBGEOMETRY" "$photo" "$DIST_DIR/$thumbs_dir/$photo"
+
+            dirname="$DIST_DIR/$blurs_dir"
+            test ! -d "$dirname" && mkdir -p "$dirname"
+            echo "Creating blur $DIST_DIR/$blurs_dir/$photo"
+            convert -blur 0x6 "$DIST_DIR/$thumbs_dir/$photo" "$DIST_DIR/$blurs_dir/$photo"
         fi
-
-        dirname="$(dirname "$DIST_DIR/$thumbs_dir/$photo")"
-        test ! -d "$dirname" && mkdir -p "$dirname"
-
-        echo "Creating thumb $DIST_DIR/$thumbs_dir/$photo"
-        convert -geometry "x$THUMBGEOMETRY" "$photo" "$DIST_DIR/$thumbs_dir/$photo"
     done
 
     template footer "$(cd "$DIST_DIR/$html_dir";ls -t page-*.html | head -n 1)"
@@ -152,33 +181,8 @@ albumhtml () {
     template 'redirect' 'index.html'
 }
 
-albumindexhtml () {
-    declare -a dirs=( "$1" )
-    declare is_subalbum='no'
-    declare html_dir='html'
-    declare backhref='..'
-
-    template 'header' 'index.html'
-
-    for dir in ${dirs[*]}; do
-        declare basename="$(basename "$dir")"
-        export album="$basename"
-        declare thumbs_dir="$DIST_DIR/thumbs/$basename"
-        declare pictures="$(ls "$thumbs_dir" | wc -l)"
-        declare random_num="$(( 1 + RANDOM % pictures ))"
-        declare pages="$(( pictures / MAXPREVIEWS + 1 ))"
-
-        export random_thumb="./thumbs/$basename"/$(find \
-            "$thumbs_dir" -type f -printf "%f\n" |
-            head -n $random_num | tail -n 1)
-
-        declare s=''
-        [ $pages -gt 1 ] && s='s'
-        export description="$pictures pictures / $pages page$s"
-        template 'index.html'
-    done
-
-    template 'footer' 'index.html'
+randomphoto () {
+    ls -f "$DIST_DIR/photos/" | sort -R | head -n 1
 }
 
 generate () {
@@ -199,21 +203,7 @@ generate () {
     find "$DIST_DIR" -type f -name \*.html -delete
     declare -a dirs=( $(find "$DIST_DIR/photos" -mindepth 1 -maxdepth 1 -type d | sort) )
 
-    # Figure out wether we want sub-albums or not
-    if [[ "$SUB_ALBUMS" != yes || ${#dirs[*]} -eq 0 ]]; then
-        export is_subalbum='no'
-        albumhtml 'photos' 'html' 'thumbs' '..'
-
-    else
-        export is_subalbum='yes'
-        for dir in ${dirs[*]}; do
-            declare basename="$(basename "$dir")"
-            albumhtml "photos/$basename" "html/$basename" "thumbs/$basename" '../..'
-        done
-
-        # Create an album selection screen
-        albumindexhtml "${dirs[*]}"
-    fi
+    albumhtml 'photos' 'html' 'thumbs' 'blurs' '..'
 
     # Create top level index/redirect page
     declare html_dir='./'
author	Paul Buetow <paul@buetow.org>	2022-02-20 13:44:42 +0000
committer	Paul Buetow <paul@buetow.org>	2022-02-20 13:44:42 +0000
commit	e88eea122ee112e63f7e544fd777ca8ab4cee323 (patch)
tree	3e9f7af4b1d318b37b7eb2b99f8a011a88d50bc1
parent	66c34c39d75d73159fe82c1d07961e0505fc8d6c (diff)