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

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 >
   <div >
      <!-- Blog Entries Column -->
      <div >
         {% for post in post_list %}
         <div >
            <div >
               <img >{{post.header_image}}</img>
               <h2 >{{ post.title }}</h2>
               <p >{{ post.author }} | {{ post.created_on}} </p>
               <p >{{post.content|slice:":200"}}</p>
               <a href="{% url 'post_detail' post.pk  %}" >Află mai multe</a>
            </div>
         </div>
         {% endfor %}
      </div>
   </div>
</div>

Here is my post detail.html

<div >
   <div >
      <div >
         <h1> {{ post.title }} </h1>
         <p >{{ post.author }} | {{ post.created_on }}</p>
         <p >{{ 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)

CodePudding user response：

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 }}">

CodePudding user response：

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