Upload the image in 3 formats only

Questions and Answers
1
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!

2

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

1 Like
3

@DMehaffy Thank you very much!

4

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

1 Like
5

@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.

6

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

1 Like
7

Thank you very much! :+1:

1 Like
8

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!

answer
answer1920×904 84.4 KB

1 Like
9

Hi @mingxi & @sunnyson,

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

10

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:

11

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

13

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