Upload Multiple Images to a Django Model without plugins

Upload Multiple Images to a Django Model without plugins

Upload Multiple Images to a Django Model without plugins

In this article, I am going to show you how to add multiple images to a Django model without any plugins. It’s better to keep the project simple and avoid any extra plugins which can cause unexpected errors during production or disable some of the functionalities. By using a small trick in Django admin you will able to upload multiple images to a particular model.

Now, I assume that you already activated your virtual environment so, let’s create a new Django project named “mysite” and a new app named “posts”.

Since we use images in our project, we have to configure settings.py in order to serve static and media files and display templates. Update the TEMPLATES configuration:

settings.py

Now, we should add static and media files configurations at the end of this file:

settings.py

Great! It’s time to add our models into models.py and there will be two models in our case. The first model is “Post” which includes three fields just to show basic information about the post on the home page.

models.py

As you see from the code snippet above we have a title, description, and image fields in the Post model. You can change FileField to ImageField it’s up to you since this tutorial covers multiple files and images, FileField is probably the right choice for now.

In Django, you can’t store multiple images in one field, so we are going to add a new model named “PostImage” to store all images and at this time we will use the ForeignKey field to create a relationship between these two models. Update your models.py by adding “PostImage” model:

models.py

Once you updated models, it’s time to migrate our models and create a new superuser in order to access Django admin.

Great! Now, the main part is starting, open your admin.py to make configurations. We will create a single Django admin from two different models. The default Django administration comes with a concept of inlines, so if you have a one-to-many relationship you can edit the parent and its children on the same page or we can say admin interface has the ability to edit models on the same page as a parent model. However, you are limited in a way that you can’t have inlines inside inlines and nested one-to-many relations, so to avoid that we are using StackedInline class to edit “PostImage” model inside “Post” model.

admin.py

Configure your admin.py as shown the above and you can go and check your admin now by clicking add new post. It should look like the image below:

Stacked Inline Django

Stacked Inline Django

As you see you can add how many images you want into a Post model and all these images will belong to a specific Post model with the help of ForeignKey.

Now,  navigate to your views.py to create views in order to render templates so we can see the created posts.  In detail_view we are filtering “PostImage” objects by post foreign key, so related images will be populated inside detail of post. Simply add the following views, it’s not complicated just basic level views to populate images and posts :

views.py

Next, open urls.py to configure URLs and also add media URL configuration to serve images:

urls.py

Finally, create a new folder named “templates” in your project, and then we will add three HTML files just to show posts and details in the browser.

base.html

We are using Bootstrap just to give a simple design to our project.

blog.html

detail.html

In detail.html I added a carousel to show related images for a specific post. You can see the indicators of the carousel (<ol>) surrounded with for loops and I used for loop counter to detect active carousel item. The same logic applied to carousel items to detect active images.

Great! Now, you can create a new post and check it on the home page. Once you click the details you will able to see related images in a carousel.

I hope it helps you to organize your multiple images and also it keeps the project simple. Maybe there are a lot of plugins on the internet that can handle multiple images but as I said before these plugins can cause errors or disable some of the functionalities of the project. Simple is more!

You can find source code in the following link:

https://github.com/raszidzie/Multiple-Images-Django-Tutorial/

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

How I Built an Admin Dashboard with Python Flask

In this article, I will share the how I built an admin dashboard. I will give a step by step guideline on how I built this application with Python ...

Development With LAMP Stack Illustrated Address Book Project

Lamp stack Address Book Project is a sample software development project which is to showcase how to develop a web application utilizing Linux, ...

How to customize exceptions in python

In this tutorial we will look at the purpose of exception, types of exceptions, why it is important to include exceptions in your python programs and ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy