mirrors/nginx-fancyindex-flat-theme
1
0
Fork 0
mirror of https://github.com/alehaa/nginx-fancyindex-flat-theme.git synced 2025-05-07 22:35:46 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

+ images thumbnail implementation

Browse source
This commit is contained in:
Magomed Abdurakhmanov 2018-12-19 03:00:26 +01:00
parent 76a9ef4932
commit d91aac6daf
No known key found for this signature in database
GPG key ID: 5C4E10D134FF29B4
3 changed files with 53 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

29
README.md
View file

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

29
layout/js/list.js
View file

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