From 324991d82ef26798ed5842a6fe03eabc798ff497 Mon Sep 17 00:00:00 2001
From: la-ninpre <leobrekalini@gmail.com>
Date: Thu, 27 May 2021 00:13:05 +0300
Subject: modify art page to display thumbnails

thumbnails are currently created using shell script and require
imagemagick installed on the server. i know it's stupid, but i think
that including thumbnails to repo is also stupid.

maybe later i replace this script with actual jekyll plugin, but for
this i'll need to familiarize myself with ruby.
but now i use following addition to the git hook on the server:

```
[ -f "$TMP_GIT_CLONE/art/thumbs.sh" ] && {
    dir="$PWD"
    cd "$TMP_GIT_CLONE/art/" && sh thumbs.sh && cd "$dir"
}
```

it happens after cloning to remote repo and before building with bundle.

overall, this is a bodge now, it recompiles all thumbnails every time
due to quirks in my current setup.
---
 .gitignore                 |   1 +
 _config.yml                |   7 ++++++
 _includes/art-menu.html    |   4 ++--
 _includes/pic-path.html    |  20 +++++++++++++++-
 _layouts/about-page.html   |   3 ++-
 _layouts/art-category.html |  16 +++++++++----
 _sass/main.scss            |   1 +
 art/photos/pyramid.jpg     | Bin 2578973 -> 2628562 bytes
 art/thumbs.sh              |  56 +++++++++++++++++++++++++++++++++++++++++++++
 9 files changed, 100 insertions(+), 8 deletions(-)
 create mode 100755 art/thumbs.sh

diff --git a/.gitignore b/.gitignore
index a0ac718..d50e8d5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ _site/
 .jekyll-metadata
 .sass-cache/
 Gemfile.lock
+art/*/thumbs/
diff --git a/_config.yml b/_config.yml
index a74072f..1f827a6 100644
--- a/_config.yml
+++ b/_config.yml
@@ -7,6 +7,7 @@ plugins:
 exclude:
   - LICENSE
   - README.md
+  - art/thumbs.sh
 
 excerpt_separator: <!--more-->
 
@@ -30,3 +31,9 @@ defaults:
       path: "art"
     values:
       art: true
+
+  - scope:
+      path: "art/*/thumbs"
+    values:
+      thumbnail: true
+
diff --git a/_includes/art-menu.html b/_includes/art-menu.html
index d74d9da..0d35b96 100644
--- a/_includes/art-menu.html
+++ b/_includes/art-menu.html
@@ -1,12 +1,12 @@
 <ul class="art-menu">
 {%- for page in site.pages -%}
-    {%- assign pagedir = page.dir | remove_first: "/" | split: "/" -%}
     {%- include pic-path.html -%}
+    {%- assign pagedir = page.dir | remove_first: "/" | split: "/" -%}
     {%- if pagedir.first == "art" and pagedir.size > 1 -%}
     <li class="art-category">
         <a class="link-mask" href="{{ page.url }}">{{ page.title }}</a>
         <div class="thumbnail">
-            <img src="{{ artpics.first }}">
+            <img src="{{ artthumbs.first }}">
         </div>
     </li>
     {% endif %}
diff --git a/_includes/pic-path.html b/_includes/pic-path.html
index fed2367..810f227 100644
--- a/_includes/pic-path.html
+++ b/_includes/pic-path.html
@@ -1,8 +1,26 @@
+{% comment %}
+    the purpose of this file is to provide arrays to use for art browsing
+{% endcomment %}
+
 {%- capture arts -%}
 {%- for file in site.static_files -%}
-    {%- if file.art and file.path contains page.title -%}
+    {%- if file.art and file.path contains page.title and file.thumbnail != true -%}
         {{ file.path }}
     {% endif %}
 {%- endfor -%}
 {%- endcapture -%}
 {% assign artpics = arts | split: " " %}
+
+{%- capture arts_thumbs -%}
+{%- for art in artpics -%}
+    {%- assign art_ext = art | split: "." | last -%}
+    {%- assign art_basepath = art | split: "." | first -%}
+    {%- assign art_name = art_basepath | split: "/" | last -%}
+    {%- assign art_thumbpath = art_basepath \
+        | remove: art_name | append: "thumbs/" \
+        | append: art_name | append: "_thumb." | append: art_ext \
+        | append: " " -%}
+    {{ art_thumbpath }}
+{%- endfor -%}
+{%- endcapture -%}
+{% assign artthumbs = arts_thumbs | split: " " %}
diff --git a/_layouts/about-page.html b/_layouts/about-page.html
index 6603cde..d734d94 100644
--- a/_layouts/about-page.html
+++ b/_layouts/about-page.html
@@ -4,7 +4,8 @@ layout: default
 
 <div class="about">
     <div class="about-sidebar">
