How to insert multiple images into a blog post not File field upload (Django blog)

Question

I am a semi-noob to Django web development. I've managed to add a File field that actually allows me to upload an image into the post (The image is displayed in post-list and post-detail) but what if I wanted to add several images in a post?

I am currently writing a tutorial post and would like to insert images under each instruction for the benefit of the user. I don't want the tutorials to be purely text, how do I go about doing this?

Below is my models.py

from __future__ import unicode_literals
from django.db import models
from django.core.urlresolvers import reverse
from django.utils import timezone
#from taggit.managers import TaggableManager


class Post(models.Model):
    author = models.ForeignKey('auth.User')
    title = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    published_date = models.DateTimeField(blank=True, null=True)
    image = models.FileField(null=True, blank=True)

    #tags = TaggableManager()

    def publish(self):
        self.published_date = timezone.now()
        self.save()

    def __str__(self):
        return self.title

    def approved_comments(self):
        return self.comments.filter(approved_comment=True)

    class Meta:
        ordering = ["-pk"]

class Comment(models.Model):
    post = models.ForeignKey('blog.Post', related_name='comments')
    author = models.CharField(max_length=200)
    text = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    approved_comment = models.BooleanField(default=False)

    def approve(self):
        self.approved_comment = True
        self.save()

    def approved_comments(self):
        return self.comments.filter(approved_comment=True)

    def __str__(self):
        return self.text

And here's my forms.py

from django import forms
from .models import Post, Comment

class PostForm(forms.ModelForm):

class Meta:
    model = Post
    fields = ('image','title', 'text')

class CommentForm(forms.ModelForm):

    class Meta:
        model = Comment
        fields = ('author', 'text',)

Here's a screen shot of my blog post, as you can see it's just posting the link when I include the HTML file

My blog post

And finally below is a snippet of the post detail;

 {% extends 'blog/base.html' %} {% block content %} &nbsp; {% if user.is_authenticated %} <a class="btn btn-default pull-left" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a> {% endif %} <div id="post_det"> {% if post.published_date %} <div class="date"> {{ post.published_date }} </div> {% endif %} <h1 class="post-title">{{ post.title }}</h1> <img src="{{post.image.url}}" class="img-responsive blog-img"/> &nbsp; <p class="post_text">{{ post.text|linebreaksbr }}</p> </div> &nbsp; <hr> <a class="btn comment_button" href="{% url 'add_comment_to_post' pk=post.pk %}">Add comment</a> <div> &nbsp; {% for comment in post.comments.all %} {% if user.is_authenticated or comment.approved_comment %} <div class="comment"> <div class="date"> {{ comment.created_date }} {% if not comment.approved_comment %} <a class="btn btn-default" href="{% url 'comment_remove' pk=comment.pk %}"><span class="glyphicon glyphicon-remove"></span></a> <a class="btn btn-default" href="{% url 'comment_approve' pk=comment.pk %}"><span class="glyphicon glyphicon-ok"></span></a> {% endif %} </div> <strong>{{ comment.author }}</strong> <p>{{ comment.text|linebreaks }}</p> </div> {% endif %} {% empty %} <p>No comments here yet :(</p> {% endfor %} </div> {% endblock %} 

This seems like such a menial task and I am struggling to insert a simple image under some text. Can anybody help? Will greatly appreciate it.

Thank you

Sam

Answer 1

You could add the images manually in the text field as html like <img src="#"> . Then in the template use the "safe" filter. So post.text|safe . That will render your html.

But that only solves a part of your problem, because you need an easy way of uploading images to the server and inserting them into blog posts.

What you really need is a WYSIWYG editor. Here's a list https://djangopackages.org/grids/g/wysiwyg/

Django-ckeditor and tinymce are both pretty good. You can find tutorials for how to set those up in their respective docs.