How to resize uploaded images to custom sizes

Questions and Answers
1

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.

2

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
3

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

4

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.

5

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.

6

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.

7

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

8

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

Screenshot 2021-09-15 100327
Screenshot 2021-09-15 100327762×276 13.8 KB

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?

9

did you find the solution?

10

for those still stuck with this:
the strapi docs describing how to configure the upload plugin is accurate and works 100% how ever existing or already uploaded images will not be resized. If you need your new config applied to existing images then you’ll need to delete them and then re-upload.