Trying to make 'presets'...not sure how...

[rchrdnsh]

Found the custom directives section and I'm trying to follow along to make some 'presets' because they are being used...like...a LOT!

Anyway, did this so far...prolly not right however...does not work...what should I change? no srcset directive it seems...do I just add it in somewhere?

import { resize, format, srcset } from "imagetools"

function mobileSizes(ctx) {
  // we would like to reuse the existing directives as much as possible
  const resizeTransform = resize({ width: [`240`, `280`, `320`, `360`, `480`, `960`] }, ctx);
  const formatTransform = format({ format: `jpg` }, ctx);
  const srcsetTransform = format({ srcset: true }, ctx);

  if(!resizeTransform) return

  // return the transform function
  return function mobileSizes(image) {
      // apply both transformations and return the result
      return formatTransform(resizeTransform(srcsetTransform(image)));
  };
}

export { mobileSizes }

// trying to return this:
// import Image from "$images/image.jpg?w=240;280;320;360;480;960&jpg&srcset"

// I assume it works like this as well:
// import Image from "mobileSizes(image)"

// not sure...

[JonasKruckenberg]

Yeah so this feature is poorly documented and also rather unintuitive. Your resizing functions are considered because they take a configuration and operate on the image, while the srcset directive is considered an outputFormat because it takes the images metadata and returns a string.
So having a combined directive is not possible currently.
I'm thinking about another rework to make directives more composable however...

[rchrdnsh]

yeah, I'm at the point where my image processing pipeline, even using imagetools, is quite complex, in my opinion...and I still have yet to implement blur-up placeholders!

Here is one markdown file where I define all the images I need to output and all the file types:

---
order: 2
status: marquee
category: music
title: Bash
artist: RYKR
genre: Electro
bpm: 124 bpm
artwork: /music/bash/bash.jpg
alt: Bash artwork.
background: /music/bash/bash-bg.jpg
file: /music/bash/bash.mp3
description: What streamers and confetti sound like if they have souls.
release: 2019-02-01
---

<script context="module">
  import BashAVIF from "$images/music/bash.jpg?w=240;360;480;960;1280;1920&avif&srcset";
  import BashJPG from "$images/music/bash.jpg?w=240;360;480;960;1280;1920&jpg&srcset";

  import BashMarqueePortraitAVIF from "$images/music/bash-marquee-portrait.jpg?w=240;280;320;360;480;960&avif&srcset";
  import BashMarqueeLandscapeAVIF from "$images/music/bash-marquee-landscape.jpg?w=960;1280;1920;3840&avif&srcset";

  import bash_marquee_portrait_jpg from "$images/music/bash-marquee-portrait.jpg?w=240;280;320;360;480;960&jpg&srcset";
  import bash_marquee_landscape_jpg from "$images/music/bash-marquee-landscape.jpg?w=960;1280;1920;3840&jpg&srcset";
  
  metadata.srcset_avif = BashAVIF;
  metadata.srcset_jpg = BashJPG;

  metadata.marquee_portrait_avif = BashMarqueePortraitAVIF;
  metadata.marquee_landscape_avif = BashMarqueeLandscapeAVIF;

  metadata.marquee_portrait_jpg = bash_marquee_portrait_jpg;
  metadata.marquee_landscape_jpg = bash_marquee_landscape_jpg;
</script>

...and THAT is not even complete, as their in one more image I have yet to deal with...basically it boils down to having to have at least two crops of every image (in this case, 3 images x 2 = 6 images) then having two different file types for each image, and they have to be separate (as far as i know) to make the <source> element happy...it ends up being...a lot...

here is the <picture> tag in one svelte component where this stuff is being utilized...

<picture class='picture'>

      <source media="(orientation: portrait)" srcset={marquee_portrait_avif} sizes='100w' type='image/avif'/>
      <source media="(orientation: landscape)" srcset={marquee_landscape_avif} sizes='100w' type='image/avif'/>

      <source media="(orientation: portrait)" srcset={marquee_portrait_jpg} sizes='100w'/>
      <source media="(orientation: landscape)" srcset={marquee_landscape_jpg} sizes='100w'/>

      <img
        src={image}
        alt={alt}
        class:soul-img={$theme === 'soul'}
        loading='lazy'
        decoding='async'
      />

    </picture>

...I'm starting to try and think of ways to automate this process, and most of this code will be the same in every markdown file for that content type...including cropping, maybe...I think ideally I just define the 3 images in markdown and my processing pipeline would do the rest for me...quite far away from that at the moment, however 🤣

[JonasKruckenberg]

Yep, Im doing a refactor now that should remove the difference between directives and output formats and make it easier to reuse them, so hopefully your preset problem will be adressed then!