Handling CMS Images with Directus and Astro

[simple fjord]

Hey all,
I'm trying to decide on the best approach in using (and optimizing) images in an Astro SSG Website, that are uploaded to a Directus CMS.

1. My initial approach was to access the images via a shared folder during build time and do the optimizations with the experimental assets feature. This however has some limitations since in need to dynamically import the image files and don't know the file extensions beforehand. Directus also disencourages the reliance on a shared folder and instead suggests to download the images via the api, to ensure permissions are applied.
2. Directus on the other hand also provides an image transformation Feature, where one can also define default transformations that will be created on file upload. I however don't want users to request the images from the CMS API, rather i'd like to download the used images during build time. and provide them as public assets. I'm not sure if there is a best practice to achieve such preloading in Astro and would probably build a small util that writes the downloaded resources to the file system.

Has anyone experience with such a use case?

[pulsar hamlet]

No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[frosty beacon]

Hi, I have worked with directus before, but not with an astro project.
Astro should download and transform them on build.

astro image:
https://docs.astro.build/en/guides/integrations-guide/image/#src

astro imagetools:
https://astro-imagetools-docs.vercel.app/en/components/Picture#src

directus image object:

"image": {
   "id": "cfb76166-0b1d-47ba-8b92-4089ae22c09a",
   "filename_disk": "cfb76166-0b1d-47ba-8b92-4089ae22c09a.jpg",
   "title": "xx"
}

p.s I have my directus media library linked to a cdn.

[simple fjord]

Thanks for sharing your experience 🙂

But if I'm not mistaken the image Integration would also transform the image external image. If the images are already optimized by the Directus API I'd rather not optimize them again to keep the build time low. Also the information on dealing with remote images is based on the image Integration (@astro/image) which eventually will be replaced by the assets feature, if I'm not mistaken. So I'd rather pick a solution that is not dependent on it 🙂

[frosty beacon]

Check,
Then you could write an import function and create your own picture element.

something like:

import fs from "node:fs";
import path from "node:path";
export const cwd = process.cwd().split(path.sep).join(path.posix.sep);

async function download(url, filename) {
  const fullPath = [cwd, "public", "files", filename].join(path.posix.sep);

  try {
    if (fs.existsSync(fullPath)) {
      return "/assets/images/" + filename;
    }
  } catch (err) {
    console.error(err);
  }
  const buffer = Buffer.from(await (await fetch(url)).arrayBuffer());

  fs.writeFileSync(fullPath, buffer);
  return "/assets/images/" + filename;
}  

p.s I dont know if this is the best way.

I also saw a new extension for image import on build:
https://www.npmjs.com/package/astro-preload

[simple fjord]

Yeah right, I thought of something along those lines 🙂
I've also seen the preload plugin, but I suspect it is a little to specialized on the image component, which I want more controll of. But it's a pretty good example and their solution is quite similar to your suggestion, if I recall correctly 🙂