Manage images in a Django app (video tutorial)

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

Tutorial contents

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

Image handling in Django apps

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

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

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

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 Programmable Media Dashboard.

Modify the models.py file

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

3:00	Within the forms.py file, import and use the CloudinaryFileField for file upload handling and Cloudinary storage.

views.py remains unchanged

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

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

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.

Previewing the app with Cloudinary integration

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

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.