How can I add a image on a post in django?

Question

I want to create an upload image button in django admin post models. When an image is uploaded, will be nice to be displayed on both blog card and then on post detail on the website. Here is my code until now. How should I do this in order to make this work?

Here is my blog.html page

<div class="container">
   <div class="row">
      <!-- Blog Entries Column -->
      <div class="column">
         {% for post in post_list %}
         <div class="card mb-4">
            <div class="card-body">
               <img class="card-image">{{post.header_image}}</img>
               <h2 class="card-title">{{ post.title }}</h2>
               <p class="card-text text-muted h6">{{ post.author }} | {{ post.created_on}} </p>
               <p class="card-text">{{post.content|slice:":200"}}</p>
               <a href="{% url 'post_detail' post.pk  %}" class="btn-grey">Află mai multe</a>
            </div>
         </div>
         {% endfor %}
      </div>
   </div>
</div>

Here is my post detail.html

<div class="container">
   <div class="detail-row">
      <div class="card-detail-body">
         <h1> {{ post.title }} </h1>
         <p class=" text-muted">{{ post.author }} | {{ post.created_on }}</p>
         <p class="card-text ">{{ post.content | safe }}</p>
      </div>
   </div>
</div>

Here is models.py

from django.db import models
import datetime
from django.contrib.auth.models import User

STATUS = ((0,  "Draft"), (1, "Published"))

class Post(models.Model):
    title = models.CharField(max_length=1048)
    slug = models.SlugField(max_length=1048)
    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='blog_posts')
    related_name=('blog_posts')
    content = models.TextField()
    status = models.IntegerField(choices=STATUS, default=0)
    created_on = models.DateTimeField(auto_now_add=True)
    
    def __str__(self):
        return self.title

And here are views.py

def blogPage(request):
    floaterForm = FloaterForm()
    post_list = Post.objects.all().order_by('-created_on')
    context = {
        'flForm' : floaterForm,
        "post_list": post_list
    }
    return render(request, "blog.html", context)

def post_detail(request, pk):
    post= Post.objects.get(pk=pk)
    context = {
        'post' : post
    }
    return render(request, "post_detail.html", context)

score 0 · Answer 1 · answered Feb 01 '22 at 18:12

You've to create one field inside your models.py file like this

image = models.ImageField(upload_to="your_upload_dir_name")

then you've to set your media configuration now you can access your image inside your template like this

<img src="{{ post.image.url }}">

score 0 · Answer 2 · answered Feb 01 '22 at 19:01

0

You firstly have to create the image field in Django. For example

blog_image = models.ImageField(upload_to="/media/blog_images")
#This /image/blog_images is the image directory.

It will save the image URL in the model field. Then you can use this image URL in the src of the image tag.

The html code should be like this.

<form method = "post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Upload</button>
</form>

And in the views, your code will be like this. You can change it according to your configuration.

if request.method == 'POST':
    form = BlogsForm(request.POST, request.FILES)
    if form.is_valid():
         form.save()

Then you have to set the media configuration in your server configuration and in settings.py. I mostly use Nginx, so I do this.

#settings.py
MEDIA_ROOT =  BASE_DIR / 'media'
MEDIA_URL = '/media/'

#ngnix
location /media {
    autoindex on;
    alias /path to media directory of project;
}

If still you got confuse, tell me in the comments. Thanks

answered Feb 01 '22 at 19:01

Huzaifa Zahoor

325
2
13

I had success with creating the upload button, but how it's possible to show them on the website? in blog.html and in post_details.html – Anca Zpz Feb 02 '22 at 14:19
I don't use a form inside website to create the blog posts, I am just showing the models directly in django admin. Now I have another issue, it does not follow the path – Anca Zpz Feb 02 '22 at 15:05
Changes I made blog_images = models.ImageField(upload_to="media/blog_images", null=True) in models.py and in blog.html – Anca Zpz Feb 02 '22 at 15:08
Okay, then use form method=post on HTML, and read it on views. – Huzaifa Zahoor Feb 10 '22 at 05:38

How can I add a image on a post in django?

2 Answers2