Skip to main content

How to resize before uploading pictures in Django

Comments

5 comments

  • Loic Verger Del Bove

    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_models

    This 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
  • Cemal

    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
  • Loic Verger Del Bove

    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
  • Cemal

    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
  • Loic Verger Del Bove

    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.