> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Manage images in a Django app (video tutorial)

[githublink]: https://github.com/cloudinary-devs/my-django-app

## 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]( https://github.com/cloudinary-devs/my-django-app) and see the instructions in the [README](https://github.com/cloudinary-devs/my-django-app/blob/main/README.md).

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

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.### Image handling in Django apps
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=0 :sec=00 :player=cld} | 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
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=0 :sec=42 :player=cld} | 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
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=1 :sec=04 :player=cld} | 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](https://chromewebstore.google.com/detail/cloudinary-media-inspecto/ehnkhkglbafecknplfmjklnnjimokpkg?pli=1) verifies image sizes, highlighting their weightiness. |

### Adding Cloudinary credentials
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=2 :sec=08 :player=cld} | 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](https://console.cloudinary.com/app/home/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](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings.

```python
from dotenv import load_dotenv
load_dotenv()

# Remove this when integrating Cloudinary
# import os 
# BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# MEDIA_URL = '/media/'
# MEDIA_ROOT = ox.path.join(BASE_DIR, 'media')
```

> **INFO**: 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
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=2 :sec=32 :player=cld} | 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. |

```python
# django_app/models.py
from django.db import models
from cloudinary.models import CloudinaryField

class Photo(models.Model):
    image = CloudinaryField('image')
    # Remove the Django image field when integrating Cloudinary
    # image = models.ImageField(upload_to='photos/')
```

### Adjust the `forms.py` file
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=3 :sec=00 :player=cld} | Within the `forms.py` file, import and use the `CloudinaryFileField` for file upload handling and Cloudinary storage. |

```python
# django_app/forms.py
from django.forms import ModelForm     
from cloudinary.forms import CloudinaryFileField
from .models import Photo

class PhotoForm(ModelForm):
    image = CloudinaryFileField()

    class Meta:
        model = Photo
        fields = ['image']
```

### `views.py` remains unchanged
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=3 :sec=18 :player=cld} | 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
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=3 :sec=47 :player=cld} | Replace the HTML image tag `<img src="{{ photo.image.url }}" alt="Image">` with Cloudinary's helper tags for image display. |

```python
{% for photo in photos %}
    <!-- <img src="{{ photo.image.url }}" alt="Image"> -->
    {% load cloudinary %}
    {% cloudinary photo.image %}
{% endfor %}
```

### Transform and optimize images
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=4 :sec=03 :player=cld} | 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. |

```python
{% for photo in photos %}
    <!-- <img src="{{ photo.image.url }}" alt="Image"> -->
    {% load cloudinary %}
    {% cloudinary photo.image quality='auto' width=200 height=200 crop='pad' background='gen_fill:ignore-foreground_true' %}
{% endfor %}
```

> **NOTE**: The `ignore-foreground` option is not used in the latest version of the generative fill feature.

### Previewing the app with Cloudinary integration
{table:class=tutorial-bullets}|  |  
| --- | --- |
|{videotime:id=djangoHelpers :min=4 :sec=51 :player=cld} | 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](https://chromewebstore.google.com/detail/cloudinary-media-inspecto/ehnkhkglbafecknplfmjklnnjimokpkg?pli=1). |
## Keep learning

> **READING**:
>
> * Take a closer look out our [Python SDK](django_integration) offering.

> * Learn more about [optimizing assets](media_optimization#landingpage).

> * Look up all transformations in our [Transformation reference](transformation_reference).

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

  
  
  
    Upload Images in Python
    Upload images to Cloudinary using the Python SDK 
  

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

  
  
  
    Transformation Basics
    Learn the basics of a transformation URL 
  

&nbsp;

&nbsp;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.
&nbsp;