Nginx image_filter based thumbnails for images

.gitignore

@@ -1,2 +1,3 @@
 /layout/theme.css*
 /layout/theme.d
+/build/

README.md

@@ -4,6 +4,7 @@
 [![](https://img.shields.io/badge/license-GPLv3-blue.svg?style=flat-square)](LICENSE)
 
 ![](doc/screenshot.png)
+![](doc/screenshot-thumbs.png)
 
 
 ## About
@@ -42,7 +43,36 @@ dynamic code.
         alias /srv/www/fileserver/theme;
     }
     ```
+3. To enable image thumbnails, configure nginx to generate and cache if neccessary:
+    ```
+    # 3.1. thumbnail images cache (outside server block)
+    proxy_cache_path /tmp/nginx-images-cache/ levels=1:2 keys_zone=images:10m inactive=30d max_size=1024m;
+
+    # 3.2 separate server to serve thumbnails internally
+    server {
+        # Internal image resizing server.
+        server_name localhost;
+        listen 8181;
 
+        root /srv/www/fileserver;
+
+        location ~ ^(?i)/thumbs/(.+)-([0-9]+)x([0-9]+)\.(jpg|jpeg|png|gif|webp)$ {
+                image_filter_buffer 30M; # Will return 415 if image is bigger than this
+                image_filter_jpeg_quality 80; # Desired JPG quality
+                image_filter_interlace on; # For progressive JPG
+                image_filter resize $2 $3;
+                alias '/srv/www/fileserver/$1.$4';
+        }
+    }
+
+    # 3.3 location should be within main server block to serve thumbnails outside
+    location ~ ^/thumbs {
+            proxy_pass 'http://127.0.0.1:8181/$uri';
+            proxy_cache images;
+            proxy_cache_valid 200 30d;
+            proxy_cache_key $scheme$proxy_host$uri;
+    }
+    ```
 
 ## License
 

layout/js/list.js

@@ -161,6 +161,19 @@ function generateList()
   }
 
 
+  function getThumbnail(file)
+  {
+    var dimensions="-128x128"
+    var pos = file.lastIndexOf(".");
+    var ext = "";
+    var fileNoExt = filename;
+    if (pos >= 0) {
+      ext = file.substr(pos, file.length);
+      fileNoExt = file.substr(0, pos);
+    }
+    return "/thumbs" + window.location.pathname + "/" + fileNoExt + dimensions + ext;
+  }
+
   /**
    * Get the font awesome icon to be used for a specific filetype.
    *
@@ -235,21 +248,25 @@ function generateList()
   for (var i = 0, row; row = list.rows[i]; i++)
     {
       /* Add a new cell for the file-type icon. */
-      filetype = getFileType(row.cells[0].children[0].innerHTML);
+      filename = row.cells[0].children[0].innerHTML;
+      filetype = getFileType(filename);
       row.insertCell(0).innerHTML = (i > 0) ? getIcon(filetype) : '';
 
       /* Set the classes for all cells. All cells except the filename will fit
        * their contents. The filename cell is the only allowed to wrap. The last
        * two cells (file size and last-modified date) will be hidden on small
        * (i.e. mobile) devices.*/
-      row.cells[0].classList.add('col-auto');
-      row.cells[1].classList.add('col', 'filename');
-      row.cells[2].classList.add('col-auto', 'd-none', 'd-md-table-cell');
-      row.cells[3].classList.add('col-auto', 'd-none', 'd-md-table-cell');
+      row.cells[0].classList.add('col-auto', 'align-middle');
+      row.cells[1].classList.add('col', 'filename', 'align-middle');
+      row.cells[2].classList.add('col-auto', 'd-none', 'd-md-table-cell', 'align-middle');
+      row.cells[3].classList.add('col-auto', 'd-none', 'd-md-table-cell', 'align-middle');
 
       /* If the file is a picture, add the data attribute for lightbox2, so one
        * is able to easily navigate through the pictures. */
-      if (filetype == 'image')
+      if (filetype == 'image') {
         row.cells[1].children[0].setAttribute('data-lightbox', 'roadtrip');
+        row.cells[1].children[0].innerHTML = '<img class="thumb" src="'+getThumbnail(filename)+'"></img>&nbsp;' + row.cells[1].children[0].innerHTML;
+      }
     }
 }
+