Image & Video APIs
Menu

Manage images in a Django app (video tutorial)

Last updated: Nov-24-2025

Overview

In this tutorial, you'll learn how to build a Django application that seamlessly uploads images to Cloudinary. It will automatically store the image delivery URLs in your database and demonstrate how to transform and efficiently deliver these images using the Cloudinary Django helper classes.

To follow along with the tutorial, clone the my-django-app GitHub repo and see the instructions in the README.

Video tutorial


This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

View the code
You can find the code from this tutorial in GitHub.

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Image handling in Django apps

Jump to this spot in the video 0:00 Utilize Cloudinary's Django helper methods for seamless image management. These methods handle automatic tasks like uploading, cloud storage, AI-driven smart cropping and resizing, and image compression. Cloudinary automatically saves delivery URLs in the database.

This tutorial demonstrates integrating Cloudinary into an existing Django app.

Django app structure overview

Jump to this spot in the video 0:42 The app comprises Python files: forms.py, models.py and views.py, along with HTML templates: upload.html and display.html. settings.py and urls.py contain code for configuring upload and storage settings.

Explore the original Django app

Jump to this spot in the video 1:04 The app facilitates selecting and uploading images from the file system, displaying all stored images in the database. Images within the pre-Cloudinary are distorted to fit their designated areas. Additionally, the Media Inspector chrome extension verifies image sizes, highlighting their weightiness.

Adding Cloudinary credentials

Jump to this spot in the video 2:08 The first step to integrating Cloudinary is adding your credentials. Update the settings.py file by removing code handling media files and incorporating the dotenv library to automatically load credentials from the .env file. Create a .env file in the django_app folder and paste the Cloudinary environment variable from your Dashboard.
Note
You can no longer access your full credentials directly from the Dashboard. Find your Cloud name on the Dashboard, and all credentials, including API Key, API Secret, and API environment variable, on the API Keys page of the Cloudinary Console Settings.
Important
When writing your own applications, follow your organization's policy on storing secrets and don't expose your API secret.

Modify the models.py file

Jump to this spot in the video 2:32 In the models.py file, replace the Django image field image = models.ImageField(upload_to='photos/') with the CloudinaryField. This grants access to Cloudinary functionalities, including uploading to the cloud and storing image delivery URLs in the database.

Adjust the forms.py file

Jump to this spot in the video 3:00 Within the forms.py file, import and use the CloudinaryFileField for file upload handling and Cloudinary storage.

views.py remains unchanged

Jump to this spot in the video 3:18 No modifications are needed in the views.py file. The CloudinaryField addition in models.py file ensures that valid upload submissions are saved to Cloudinary and their URLs are saved in the database.

The display function in views.py retrieves all Photos table images and displays them using the display.html template.

Update the display.html file

Jump to this spot in the video 3:47 Replace the HTML image tag <img src="{{ photo.image.url }}" alt="Image"> with Cloudinary's helper tags for image display.

Transform and optimize images

Jump to this spot in the video 4:03 The Cloudinary helper methods have already streamlined upload, storage and image retrieval and display. Now, apply a transformation to ensure your images fit the desired area, utilizing AI for outpainting and optimizing to reduce their file sizes.
Note
The ignore-foreground option is not used in the latest version of the generative fill feature.

Previewing the app with Cloudinary integration

Jump to this spot in the video 4:51 Re-run the app to see the effects of Cloudinary integration. Images now fit their frames without distortion because Cloudinary's AI expands narrow images to fill the specified area perfectly. Additionally, confirm reduced image sizes using the Media Inspector.

Keep learning

Related topics

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

AltStyle によって変換されたページ (->オリジナル) /

✔️ Feedback sent!

✖️
How helpful was this doc page?

Thanks for submitting your rating. We got it!
We'd love to hear more. Tell us what you liked and how we can make this page even better:

*

Cloudinary is committed to protecting your information security. For details, see our privacy policy.

For additional assistance, open a support request.

Error

Unfortunately there's been an error sending your feedback.

Rate this page: