Programmable Media

Manage images in a Django app (video tutorial)

Last updated: Feb-26-2024

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 methods.

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!

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

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, replace the Django image field fields = ['image'] with the CloudinaryFileField for file upload handling and Cloudinary storage. Include fields='__all__' to encompass all associated model fields in the form. Apply Cloudinary options, like tags and format, to the image field. Other options you can add include resize, crop and special effects.

views.py remains unchanged

Jump to this spot in the video  3:42 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  4:11 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:26 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

Jump to this spot in the video  5:14 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...

Find Your Credentials
Learn how to find your cloud name, API key and API secret
Optimization Tips
Tips for delivering optimized images
Transformation Basics
Learn the basics of a transformation URL

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: