@iles/images dynamic image transform and sources

[spiderpug]

Hi, I played around with the images plugin for quite a while now but I don't seem to understand how to solve my use case:

• Editors specify two image URLs using the frontmatter, e.g. desktop_image: ~/uploads/desktop.jpg and mobile_image: ~/uploads/mobile.jpg.

As I know about the layout of the page, I want to wrap this in an image component ResponsiveImage.vue.

// Image.vue
// Usage (pseudo code):
// <Image :src="frontmatter.desktop_image" :mobileSrc="frontmatter.mobile_image"/>

<script setup lang="ts">
const { src, mobileSrc } = defineProps<{
  src: string;
  mobileSrc?: string;
}>();

const parsedMobileSrc = $computed(() => mobileSrc || src);

const mobile = $computed(() => `${parsedMobileSrc}?preset=mobile&src`);
const tablet = $computed(() => `${src}?preset=tablet&src`);
</script>

<template>
  <ResponsiveImage
    :src="src"
    :mobile="mobile"
    :tablet="tablet"
    sizes="(max-width: 500px) 100vw, (max-width: 800px) calc(100vw - 20px)"
  />
</template>

// ResponsiveImage
// just builds the source set with the different image URLs and renders an Img tag

My problem is that the ResponsiveImage component does not receive the parsed URLs, so this is not going through the image presets plugin. Instead, it shows only the raw attribute values:

<img src="~/uploads/desktop.jpg" srcset="~/uploads/mobile.jpg?preset=mobile&src 500w, ...>

I tried to add this to the iles.config.ts, but it seems to work only for static URLs and when rendering the ResponsiveImage component directly.

  vue: {
    template: {
      transformAssetUrls: {
        tags: {
          ResponsiveImage: ["src", "mobile", "tablet"],
        },
      },
    },
  },

Any tips or hints how to make this work in my dynamic setup are very much appreciated.

[ElMassimo]

Hi Robert!

See this answer for a general overview of ways to reference images.

The resolveImage programmatic API in vite-plugin-image-presets can apply presets to a dynamic path, and you can use it in extendFrontmatter.

[spiderpug]

Hi Máximo!

Thank you for the link and the insights.

For future reference, I was able to solve this based on the input you provided using the following logic:

1. My page-like document:

---
title: "My Blog Post"
subtitle: "Testing different mobile and desktop images"
image: ~/assets/uploads/desktop.jpg
mobileImage: ~/assets/uploads/mobile.jpg
---

2. Helper for image processing:

// image-helper.ts
import path from "path";

export const extendedFilename = (file: string): string => {
  const filename = file.replace("~/", "").replace("@/", "");

  return path.join(process.env.PWD, "src", filename);
};

3. Hook to preprocess pages:

import images, { widthPreset, densityPreset } from "@islands/images";
import { extendedFilename } from "./src/image-helper";
import { RawPageMatter } from "iles";

// simplified demo code:
const imageDef = images({
  desktop: widthPreset({
    widths: [1440],
    formats: {
      jpg: { quality: 80 },
    },
  }),
  // ...
}

export const extendFrontmatter = async (
  frontmatter: RawPageMatter,
  filename: string
): Awaitable<void | RawPageMatter> => {
  let image = frontmatter.image;

  if (!image) {
    return frontmatter;
  }

  // this is important, otherwise the image is not found!
  image = extendedFilename(image);

  frontmatter.image = (
    await imageDef.api.resolveImage(image, {
      preset: "desktop",
    })
  )[0];

  // same block again, with the frontmatter.mobileImage attribute
  // ...

  return frontmatter;
};

export default imageDef;

// iles.config.ts
import { defineConfig } from "iles";
import images, { extendFrontmatter } from "./images.config";

export default defineConfig({
  extendFrontmatter(fm, file) {
    return Promise.all([extendFrontmatter(fm, file)]).then(() => fm);
  },
  // ...
}

3. Component rendering those pages:

<template>
  <div v-for="page in pages" :key="page.filename">
    <Image
      :src="slide.image.src"
      :tablet="slide.tabletImage.src"
      :mobile="slide.mobileImage.src"
    />
  </div>
</template>