将文件夹中的图像加载到 HTML 页面，以便在添加到文件夹时自动显示在 gallery/album 中

Question

我最近发现并购买了一个漂亮的 HTML5 Ajax 模板，它在页面的主要内容部分包含一个图库部分，如下所示：

<!-- Main Content -->

<div class="ajax-inserted-content">

    <!-- Section Gallery -->
    <section class="section gallery grid layout-4-col">

        <div class="container">
            <div class="row">

                <!-- Gallery Item -->
                <div class="col-3 col-lg-4 col-md-6 col-sm-12">

                    <div class="gallery-item">
                        <div class="gallery-img">
                            <img data-lazy-image
                                 src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg=="
                                 data-src="img/demo-img-2.jpg" alt="Demo img">
                        </div>
                    </div>

                </div>
                <!-- /Gallery Item -->

现在，我可以通过 copy/pasting“图库项目”部分和添加图片 src 等方式将图片手动添加到图库和 HTML 文件中，但我有整个文件夹充满图像（都是 .jpg，但标题不同）所以这不是一个选项。

大约十年前，我有一个 Flash 网站，它有一个画廊，该画廊是从文件夹中填充的——据我所知——一个 XML/PHP 组合。无需编辑实际的 HTML 文档。我希望这个现代摄影模板有一个（简单的）PHP/XML 选项，但是唉。模板的开发者也帮不了我，所以如果我不能自动填充画廊和相册，我现在只能使用一个漂亮但无用的模板。

因此我的问题如下：

是否有可自定义的工具（如插件？）可以为我自动执行此操作，我可以安装服务器端，这样我就有一个所见即所得的选项来上传图像（拖放、从文件夹上传等）并指向到需要显示图像的 HTML page/code/gallery 部分？
如果选项 1 不可用，那么是否有 ready-made XML/JSON/PHP 脚本可以在任何地方使用，只需最少的自定义编码（可能只需要上传图像）文件并编辑 XML 文件以使图像正确显示在 HTML 图库页面中）?
如果选项 1 和 2 不可行，是否有人对此问题有解决方案？

我知道有很多选择，并且发现了各种 simple-looking (PHP/JS) 脚本和代码声称可以做到这一点，但它们都涉及创建一个简单的 HTML 页面和画廊从头开始。我不知道如何自定义所有代码以与我的 HTML/CSS/JS 网站一起使用...

所以我非常希望你的建议能给我一个 budget-friendly 解决方案，否则我将不得不给我买一个带有自动图库脚本的全新模板 built-in

Answer 1

PHP方式

从 scadir() 生成的 PHP 循环将使这非常容易。 https://www.php.net/manual/en/function.scandir.php

我假设 src="data:image/svg+xml;base64,PH... 是占位符，每张图片都相同

<div class="ajax-inserted-content">
  <!-- Section Gallery -->
  <section class="section gallery grid layout-4-col">
   <div class="container">
     <div class="row">
     <?php
        $imagesPath = '/imgportfolio/';
        // this is assuming your website has a folder at the document-root level called 'portfolio-images'.
        // document-root means where your top level index.html (or index.php) is.
        $dir = $_SERVER['DOCUMENT_ROOT'] .  $imagesPath; 
        $files = scandir($dir);
        $exts = ['png','jpg','jpeg','gif','bmp','webp'];
        foreach ($files as $file) {
          if ($file === '..' || $file === '.') continue;  
          $ext = explode(".", $file);
          $ext = strToLower($ext[count($ext)-1]);
          if (!in_array($ext, $exts)) continue; // if not a valid image file, skip 
     ?>
  <div class="col-3 col-lg-4 col-md-6 col-sm-12">
     <div class="gallery-item">
       <div class="gallery-img">
         <img data-svg="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" src="<?php echo $imagesPath . $file;?>" alt="Demo img">

         <!-- <img data-lazy-image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" data-src="<?php echo $imagesPath . $file;?>" alt="Demo img"> -->
       </div>
     </div>
   </div>
        
    <?php }?>

此外，为了测试（如果您怀疑 PHP 错误），您可以将其放在页面顶部

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?>

(我不想用)PHP方式

有一些实验性功能可以使用 javascript 读取文件系统。在大多数情况下，它们并没有被所有现代浏览器所接受（IE 根本不允许使用它们），并且它们引入的复杂性超出了您可能想要处理的范围。

但是，过去我曾使用此技巧来创建一个简单的投资组合。它要求您（重新）命名您的图像以可预测的数字顺序排列，例如

1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, 7.jpg, etc...

在您的情况下，实现将如下所示：

<div class="ajax-inserted-content">
    <section class="section gallery grid layout-4-col">
        <div class="container">
            <div class="row" id='gallery-items'>
            </div>
        </div>
    </section>
</div>
<script>
function doPortItem(n) {
    let img = document.createElement('img');
    img.src = './imgportfolio/' + n + '.jpg';
    img.addEventListener('load', () => {
        let div = `<div class="col-3 col-lg-4 col-md-6 col-sm-12">
     <div class="gallery-item">
       <div class="gallery-img">
         <img data-lazy-image data-src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzIDIiPjwvc3ZnPg==" src="${img.src}" alt="Demo img"> 
       </div>
     </div>
   </div>`;
        document.querySelector('#gallery-items').innerHTML += div;
        doPortItem(++n)
    })
}
doPortItem(1)
</script>

注意事项 - 文件必须以 1.jpg 开头并且必须是连续的。它循环遍历数字，直到找到不存在的 X.jpg，然后停止。此外，这会在与 .html 文件相同的目录中查找名为 imgportfolio 的文件夹。已经过测试并且有效！

将文件夹中的图像加载到 HTML 页面，以便在添加到文件夹时自动显示在 gallery/album 中

Load images from folder into HTML page for display in gallery/album automatically as they are added to folder

html

javascript

php

automation

gallery