How to resize uploaded images to custom sizes

Sorry for asking maybe stupid questions, but where and how has the described procedure to be applied:

I Would like to apply alternative sizing to the images.


You create the ./config/plugins.js or any of the environment options (using the NODE_ENV value you wish to use) eg:

  • ./config/plugins.js for global setting
  • ./config/env/production/plugins.js for only the NODE_ENV=production environment
  • ./config/env/customenv/plugins.js for only the NODE_ENV=customenv environment

thanks for the hint. i tried, but it did not have any effect.

so here is maybe a more exact description of what i tried so far:

using strapi 3.3.4

  • created a file plugins.js in myproject/config with the following content:

module.exports = {
upload: {
breakpoints: {
xlarge: 2560,
large: 1600,
medium: 1024,
small: 512,
xsmall: 128
}
}
}

using strapi 3.5.4 on node

  • created a file plugins.js in myproject/extensions/upload/config with the same content as on the other try.

rebuild in between, reuploaded the images, of course.

I am also facing the same problem.

My folder structure is the following:

  • my-project (root)
    – extensions
    — upload
    ---- config
    ----- plugins.js

In plugins.js:

module.exports = {
  upload: {
    breakpoints: {
      xlarge: 1920,
      large: 1000,
      medium: 750,
      small: 500,
      xsmall: 64
    }
  }
}

I am not seeing any change on the image size while fetching the data through Graphql (screenshot attach)

Screenshot 2021-04-13 at 08.10.24|690x288

Any help would be greatly appreciated.

hey, maybe i’m missing something, but i’m still unable to change the resolution but i’m able to run a console.log from ./config/plugins.js. thanks for your help.

I am using ReactJS i have 8mb picture in the backend and when I get the pictures from the be this image comes again with size of 8mb, how can consume this [small,medium,large] images in my react app, to reduce downloading time. @DMehaffy

I also followed the docs with no success.
Got it working using an override as described here:

Original file: https://github.com/strapi/strapi/blob/35aafde2288e6858a9b1757cf2555a8561421140/packages/strapi-plugin-upload/services/image-manipulation.js

Change the path to utlis to your node_modules like:

const {
  bytesToKbytes
} = require('strapi-plugin-upload/utils/file');

and update breakpoints.

Is this how we should do it? Why is the documented solution not working? Are we missing something?

did you find the solution?