Image transformations

[paulrobertlloyd]

Fixes #394

[aciccarello]

I tried this branch locally via the file upload UI and it worked well enough. One reason I had suggested a more general image transformation was because there are so many options like image quality and whether or not to include metadata, but the simplicity of a config options feels really approachable with options for other config values later.

I noticed that squoosh seems to output still smaller files even with the quality set to 80 (I think that's sharp's default). I'd be curious what the difference is.

I also realized while looking at the code that all images would use the "photo" config and that you wouldn't have different sizes for images in articles vs images in notes. I think one config is fine but it was slightly confusing having that on the postType config.

[paulrobertlloyd]

I also realized while looking at the code that all images would use the "photo" config and that you wouldn't have different sizes for images in articles vs images in notes.

Ah crap, that wasn’t the intention! I wanted to check for file type, but have instead used the post type; I got that mixed up. The idea is that you could do something like the following:

postTypes: {
  article: {
    name: "Blog post",
    media: {
      resize: {
        width: 1024
      }
    }
  },
  photo: {
    name: "Photography",
    media: {
      resize: {
        width: 2400
      }
    }
  }
}

Although, I’m now wondering if it’s possible for media transformations to be keyed of field names, something like:

postTypes: {
  article: {
    name: "Blog post",
    fields: {
      content: { // Not sure how images can be includes in content yet!
        resize: { width: 1600 },
        required: true
      },
      featured: {
        resize: { width: 1200, height: 630 },
      }
    }
  },
  photo: {
    name: "Photography",
    fields: {
      photo: {
        resize: { width: 2400 },
        required: true
      }
    }
  }
}

[paulrobertlloyd]

Thinking about this a bit more, I think processing options need to be at the media endpoint level, as opposed to something set for each post and/or post fields.

Firstly, I don’t think its possible, but also the media endpoint should be post type agnostic; it just gets a media file, uploads it, and returns the URL where it’s been stored.

So, the proposed configuration format would be as follows:

export default {
  publication: {
    me: "https://website.example",
  },
  plugins: [
    // "@indiekit/endpoint-media", Don’t need to add to `plugins` as installed by default 
  ],
  "@indiekit/endpoint-media": {
    "imageProcessing": {
      "resize": {
        "width": 320,
        "height": 320,
      },
    },
  },
};

@aciccarello Thoughts? This is the last feature I want to add before releasing Beta 10 hopefully this week – it’ll be a juicy one!

[paulrobertlloyd]

Going to merge this and ship with Beta 10. More options can be added, and refinements made, but need to use this in anger to know where to focus efforts, and to get feedback from users.