By Carlos Tenorio Pérez

My Name is Carlos Tenorio Pérez. I'm software engeniering in Palma de Mallorca. I'm working on Babtec and I write about Django, Angular and web development.

Continue the Django Girls Tutorial. Chapter 1 - Images

 March 25, 2018, 2:18 p.m.

In the network there are a lot of tutorials to be able to learn Django from scratch and even without any level of programming. One of the best known and most popular is the Django Girls tutorial.

Personally I think the tutorial is well explained and is perfect to start programming in Python and the Django framework, but from my point of view would change the order in which some chapters are seen, for example, the deployment of our web application.

This section, which includes version control systems such as Git, would be much better to see at the end of the tutorial and going in detail because we need so much to do our deploy, since for a person who is starting in the Web development is not easy to perform.

Once you do the tutorial you can have a personal blog in which to add, view, edit and manage the publications. At the end of the tutorial they recommend us to continue with the training and encourage us to improve the blog. And from there someone could ask. And now, what? How I follow this?

Well the answer is confusing, because you can add countless things :) and that is why I want to make a series of tutorials where I will explain how to continue the tutorial by adding features to our blog.

Before starting the first chapter I have to mention that all the blog code and the examples that are shown in this tutorial can be found in the repository: https://github.com/CarlosTenorio/myblog

Chapter 1 (Part 1)

Images - Database

One of the next steps to work within our blog is the insertion of images. These images can be of two types, the images for example that we insert next to each publication or the images that we want to put on our website without the need to insert them in the database (database).

To clarify more the differences, the images that we will put next to each Publication will be declared in our model (models.py) with the type ImageField

models.py

Post class (models.Model):
    ...
    image = models.ImageField (upload_to = 'posts /', blank = True, null = True)

We will add the line image = ... at the end of our Post class.

The upload_to attribute allows us to indicate the subdirectotio where we will save the images that we insert, this will be done automatically by Django, we should not worry about this.

Then, to make the changes in our database effective, we prepare the migration.

python manage.py makemigrations

And then we apply the migration.

python manage.py migrate

Now we can enter http://localhost/ admin and try to create a new publication. There we will see a new field where we can insert an image.


The next step is to see how to insert the image within our publication. For this we open the file post_detail.html and insert the following lines of code.

{% if post.image%}
     <img class = "img-fluid col-12" src = "{{post.image.url}}" />
{% endif%}

 In this way we will only paint the image if it exists. We will also apply a couple of classes of Bootstrap to make it responsive mobile and in the src attribute we will link the url of the image that we have stored in the database.

Now we can go to our website and check that the image has been inserted correctly.