How to resize before uploading pictures in Django
I am trying to resize the pic before uploading a pic in Django. Here I am using the CloudinaryField for image data.
class Image(models.Model):
name = models.CharField(max_length=100, blank=True, null=True)
image = CloudinaryField('image', default='/media/default_pic.jpg', width_field=1280,height_field=720)
- What I want:
Pictures will be saved as resized such as 1280*720.
- What actually happened:
Cannot resize when i upload the image
- What I have tried:
I have tried set keyword arguments like width_field and height_field which did not work. When you pass an integer like width_field=1280, height_field=720, it will throw an error said requiring string instead of int. But if you change to string '1280' and '720' it does not work at all.
Is there any method to set the size of the picture when uploading?
I know it is possible to resize on HTML easily but just wonder if it is possible to do it before uploading.
-
Hi Yiwei,
Thanks for reaching out.
If you want to add transformations during the upload, you will need to use the
CloudinaryFileField
class as mentioned here: https://cloudinary.com/documentation/django_image_and_video_upload#django_forms_and_modelsThis is our model.py:
from django.db import models from cloudinary.models import CloudinaryField class Photo(models.Model): image = CloudinaryField('image')
And this is our forms.py:
from django.forms import ModelForm from cloudinary.forms import CloudinaryFileField from .models import Photo class PhotoForm(ModelForm): class Meta: model = Photo image = CloudinaryFileField( attrs = { 'style': "margin-top: 30px" }, options = { 'tags': "directly_uploaded", 'crop': 'limit', 'width': 1000, 'height': 1000, 'eager': [{ 'crop': 'fill', 'width': 150, 'height': 100 }] })
While the eager will create a 150x100px derived image, the transformation 'crop': 'limit', 'width': 1000, 'height': 1000 will resize the image to a 1000x1000px when saving it.
Hope it helps.
Best,
Loic
0 -
Hello,
I am trying a similar approach but not using django forms. I am using django rest_framework.
How can I add eager options to the image property without using django forms.
image = CloudinaryField('image')
I tried transformations on image property in my class in models.py and it worked! But eager option still not working.
image = CloudinaryField('image', eager=[{'width': '50', 'height': '50', 'crop':'crop'}], transformation={'width': '100', 'height': '100', 'crop':'fill', 'radius':'20'}, folder='/', format="webp",)
Thank you.
0 -
Hi Cemal,
Could you share more details on the issue you are having? If you can share your cloud, the name of the file you want to upload, and any logs you have, that could be helpful to understand the issue here.
Thanks in advance.
Best,
Loic
0 -
Hello again,
I have a django rest framework backend that is working through Serializer/ModelViewSet method. And also has an Angular frontend. I am uploading the file (not only the file directory) from Angular to Django make the upload to Cloudinary.
When I upload a file the thing that I expect is to create two files in my cloudinary account which one is the original one in a private type and the other one is eagerly transformed one during upload in a public type stored in two seperated folders.
I am not using the explicitly cloudinary.uploader.upload method on my backend. I have just set the config of cloudinary in my settings and set my property (image) as a CloudinaryField in my class.
When I set my image property as below, I am expecting the result as explained scenario above.
image = CloudinaryField('image', eager=[{'width': '50', 'height': '50', 'crop':'crop', 'folder':'/'}], folder='/demo',type='private', format="webp")I set notification_url option in my property to got http response as below.
image = CloudinaryField('image', eager=[{'width': '50', 'height': '50', 'crop':'crop', 'folder':'/'},], folder='/demo', type='private', format="webp", notification_url='https://hookb.in/8P1LZE9PBnfBWWYjnoB7')Http response was,
HTTP HEADERS Request Response
accept: */*
content-length: 1115
content-type: application/json
host: hookb.in
user-agent: Cloudinary
x-cld-signature: ********************
x-cld-timestamp: 1621436259
QUERY STRING
—
BODY
{
"notification_type": "upload",
"timestamp": "2021-05-19T14:57:30+00:00",
"request_id": "7233619e2d35eeeb333ca593ad39e8fd",
"asset_id": "b77f81d9e480da2aa4e4a1975dede613",
"public_id": "demo/y65huyzx2bjpqyoqowpa",
"version": 1621436249,
"version_id": "24991f321648bccaaef1c2f3e62db32c",
"width": 1920,
"height": 1080,
"format": "webp",
"resource_type": "image",
"created_at": "2021-05-19T14:57:29Z",
"tags": [],
"pages": 1,
"bytes": 266680,
"type": "private",
"etag": "48e3ea3a634233fcf05bc2b852f2f75e",
"placeholder": false,
"url": "http://res.cloudinary.com/cmlmngr/image/private/s--KTAasPeM--/v1621436249/demo/y65huyzx2bjpqyoqowpa.webp",
"secure_url": "https://res.cloudinary.com/cmlmngr/image/private/s--KTAasPeM--/v1621436249/demo/y65huyzx2bjpqyoqowpa.webp",
"original_filename": "a",
"original_extension": "jpg",
"eager": [
{
"transformation": "c_crop,h_50,w_50",
"width": 50,
"height": 50,
"bytes": 3994,
"format": "webp",
"url": "http://res.cloudinary.com/cmlmngr/image/private/c_crop,h_50,w_50/v1621436249/demo/y65huyzx2bjpqyoqowpa.webp",
"secure_url": "https://res.cloudinary.com/cmlmngr/image/private/c_crop,h_50,w_50/v1621436249/demo/y65huyzx2bjpqyoqowpa.webp"
}
]
}Result: The file that I want to upload appears in my Cloudinary "demo" folder in original size 1920x1080. The format, type, folder options in my property worked as expected and the image transformed by this requested options. But there is no second file in "/" directory in w_50 x h_50 cropped format which expected to be created with eager.
When I added a transformation option to my model, It also worked fine but eager still did not work.
image = CloudinaryField('image', eager=[{'width': '50', 'height': '50', 'crop':'crop', 'folder':'/'},], transformation={'width': '100', 'height': '100', 'crop':'fill', 'radius':'20'}, folder='/demo', type='private', format="webp", notification_url='https://hookb.in/8P1LZE9PBnfBWWYjnoB7')When I change the notification_url option with the same endpoint to the eager_notification_url I also had no http response from webhook.
image = CloudinaryField('image', eager=[{'width': '50', 'height': '50', 'crop':'crop', 'folder':'/'},], transformation={'width': '100', 'height': '100', 'crop':'fill', 'radius':'20'}, folder='/demo', type='private', format="webp", eager_notification_url='https://hookb.in/8P1LZE9PBnfBWWYjnoB7')
Briefly, other options in my model(image) work shine and bright but I could not able to trigger the eager option to create a pre-transformed copy of my original file.
Thank you.
0 -
Hi Cemal,
When using eager transformations, the only image you will see in your Media Library is the original one. You can see a list of the derived image, images created either eagerly or on-the-fly, by clicking on `Edit` when hovering the image then on the top right corner, you can click on `View derived image`.
In the response of your call, you can see:
"eager": [
{
"transformation": "c_crop,h_50,w_50",
"width": 50,
"height": 50,
"bytes": 3994,
"format": "webp",
"url": "http://res.cloudinary.com/cmlmngr/image/private/c_crop,h_50,w_50/v1621436249/demo/y65huyzx2bjpqyoqowpa.webp",
"secure_url": "https://res.cloudinary.com/cmlmngr/image/private/c_crop,h_50,w_50/v1621436249/demo/y65huyzx2bjpqyoqowpa.webp"
}This means that the 50x50px image has been generated as well and you can deliver it using the URL https://res.cloudinary.com/cmlmngr/image/private/c_crop,h_50,w_50/v1621436249/demo/y65huyzx2bjpqyoqowpa.webp.
Regarding the notification_url, I can see a notification with a code 200 and the following payload:
{"notification_type":"upload","timestamp":"2021-05-19T05:33:26+00:00","request_id":"27914d33534ad27c153ead035bc8637f","asset_id":"5ee25d2b929286838c85f1e211207755","public_id":"demo/ylfxo5jfunu1vgohixzc","version":1621402405,"version_id":"518871957ca631428696bd2c9e09c212","width":100,"height":100,"format":"webp","resource_type":"image","created_at":"2021-05-19T05:33:25Z","tags":[],"pages":1,"bytes":4878,"type":"upload","etag":"c101574a9a2869b37456a6c60a473b6b","placeholder":false,"url":"http://res.cloudinary.com/cmlmngr/image/upload/v1621402405/demo/ylfxo5jfunu1vgohixzc.webp","secure_url":"https://res.cloudinary.com/cmlmngr/image/upload/v1621402405/demo/ylfxo5jfunu1vgohixzc.webp","original_filename":"a","original_extension":"jpg","eager":[{"transformation":"c_crop,h_50,w_50","width":50,"height":50,"bytes":3772,"format":"webp","url":"http://res.cloudinary.com/cmlmngr/image/upload/c_crop,h_50,w_50/v1621402405/demo/ylfxo5jfunu1vgohixzc.webp","secure_url":"https://res.cloudinary.com/cmlmngr/image/upload/c_crop,h_50,w_50/v1621402405/demo/ylfxo5jfunu1vgohixzc.webp"}]}
So you should have seen it on your webhook as well.
Hope that helps.
Best,
Loic
0
Post is closed for comments.
Comments
5 comments