Media, S3 and Additional Image Formats

58bitslast year

6

• 

  tinoutilast year

  Isn't this what the

  imageSizes

  option in your upload collection config is for? 🤔

  
  

  (I might be misunderstanding what you're trying to achieve though)

  
  
  

  For example, I have the cloud-storage plugin enabled and configured with GCS, and in my

  imageSizes

  I've got a bunch of different sizes and formats including webp, like:

  
  

  {
    width: 720,
    name: 'thumbnail',
    formatOptions: {
      format: "webp",
    },
  },

  
  
  

  So out-of-the-box, whenever I add a new doc in my Media collection, Payload generates all the various sizes and formats I've specified in my config and upload them to my GCS. No hook or anything required. 🙌

• 

  58bitslast year

  Ouch - I completely misunderstood formatOptions. I thought this was a level up - for

  all

  sizes. Thanks a bunch

  @233209174069084161
  
  

  Okay so this works, but I

  think

  I may have found bug

  @233209174069084161

  @967118574445547650

  @364124941832159242

  . Depending on how you order the image sizes, the last formatOptions setting will apply to any subsequent imageSize. For example....

  
  
  

   imageSizes: [
        {
          name: 'thumbnail',
          height: 400,
          width: 400,
          position: 'center',
        },
        {
          name: 'medium',
          width: 900,
          height: 450,
          position: 'center',
        },
        {
          name: 'medium_webp',
          width: 900,
          height: 450,
          position: 'center',
          formatOptions: {
            format: 'webp',
          },
        },
        {
          name: 'large', // <------- this will output as webp
          width: 1200,
          height: 675,
          position: 'center',
        },
        {
          name: 'large_webp',
          width: 1200,
          height: 675,
          position: 'center',
          formatOptions: {
            format: 'webp',
          },
        },
      ],

  
  
  

  The 'switch' to webp at

  medium_webp

  above - will cause normal

  large

  to output as webp.

  
  
  

  Whereas if you place all of the webp formats at the bottom - the

  large

  format comes out in the source format as expected...

  
  
  

   imageSizes: [
        {
          name: 'thumbnail',
          height: 400,
          width: 400,
          position: 'center',
        },
        {
          name: 'medium',
          width: 900,
          height: 450,
          position: 'center',
        },
        {
          name: 'large',
          width: 1200,
          height: 675,
          position: 'center',
        },
        {
          name: 'medium_webp',
          width: 900,
          height: 450,
          position: 'center',
          formatOptions: {
            format: 'webp',
          },
        },
        {
          name: 'large_webp',
          width: 1200,
          height: 675,
          position: 'center',
          formatOptions: {
            format: 'webp',
          },
        },
      ],

  
  
  @233209174069084161

  @364124941832159242

  - I just went back and looked at the docs again, as well as took a quick look at the Payload source .

  formatOptions

  is only referred to under 'Collection Upload Options' -

  https://payloadcms.com/docs/upload/overview#enabling-uploads

  - and although I really only spent a few minutes looking at the source - it wasn't clear to me how

  formatOptions

  is working inside the imagesSizes array. Wondering if the the fact that

  formatOptions

  works above at all is a quirk of how the settings are read? For example in the Joi schema here

  https://github.com/payloadcms/payload/blob/db7acb4eddb43200ef00cb3a442779b80723313d/src/collections/config/schema.ts#L159

  -

  formatOptions

  are definitely at the upload collection config level and not inside the imageSizes schema. ¯\_(ツ)_/¯ Hope some of this helps - and apologies in advance if I'm miles out.

  
  
  

  Okay I've just seen the config test here

  https://github.com/payloadcms/payload/blob/faef4d5f8eddddecc491c0f6c3a95be701678b58/test/uploads/config.ts

  - and

  formatOptions

  is at both the upload config and imagesSizes levels.

  
  
  

  And I've just seen the source here -

  https://github.com/payloadcms/payload/blob/1fd61fb9898a08b28b22be61d9b64aa58aa61088/src/uploads/imageResizer.ts#L76

  - so - apologies for the spammy messages. I do however, think there might still be a bug as described in the example imageSizes setting above - with the solution for the moment to place all the 'different' formats together, and after the defaults.

• 

  denolfe

  last year

  This is a bit hard to follow. Can you create a reproducible example and open an issue?

• 

  58bitslast year

  Yeah sure. Will open an issue in the morning our time.

  
  
  

  The issue is here

  https://github.com/payloadcms/payload/issues/2526
• 

  denolfe

  last year

  Fixed in main branch, will be in the next release 👍

  
  
  https://github.com/payloadcms/payload/pull/2547
• 

  58bitslast year

  Awesome - thank you!