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!
Benjamin
Hello @mingxi,
Thumbnails are created by default by strapi:
If you go to media library’s settings, you will notice that option:
2 Likes
Also you can find the pre-configured sizes here:
1 Like
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:
http://localhost:1337/upload/files/:id
You will get all the existing dimensions in “formats” property, click on Summary to view it:
Summary
{
"_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
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. 
Please see attachments!
Thanks in advance!
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! My strap runs again! 
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. 
Now I am faced with this problem again:
Do you have a hint for me? 
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! 
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.
Thanks