Upload the image in 3 formats only

System Information
  • Strapi 3.2.5:

Hi Guys,

How can I save an image in three formats “small”, “medium” and “thumbnail” when uploading it? The default setting saves more than 3 formats. :thinking:

Thanks in advance!

@mingxi there was a related topic a few weeks ago that may help you out here: Customization of Strapi upload plugin logic

1 Like

@DMehaffy Thank you very much!

If you need only thumbnail, medium, small, then try to delete the large one from breakpoints, by using extensions

1 Like

@sunnyson Good evening! Thank you very much for having time to answer my question again. :slight_smile:

I have removed “large” from the “formats” array. Unfortunately I don’t know how to remove the original image from the upload process.
If I comment the line “// await strapi.plugins.upload.provider.upload(fileData);” away, the original picture is not saved, but the “url” in the table “upload_file” is not entered in the database. :thinking:

2020-11-11 19_35_00-uploads

P.S.: Actually, I can also enter the “url” in the table “upload_file” later, but it wouldn’t be a nice method.

I will look tomorrow how you can remove the original image properly.

1 Like

Thank you very much! :+1:

1 Like

I faced the same problem I’ve gone through to every question but seem to can’t get the answer!
I solve it by install strapi-plugin-responsive-image extension.

you can follow the instruction and login to your admin dashboard you will see the option to delete image format you don’t need!
Hope this will help!

1 Like

Hi @mingxi & @sunnyson,

Did you finally find a solution? :grin:
Thanks a lot.

Hello,

sorry for the late reply. :blush:

I finally have time to work on my project again. First I deleted two breakpoints (“medium”, “large”) because I only need “small”.

Then I optimized the original image using a method that I derived from “const generateThumbnail = async file => {...}” in “image-manipulation.js”.

// CUSTOM: GENERATE IMAGE - OPTIMIZE ORIGINAL FILE
const ORIGINAL_RESIZE_OPTIONS = {
  width: 800,
  height: 600,
  fit: 'inside',
};

const optimizeOriginal = async file => {
  if (!(await canBeProccessed(file.buffer))) {
    return null;
  }

  const { width, height } = await getDimensions(file.buffer);

  if (width >= ORIGINAL_RESIZE_OPTIONS.width || height >= ORIGINAL_RESIZE_OPTIONS.height) {

    const newBuff = await resizeTo(file.buffer, ORIGINAL_RESIZE_OPTIONS);

    if (newBuff) {

      const { width, height, size } = await getMetadatas(newBuff);

      return {
        name: file.name,
        hash: file.hash,
        ext: file.ext,
        mime: file.mime,
        width,
        height,
        size: bytesToKbytes(size),
        buffer: newBuff,
        path: file.path ? file.path : null,
        alternativeText: file.alternativeText,  // ORIGINAL PROPERTY
        related: file.related                   // ORIGINAL PROPERTY
      };
    }
  }

  return null;
};

and do not forget:

module.exports = {
  getDimensions,
  optimizeOriginal,   // CUSTOM: GENERATE IMAGE - OPTIMIZE ORIGINAL FILE
  generateThumbnail,
  generateResponsiveFormats,
  bytesToKbytes,
  optimize,
};

Then in the “Upload.js” in “async uploadFileAndPersist(fileData, { user } = {}) {...}”:

    ...
    } = strapi.plugins.upload.services['image-manipulation'];    

    // ---------------- CUSTOMIZATION (BEGIN) ---------------- //
    // CUSTOM: GENERATE IMAGE - OPTIMIZE ORIGINAL FILE
    const fileDataOptimized = await optimizeOriginal(fileData);

    if (fileDataOptimized) {
      fileData = fileDataOptimized;      
    }
    // ---------------- CUSTOMIZATION (END) ------------------ //

    await strapi.plugins.upload.provider.upload(fileData);
    ...

It works! I think this is a good solution! :beer:

Best regards and thanks to everyone! :+1:

Hi! How i can get links with optimize images?(. I’m only getting the link of the original image for some reason(.

And how do we do that? The OP answer is rather complicated.