Is there a way to create a simple static image gallery in nginx without any third-party utilities?
Clash Royale CLAN TAG#URR8PPP
Is there a way to create a simple static image gallery in nginx without any third-party utilities?
I just want to be able to share a link to several images at once.
2 Answers
2
The most simple way would be transforming file listings of nginx. You can do that by making nginx output listings as XML and then transform them using XSLT. Built-in module ngx_http_autoindex_module will do the former and usually dynamic module ngx_http_xslt_filter_module (aka ngx_http_xslt_module) will do the latter.
ngx_http_autoindex_module
ngx_http_xslt_filter_module
ngx_http_xslt_module
First, load the module in nginx.conf if needed:
nginx.conf
load_module "/usr/lib/nginx/modules/ngx_http_xslt_filter_module.so";
Then, in your sites-available/website.com, add a location that tells nginx to transform the xml index using stlylesheet gal.xslt and pass a the name of the folder as a parameter.
sites-available/website.com
gal.xslt
location ~ /gal/([A-z]+)/$
autoindex on;
autoindex_format xml;
xslt_string_param title $1;
xslt_stylesheet gal.xslt;
try_files $uri/ =404;
Finally, create gal.xslt in /etc/nginx that says,
gal.xslt
/etc/nginx
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" indent="yes" />
<xsl:template match="/">
<xsl:text disable-output-escaping='yes'><!DOCTYPE html></xsl:text>
<html>
<head>
<title><xsl:value-of select="$title" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
img
display: block;
max-width: 20cm;
max-height: 20cm;
margin: 2mm;
vertical-align: bottom;
@media all and (max-width: 20.4cm)
img
max-width: calc(100% - 4mm);
body
margin: 0;
</style>
</head>
<body>
<xsl:for-each select="list/file">
<img src="." alt="."/>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Now put some images into /var/www/html/gal/foo, restart nginx, navigate to website.com/gal/foo and you will see a simple but usable and responsive image gallery.
/var/www/html/gal/foo
website.com/gal/foo
Thanks @squirrel that's really simply yet powerful.
I've tweaked the xslt - this version gal.xslt below:
Each image is click-able, so you can see the full size image.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" indent="yes" />
<xsl:template match="/">
<xsl:text disable-output-escaping='yes'><!DOCTYPE html></xsl:text>
<html>
<head>
<title><xsl:value-of select="$title" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
img
display: inline;
width: 23%;
margin: 2mm;
vertical-align: bottom;
@media all and (max-width: 20.4cm)
img
max-width: calc(100% - 4mm);
body
margin: 0;
</style>
</head>
<body>
<xsl:for-each select="list/file">
<a href="." title="click to enlarge">
<img src="." alt="."/>
</a>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Cheers,
Greg
Nice job, next step is to mix in the image filter module to generate and cache the thumbnails server side ;)
– miknik
Aug 28 at 23:04
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
This is purely amazing! Thank you.
– gerasalus
May 16 '17 at 8:42