Inserting an image between text in django when both text and image are in the model

Question

I'm looking for a way of inserting an image in between the text of my blog made with django. What I want to achieve is something like in the following image:

As you will see the text is divided in two columns. There are titles, links an image and its caption.

Right now my model is like:

class Post(models.Model):
    body_col1 = models.TextField()
    body_col2 = models.TextField()
    body_col1_html = models.TextField(editable=False, blank=True, null=True)
    body_col2_html = models.TextField(editable=False, blank=True, null=True)
    image = image = models.ImageField()

The text is transformed to markdown so I can add css format in my admin panel. So what I did was to render the variables in the html template using tags:

<div class="column-left">
    {{ object.body_col1_html|safe}}
</div>
<div class="column-right">
    {{ object.image}}
    {{ object.body_col1_html|safe}}
</div>

Doing that I have the two columns and the image on the top of the second column.

I'm looking for a way to remove the two fields for the text, so I have only one text field, where I can add my image inside the text. I have a javascript function that automatically divides the text into two columns. I would like to have something like this:

<div class="columns">
    {{ object.body|safe}}
</div>

where the body field already have the image inside (the same way I can add css or links).

What I tried so far is to add the tag in the text box like {{object.image}} but, since I'm using markdown, it converts to text so instead of my image I got a useless string.

Is there a way to add the image from the body text box in the admin panel? Could I call a template tag from there?

The code of the django blog is here.

Answer 1

I think what you need is called rich text editor, it will allow you to build external html pages however you want and safe them into a singe field in your database. One of the most popular editors is CKeditor, I suggest you take a look at at django-ckeditor