有没有一种方法可以在 nginx 中创建一个简单的静态图片库，而不需要任何第三方实用程序？

问题描述 投票：0回答：5

我只是希望能够一次共享多个图像的链接。

nginx image-gallery
5个回答
18
投票

最简单的方法是转换 nginx 的文件列表。您可以通过将 nginx 输出列表制作为 XML，然后使用 XSLT 对其进行转换来实现此目的。内置模块 

ngx_http_autoindex_module
将执行前者，通常动态模块 
ngx_http_xslt_filter_module
（又名 
ngx_http_xslt_module
）将执行后者。

首先，如果需要的话，在

nginx.conf
中加载模块：

load_module "/usr/lib/nginx/modules/ngx_http_xslt_filter_module.so";

然后，在您的 

sites-available/website.com
中，添加一个位置，告诉 nginx 使用 stlylesheet 
gal.xslt
转换 xml 索引，并传递文件夹名称作为参数。

location ~ /gal/([A-z]+)/$ {
    autoindex on;
    autoindex_format xml;
    xslt_string_param title $1;
    xslt_stylesheet gal.xslt;
    try_files $uri/ =404;
}

最后，在 

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'>&lt;!DOCTYPE html&gt;</xsl:text>
    <html>
    <head>
        <title><xsl:value-of select="$title" /></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
        img, video {
            display: block;
            max-width: 20cm;
            max-height: 20cm;
            margin: 2mm;
            vertical-align: bottom;
            image-orientation: from-image;
        }
        @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">
            <xsl:choose>
                <xsl:when test="contains(' mp4 webm mkv avi wmv flv ogv ', concat(' ', substring-after(., '.'), ' '))">
                    <video controls="" src="{.}" alt="{.}" title="{.}"/>
                </xsl:when>
                <xsl:otherwise>
                    <img src="{.}" alt="{.}" title="{.}"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:for-each>
    </body>
    </html>
</xsl:template>
</xsl:stylesheet>

现在将一些图像放入

/var/www/html/gal/foo
中，重新启动nginx，导航到
website.com/gal/foo
，您将看到一个简单但可用且响应灵敏的图像库。

7
投票

感谢@squirrel，这真的很简单但很强大。

我已经调整了 xslt - 这个版本的 gal.xslt 如下：

  • 在四列宽的网格中显示缩略图。
  • 根据页面大小调整大小。
  • 每张图片均可点击，因此您可以看到完整尺寸的图片。
<?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'>&lt;!DOCTYPE html&gt;</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>

干杯，

格雷格

2
投票

我做了一些调整：fancybox、缩略图处理（在thumbs目录中预先生成的缩略图）、将所有图像下载为浏览器生成的zip文件的能力。

<?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'>&lt;!DOCTYPE html&gt;</xsl:text>
<html>
<head>
  <title><xsl:value-of select="$title" /></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous"/>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js" integrity="sha256-PZ/OvdXxEW1u3nuTAUCSjd4lyaoJ3UJpv/X11x2Gi5c=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js" integrity="sha256-xoh0y6ov0WULfXcLMoaA6nZfszdgI8w2CEJ/3k8NBIE=" crossorigin="anonymous"></script>
  <style>img { display: block; }</style>
</head>
<body>
<h1 style="text-align: center;"><xsl:value-of select="$title"/></h1>
<div style="border-bottom: 1px solid gray; margin-bottom: 1rem;"></div>
<div style="display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;">
<xsl:for-each select="list/file">
  <a href="{.}" data-fancybox="gallery">
  <xsl:choose>
  <xsl:when test="count(/list/directory[text() = 'thumbs'])">
    <img loading="lazy" src="thumbs/{.}"/>
  </xsl:when>
  <xsl:otherwise>
    <img loading="lazy" src="{.}" height="200"/>
  </xsl:otherwise>
  </xsl:choose>
  </a>
</xsl:for-each>
</div>
<script>
async function downloadAll() {
  const zip = JSZip();
  const folder = zip.folder('<xsl:value-of select="$title" />');
  const files = [
    <xsl:for-each select="list/file">
     '<xsl:value-of select="." />',
    </xsl:for-each>
  ];
  for(const i in files) {
    const file = files[i];
    const resp = await fetch(file);
    folder.file(file, resp.blob());
    $.fancybox.animate($.fancybox.getInstance().SlideShow.$progress.show(),{scaleX: i/files.length}, 0.1);
  }
  const zipFile = await zip.generateAsync({type: 'blob'});
  saveAs(zipFile, '<xsl:value-of select="$title" />' + '.zip');
  $.fancybox.animate($.fancybox.getInstance().SlideShow.$progress.show(),{scaleX: 0}, 0.1); 
}

$('[data-fancybox="gallery"]').fancybox({
  buttons: [
    "zoom",
    "slideShow",
    "fullScreen",
    "download",
    "downloadAll",
    "close"
  ],
  btnTpl: {
    downloadAll:
      '<a class="fancybox-button fancybox-button--download" title="Download All" href="javascript:downloadAll()">' +
      '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" style="fill:unset; stroke-width:2"/></svg>' +
      '</a>',
 },
});
$('[data-fancybox="gallery"]')[0].click();
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
1
投票

我还进行了一些调整:-)并使用 JS 和 CS 准备生成的配置。主要特点是：

  • 图像...
    • 读取 EXIF（通过 exifr）
    • 在 Google 地图上显示 GPS
    • 查看 Photo Sphere 全景图（通过 Photo Sphere Viewer）
    • 带有可选缓存的可选自动图像缩略图
  • 视频（通过Plyr）可选自动转换SRT字幕到支持的VTT
  • 其他文件（只需查看和下载）
  • 分享画廊链接
  • 在社交网络上分享（通过shareon）
  • 使用灯箱GLightbox
  • HTTP 或 HTTPS（让我们加密支持 - 通过外部工具 - 例如 dehyhlated）
  • 自定义图库标题/图标和更多设置
  • 密码访问（通过 HTTP 基本身份验证）

您可以在https://github.com/forrest79/StaticNginxGallery查看。

0
投票

@squirrel 的精彩答案启发我将这一切捆绑到一个容器中以便于部署。 https://github.com/stuart23/image_server

说明位于自述文件中 - 非常简单：

docker build -t image_server .
docker run -p 8000:8000 -v /local/path/to/gallery:/var/www image_server
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.