How to generate html page for each image file?

[cawa-93]

I have a lots of images structured in lots of dirrectories. Basically what I want is to create a html page for each image to just display optimized image.
I created a custom page loader for image files.

// _config.js

import lume from "lume/mod.ts";
import imagick from "lume/plugins/imagick.ts";
import {JsxEngine} from "lume/plugins/jsx.ts";
import picture from "lume/plugins/picture.ts";
import resolveUrls from "lume/plugins/resolve_urls.ts";

const site = lume();

site.use(picture());
site.use(imagick());
site.use(resolveUrls());

// This loader should just generate HTML for image.
function loader(path) {
  return {content: `<img src="${path}" imagick="avif webp png 300"/>`};
}

site.loadPages(['.jpeg', '.png'], loader,  new JsxEngine(site.src("/")))

The build correctly processes all files, creates HTML for each image. However, I'm missing something, and I don't understand what, because the imagik plugin can't find or process the image correctly.

Error: Error processing page
- page: /img/інше/IMG_2321.png
- processor: imagick
...
Caused by Error: UnableToOpenBlob '<div><img src="C:/Users/kozac/dev/blog_kyivska_zefirka/img/інше/IMG_2321.png" imagick="avif webp png 300"/></div>': No such file or directory @ error/blob.c/OpenBlob/3569

And in output I'm getting html files for each image but I'm not getting optimized images itself.

[oscarotero]

This is because your loader returns html code, not the image content.

You can create a function to return the images and use a page generator to create the html pages. Example (not tested):

// _config.js

// function to return an array of all images loaded
site.data("get_images", function () {
    return site.pages
        .filter((page) => page.data.url.match(/\.(jpg|jpeg|png)$/))
        .map((page) => page.data.url);
});

// images.tmpl.js

export default function* ({ get_images }) {
    for (const image of get_images()) {
        yield {
          url: image + ".html",
          content: `<img src="${image}" imagick="avif webp png 300"/>`
        }
    }
}

Probably this could be even easier if the search plugin had a function like search.files() to return non-html pages.

[cawa-93]

But how I shoud "tell" lume to look at the images because site.pages is empty array by default? Should I add site.loadAssets(['.png', '.jpg']) into _config.js?

Ok. Sorry. I just forgot that image plugin do it for me.

[oscarotero]

No problem. Happy to help.

[cawa-93]

If I generate pages ulrs in format filename.png.html like your example:

yield {
  url: image + ".html", // 👈
  layout: 'withMenu.jsx',
  content: `<img src="${image}" imagick="avif webp png 300"/>`
}

Then in nav.menu() that pages always have data as undefined. And only if I chage url format to filename.png/index.html data will exist.

yield {
  url: image + "/index.html", // 👈
  layout: 'withMenu.jsx',
  content: `<img src="${image}" imagick="avif webp png 300"/>`
}

But if you use this format, image files are not created. I suspect it's because of a path conflicts

[oscarotero]

Ok, it seems a bug in the nav plugin with pages without pretty urls.
As long as it doesn't get fixed, you can use this workaround:

yield {
  url: image.replace(/\.(jpg|jpeg|png)$/, "/index.html"),
  layout: 'withMenu.jsx',
  content: `<img src="${image}" imagick="avif webp png 300"/>`
}

[oscarotero]

I just made some changes in the nav plugin and it should work fine now.
I'll be off for 2 weeks, so won't release new versions of Lume. But you can upgrade to the development version of lume with deno task lume upgrade --dev.