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:

Change the path to utlis to your node_modules like:

const {
} = 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?

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.