How to programatically create image?

[cawa-93]

I need to programmatically create multiple images on build. I'm missing a sample in the documentation how to do this. In my case, For example, I have /images/original-picture.png and /favicon.ts in project root.

// favicon.ts
export const url = '/favicon.ico'

export default () => ''

How to use ImageMagick programmatically (or whatever) to manipulate original-picture.png and output it in favicon.ico ?

[oscarotero]

The short answer: you can use this experimental plugin that not only generates all favicons but also generate the html tags to import them.

If you want to use the imagick plugin, you can do something like this in your _config (I didn't test it):

// Load the imagick plugin
site.use(imagick());

// Assign the `imagick` variable to the original image with all transformations
const transforms = [
  {
    size: [16, 16],
    format: "ico",
  }, {
    size: [32, 32],
    format: "png",
    sufix: "-x32",
  },
];
site.data("imagick", transforms, "/images/original-picture.png");

[cawa-93]

This is actually very cool 🤩

[cawa-93]

Does multilanguage plugin work for asset pages?

I am trying to create two images for two languages ​​based on data. I have

// _data.ts
export const uk = {
  name: "Олександр Козак",
};

export const en = {
  name: "Alex Kozack",
};

// image.png.tsx
export const lang = ['uk', 'en']

export default async function ({name}) {

    console.log({name}) // {name: undefined} // 👈

    return generateImage({name})
}

And it output single /image.png but I expected two /image.png (because uk is default language) and /en/image.png.

It works as I expected if I rename image.png.tsx to image.tsx and generate it like html.

[cawa-93]

Yeap. I should have added extension:

// _config.ts
site.use(multilanguage({
  extensions: ['.png', '.tsx'], // 👈
}));