@@ -3,3 +3,4 @@ .jekyll-cache/
 .jekyll-metadata
 .sass-cache/
 Gemfile.lock
+art/*/thumbs/

@@ -7,6 +7,7 @@ # exclude non-site files
 exclude:
   - LICENSE
   - README.md
+  - art/thumbs.sh
 
 excerpt_separator: <!--more-->
 
@@ -30,3 +31,9 @@ - scope:
       path: "art"
     values:
       art: true
+
+  - scope:
+      path: "art/*/thumbs"
+    values:
+      thumbnail: true
+

@@ -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 %}

@@ -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: " " %}

@@ -4,7 +4,8 @@ ---
 
 <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>

@@ -6,13 +6,21 @@ <h1>{{ page.title }}</h1>
 
 {{ 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>

@@ -217,6 +217,7 @@ display: flex;
     flex-flow: row wrap;
 
     .art-img {
+        margin: 0.5em 0;
         img {
             width: 100%;
             height: auto;

@@ -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
+