-        <img id="avatar" alt="aaoth-photo" src="/assets/img/aaoth-photo.jpeg">
+        <img id="avatar" alt="aaoth-photo"
+        width=128px height=128px src="/assets/img/aaoth-photo.jpeg">
         <div class="about-links">
             <p>other links:</p>
             <ul>
diff --git a/_layouts/art-category.html b/_layouts/art-category.html
index fb70a11..dc8ce12 100644
--- a/_layouts/art-category.html
+++ b/_layouts/art-category.html
@@ -6,13 +6,21 @@ layout: default
 
 {{ content }}
 
-{%- include pic-path.html -%} <!-- provides artpics array -->
+{%- include pic-path.html -%}
+{% comment %}
+    upper include provides `artpics` array 
+    and `artthumbs` array, which are used later
+{% endcomment %}
 
 <div class="art">
-{%- for imgpath in artpics -%}
-    {% assign imgname = imgpath | split: "/" | last | split: "." | first %}
+{%- assign pics_n = artpics.size -%}
+{%- assign range = (0..pics_n) -%}
+{%- for i in range -%}
+    {%- assign imgname = artpics[i] | split: "/" | last | split: "." | first -%}
     <div class="art-img">
-        <img src="{{ imgpath }}" alt="{{ imgname }}">
+        <a href="{{ artpics[i] }}" target="_blank">
+            <img src="{{ artthumbs[i] }}" alt="{{ imgname }}">
+        </a>
     </div>
 {% endfor %}
 </div>
diff --git a/_sass/main.scss b/_sass/main.scss
index 5ec3a08..477a4f3 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -217,6 +217,7 @@ ul {
     flex-flow: row wrap;
 
     .art-img {
+        margin: 0.5em 0;
         img {
             width: 100%;
             height: auto;
diff --git a/art/photos/pyramid.jpg b/art/photos/pyramid.jpg
index d439f6f..5524a91 100644
Binary files a/art/photos/pyramid.jpg and b/art/photos/pyramid.jpg differ
diff --git a/art/thumbs.sh b/art/thumbs.sh
new file mode 100755
index 0000000..758b0a9
--- /dev/null
+++ b/art/thumbs.sh
@@ -0,0 +1,56 @@
+#!/bin/sh -ex
+
+_img_dirs="$( find . -maxdepth 1 -type d | sed -e '1d' -e 's/^\.\///' )"
+_thumb_size="835x"
+_thumbs_dir="thumbs"
+_force_render=0
+
+usage() {
+    echo "usage: $0 [-f|--force]"
+}
+
+[ -n "$1" ] && \
+    case $1 in
+        -f|--force)
+            _force_render=1
+            ;;
+        -h|--help)
+            usage
+            exit 0
+            ;;
+        *)
+            usage
+            exit 1
+            ;;
+    esac
+
+for dir in $_img_dirs
+do
+    cd "./$dir" || exit 1
+
+    [ -d "$_thumbs_dir" ] || mkdir "$_thumbs_dir"
+
+    _imgs="$(find . -maxdepth 1 -type f | cut -b 3-)"
+    for _img in $_imgs
+    do
+        _ext="${_img##*.}"
+        _name="${_img%%.*}"
+        _thumb="./$_thumbs_dir/${_name}_thumb.${_ext}"
+
+        [ "$_force_render" -eq 1 ] || [ ! -f "$_thumb" ] && \
+        {
+            # when compressed, gifs look ugly, so just copy them
+            # i know this is bad, but i'll adress it later
+            [ "$_ext" = "gif" ] && \
+                echo "copied $1 to $_thumb" && \
+                cp "$_img" "$_thumb" && continue
+
+            echo "creating thumbnail for $_name..."
+            convert "$_img" -resize "$_thumb_size" "$_thumb"
+        }
+    done
+
+    cd ".."
+
+done
+
-- 
cgit v1.2.3