How do I create thumbnails?

Hi Guys,

I want to create thumbnails. Normally, when a user uploads an image (filename.jpeg), a reduced file (filename-thumb.jpeg - 100 x 100 px) is saved on the server.

Does anyone know how I can code?

Thanks in advance!


Hello @mingxi,
Thumbnails are created by default by strapi:

If you go to media library’s settings, you will notice that option:



Also you can find the pre-configured sizes here:

1 Like

:+1: First of all, thank you very much! I’ll test it tonight, then I’ll get in touch!

With pleasure. When you access an image by its ID:


You will get all the existing dimensions in “formats” property, click on Summary to view it:

    "_id": "5fa51b4d393946501e261939",
    "name": "0063b2cc64d976ac36f211442466d0ac.png",
    "hash": "0063b2cc64d976ac36f211442466d0ac_c4792655d7",
    "ext": ".png",
    "mime": "image/png",
    "size": 14.98,
    "width": 1138,
    "height": 302,
    "url": "/uploads/0063b2cc64d976ac36f211442466d0ac_c4792655d7.png",
    "formats": {
        "thumbnail": {
            "name": "thumbnail_0063b2cc64d976ac36f211442466d0ac.png",
            "hash": "thumbnail_0063b2cc64d976ac36f211442466d0ac_c4792655d7",
            "ext": ".png",
            "mime": "image/png",
            "width": 245,
            "height": 65,
            "size": 5.68,
            "path": null,
            "url": "/uploads/thumbnail_0063b2cc64d976ac36f211442466d0ac_c4792655d7.png"
        "large": {
            "name": "large_0063b2cc64d976ac36f211442466d0ac.png",
            "hash": "large_0063b2cc64d976ac36f211442466d0ac_c4792655d7",
            "ext": ".png",
            "mime": "image/png",
            "width": 1000,
            "height": 265,
            "size": 25.49,
            "path": null,
            "url": "/uploads/large_0063b2cc64d976ac36f211442466d0ac_c4792655d7.png"
        "medium": {
            "name": "medium_0063b2cc64d976ac36f211442466d0ac.png",
            "hash": "medium_0063b2cc64d976ac36f211442466d0ac_c4792655d7",
            "ext": ".png",
            "mime": "image/png",
            "width": 750,
            "height": 199,
            "size": 18.03,
            "path": null,
            "url": "/uploads/medium_0063b2cc64d976ac36f211442466d0ac_c4792655d7.png"
        "small": {
            "name": "small_0063b2cc64d976ac36f211442466d0ac.png",
            "hash": "small_0063b2cc64d976ac36f211442466d0ac_c4792655d7",
            "ext": ".png",
            "mime": "image/png",
            "width": 500,
            "height": 133,
            "size": 11.72,
            "path": null,
            "url": "/uploads/small_0063b2cc64d976ac36f211442466d0ac_c4792655d7.png"
    "provider": "local",
    "related": [],
    "createdAt": "2020-11-06T09:45:49.329Z",
    "updatedAt": "2020-11-06T09:45:49.329Z",
    "__v": 0,
    "id": "5fa51b4d393946501e261939"
1 Like


:+1: thanks again for the hints, now I’m trying to integrate it into my program.

A new problem: I can’t manage to overwrite my upload plug-in. Can you tell me where the problem is The server does not want to start although I copied the two original files (Upload.js & image-manipulation.js) into it. :thinking:

Please see attachments!

Thanks in advance!

2020-11-07 14_11_22-Window

E:\CMS\Strapi\project_2021>strapi start 
[2020-11-07T13:21:57.268Z] debug ⛔️ Server wasn't able to start properly.
[2020-11-07T13:21:57.271Z] error Error: Cannot find module '../utils/file'
Require stack:
- E:\CMS\Strapi\project_2021\extensions\upload\services\image-manipulation.js
- E:\CMS\Strapi\project_2021\node_modules\strapi\lib\load\load-files.js
- E:\CMS\Strapi\project_2021\node_modules\strapi\lib\core\load-apis.js
- E:\CMS\Strapi\project_2021\node_modules\strapi\lib\core\load-modules.js
- E:\CMS\Strapi\project_2021\node_modules\strapi\lib\Strapi.js
- E:\CMS\Strapi\project_2021\node_modules\strapi\lib\index.js
- E:\CMS\Strapi\project_2021\node_modules\strapi\lib\commands\start.js
- C:\Users\Dingding\AppData\Roaming\npm\node_modules\strapi\bin\strapi.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1065:15)
    at Function.Module._load (internal/modules/cjs/loader.js:911:27)
    at Module.require (internal/modules/cjs/loader.js:1125:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (E:\CMS\Strapi\project_2021\extensions\upload\services\image-manipulation.js:14:27)
    at Module._compile (internal/modules/cjs/loader.js:1236:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1257:10)
    at Module.load (internal/modules/cjs/loader.js:1085:32)
    at Function.Module._load (internal/modules/cjs/loader.js:950:14)
    at Module.require (internal/modules/cjs/loader.js:1125:19)

Yes, the problem here is that Upload.js is requiring a module from ../utils/file, that one is located in the /node_modules/strapi-plugin-plugin/utils/file and doesn’t exist in your /extensions/upload/ folder.

So here you have 2 solutions: copy the /node_modules/strapi-plugin-upload/utils folder to /extensions/upload/utils or modify the path of the required file in Upload.js and point it to /node_modules/strapi-plugin/upload/utils/file so you could avoid some problems with feature updates.

1 Like

Thank you so much! :+1: :+1: :+1: My strap runs again! :grinning:
I’ll test if I can get the thumbnails right away! I’ll call you right back!

1 Like

Excuse me, I keep asking you. :snail:
Now I am faced with this problem again:

Do you have a hint for me? :thinking:

Sorry! Yesterday I was not allowed to continue writing because I am a “new user”.

I have my strapi project on v. 3.2.5 upgraded. It actually saves thumbnails! :slight_smile:

Unfortunately I have not yet solved my problem “Environment Production Setting for Upload”. But this topic can be closed!

Thank you very much and best regards!

1 Like

Hi I have a project that we are uploading some Pdf and PPtx files. But don’t see information about thumbnails in the json when a route is called with an ID.

What could be the reason ?

Please advice.

I do have the “responsive friendly upload” turned on.