How to display multiple images in a django template img element - django

I am having a challenge displaying multiple images users post to one img template element, for one reason if i try fetching images with the default related name it wouldn't show in the template and i wonder what i am doing wrong. Can anyone be of help!
Here is my model for post.
class Post(models.Model):
page = models.ForeignKey(Page, on_delete=models.CASCADE, related_name="page")
username = models.ForeignKey(settings.AUTH_USER_MODEL,on_delete=models.CASCADE ,related_name="page_user")
description = models.TextField(max_length=500, blank=True)
video = models.FileField(upload_to="PageVideos", blank=True)
pic = models.ImageField(blank=True)
date_posted = models.DateTimeField(auto_now_add=True)
tags = models.CharField(max_length=100, blank=True)
class Mete:
ordering = ['-date_posted']
def __str__(self):
return self.description
class PostImage(models.Model):
#page = models.ForeignKey(Page, on_delete=models.CASCADE, related_name="pg")
post = models.ForeignKey(Post, default=None, on_delete=models.CASCADE)
images= models.ImageField(upload_to="postimages/")
Here is my Detail view
def page_detail(request,id):
post = get_object_or_404(Post, id=id)
photos = PostImage.objects.filter(post=post)
context = {
'post':post,
'photos':photos
}
return render(request, 'page/detail.html',context)
These my Template to display users images
<div class="p-3 border-b dark:border-gray-700">
{{ post.description }}
</div>
<div uk-lightbox>
<div class="grid grid-cols-2 gap-2 p-2">
{% for p in photos.images_set.all %}
<a id="images" href="{{ p.images.url }}" class="col-span-2" >
<img src="{{ p.images.url }}" alt="" class="rounded-md w-full lg:h-76 object-cover">
</a>
<a href="">
<img src="" alt="" class="rounded-md w-full h-full">
</a>
<a href="" class="relative">
<img src="" alt="" class="rounded-md w-full h-full">
<div class="absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl"> + see more </div>
</a>
{% endfor %}
</div>
</div>

your photos is a list you dont need reverse m2m (the "images_set") simply change this in html
....
<div class="grid grid-cols-2 gap-2 p-2">
{% for p in photos %}
....
for optimize you can do this
from django.http import Http404
...
def page_detail(request,id):
try:
# with prefetch you do only one sql request
post = Post.objects.select_related('images_set').get(id=id)
expect Post.DoesNotExist as err:
raise Http404(err)
context = {
'post': post,
'photos': post.images_set.all()
}
return render(request, 'page/detail.html',context)

Related

How to hide image from Django template?

I'm trying to make a blog website. On the all post page, it renders all the posts from the database. But not all post has its feature image. So, I'm trying to hide those image sections that don't have any featured images.
Here is blog/model.py
class Article(models.Model):
STATUS_CHOICES = (
('draft', 'Draft'),
('published', 'Published'),
)
author = models.ForeignKey(Profile, null=True, blank=True, on_delete=models.SET_NULL)
title = models.CharField(max_length=200)
slug = AutoSlugField(populate_from='title', unique=True, null=False, db_index=True)
excerpt = models.CharField(max_length=60)
featured_image = models.ImageField(upload_to="posts", null=True, blank=True, default="default.jpg")
content = FroalaField()
created = models.DateTimeField(auto_now_add=True)
last_update = models.DateTimeField(auto_now=True)
publish = models.DateTimeField(default=timezone.now)
status = models.CharField(max_length=10, choices=STATUS_CHOICES, default='draft')
Here is blog/view.py
# display all blog posts
def posts(request):
all_posts = Article.published.all()
context = {'all_posts': all_posts}
return render(request, 'blog/posts.html', context)
# Single post
def single_post(request, slug):
post = Article.objects.get(slug=slug)
context = {
'post': post,
}
return render(request, 'blog/single-post.html', context)
Here is blog/url.py
urlpatterns = [
path('', views.posts, name="posts"),
path('post/<slug:slug>/', views.single_post, name="single-post"),
]
Here is post.html
{% for post in all_posts %}
<li class="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg">
<article aria-labelledby="question-title-81614">
<a href="{{ post.get_absolute_url }}">
<!-- author details & option menus -->
<div class="flex space-x-3">
<div class="flex-shrink-0">
<!-- author image -->
<img
class="h-10 w-10 rounded-full"
src="{{ post.author.profile.avatar.url }}"
alt=""
/>
</div>
<!-- author name and publish date time -->
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-gray-900">
Dries Vincent
</p>
<p class="text-sm text-gray-500">
<time datetime="{{ post.publish.date }}"
>{{ post.publish.date }}
</time>
</p>
</div>
</div>
<div class="mt-4 space-y-4">
{# show image if there is a feature image #}
{% if post.featured_image.url %}
<!-- article images -->
<img
class="object-cover w-full h-64 bg-center rounded-lg"
src="{{ post.featured_image.url }}"
alt="{{ post.title }}"
/>
{% endif %}
</div>
<!-- article title -->
<h1
id="question-title-81614"
class="mt-4 text-xl font-medium text-gray-900"
>
{{ post.title }}
</h1>
</a>
</article>
</li>
{% endfor %}
Here is the image for a better understanding
post.html template page
This looks more like a wrong default, if no image is provided you should set it to None/NULL:
class Article(models.Model):
# &vellip;
featured_image = models.ImageField(upload_to='posts', null=True, blank=True, default=None)
you can then render it with a condition like:
{% if post.featured_image %}
<!-- article images -->
<img
class="object-cover w-full h-64 bg-center rounded-lg"
src="{{ post.featured_image.url }}"
alt="{{ post.title }}"
/>
{% endif %}
You can set the Articles with a default.jpg to None for example with a query in the Django shell:
Article.objects.filter(
featured_image='default.jpg'
).update(featured_image=None)
While defining your model, null=True and Blank=True also set the default to None.
If you're going to render Alf those that have featured_picture, you'll need to add a little if post.featured_picture, or whatever your image field is named, and you're good to go.

How can i delete a single comment for a user inside of a post in Django

I'm trying to add a delete button for a single comment of current user inside a post. I tried the function below in my views.py , but it comes back as error: Page not found (404)
Request Method: GET
Request URL: http://127.0.0.1:8000/comments/15/delete/
Raised by: feed.views.comment_delete
Any ideas what I'm doing wrong ?
views.py
#login_required
def comment_delete(request, pk):
comment = get_object_or_404(Comments, pk=pk)
if request.user.id == comment.username_id:
Comments.objects.get(pk=pk).delete()
messages.error(request, f'Comment Deleted')
return redirect('post-detail', pk=pk)
models.py
class Post(models.Model):
description = models.TextField(max_length=255)
pic = models.ImageField(upload_to='path/to/img', blank=True)
date_posted = models.DateTimeField(default=timezone.now)
user_name = models.ForeignKey(User, on_delete=models.CASCADE)
tags = models.CharField(max_length=100, blank=True)
def __str__(self):
return self.description
def get_absolute_url(self):
return reverse('post-detail', kwargs={'pk': self.pk})
class Comments(models.Model):
post = models.ForeignKey(Post, related_name='details', on_delete=models.CASCADE)
username = models.ForeignKey(User, related_name='details', on_delete=models.CASCADE)
comment = models.CharField(max_length=255)
comment_date = models.DateTimeField(default=timezone.now)
post_detail.html
<h4 class="comment_text">Comments</h4>
<div class="row">
<div class="col-xl-9 col-md-10 m-auto order-xl-2 mb-0 mb-xl-0">
{% if post.details.all %}
<div class="card card-signin my-0">
{% for detail in post.details.all %}
<div class="card-body">
<a href="{{ detail.username.profile.get_absolute_url }}">
<img src="{{ detail.username.profile.image.url }}" class="rounded-circle" width="30" height="30" alt="">
</a>
<a class="text-dark" href="{{ detail.username.profile.get_absolute_url }}"><b>{{ detail.username }}</b></a>
<a class="comment_delete" href="{% url "comment-delete" user.id %}">delete</a>
<br><small>{{ detail.comment_date }}</small><br><br>
<p class="card-text text-dark">{{ detail.comment }}</p>
</div>
<hr class="my-1">
{% endfor %}
</div>
{% else %}
<p>No comments to show!</p>
{% endif %}
</div>
In your template you write {% url "comment-delete" user.id %} when in fact the argument that the view expects is the comments id/pk. Change it to {% url "comment-delete" detail.pk %}

How to display the user Avatar on all templates (django) i use base.html

Hello everyone I want to finish my project using django
The problem in how to make avatar image appear on all project templates
If an avatar is displayed in one template, for exemple: www.site.com/index
the other does not work www.site.com/page2/page3......
help me please cz i get tired for this
here is my model.py
class author(models.Model):
name = models.ForeignKey(User, on_delete=models.CASCADE)
profile_picture = models.ImageField(blank=True, upload_to='Avatar')
def __str__(self):
return self.name
class articles(models.Model):
article_author = models.ForeignKey(User, on_delete=models.CASCADE)
category = models.ForeignKey(Category, null=True, blank=True, on_delete=models.CASCADE)
avatar = models.ForeignKey(author, on_delete=models.CASCADE)
base.html
<!-- when loggedin -->
{% if request.user.is_authenticated %}
<li class="nav-item dropdown my-2">
<a class="nav-link dropdown-toggle " data-toggle="dropdown" href="" id="themes" > {{full_name}} <span class="caret"></span>
<img class="rounded-circle" src="{{ user.author.profile_picture.url }}" style="max-width: 2em; margin-right: 10px;"> </a>
<div class="dropdown-menu" aria-labelledby="themes">
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/profile/">profile</a>
<a class="dropdown-item" href="/create/" >add post</a>
<a class="dropdown-item" href="#" style="margin-top: 1em;" data-toggle="modal" data-target="#exampleModal">logOut</a>
</div>
</li>
{% else %}
<!-- end loggedin -->
views.py
# open home page
def index(request):
authorUser = get_object_or_404(author, name=request.user.id)
all_articles = articles.objects.all().order_by('-id')
solo = articles.objects.order_by('-id')[:1]
solo1 = articles.objects.order_by('-id')[:3]
#show five articles plus read
article_read = articles.objects.order_by('id')[:5]
#show spicial articles
# show first article
first = articles.objects.order_by('-id')[:10]
# show fourth articles
fourth = articles.objects.order_by('-id')[:4]
return render(request, 'home/index.html', {
'full_name': request.user.username,
'first_article':first,
'fourth_article':fourth,
'all_articles': all_articles,
'five_articles': article_read,
'solo': solo,
'solo1': solo1,
'user': authorUser
})
<img class="rounded-circle" src="{{ request.user.author.profile_picture.url }}" style="max-width: 2em; margin-right: 10px;"></img>
you need to include request

Pass multiple objects to templates with render

I'm beginner on Django.
I have a project with the following models:
My Articles models:
class Post(models.Model):
title = models.CharField(max_length=200)
slug = models.SlugField(max_length=160)
content = models.TextField()
image = models.ImageField(upload_to=upload_location)
timestamp = models.DateTimeField(auto_now=False, auto_now_add=True)
updated = models.DateTimeField(auto_now=True, auto_now_add=False)
categorie = models.CharField(max_length=200)
categorie = models.ForeignKey('categorie.Categorie')
publier = models.BooleanField()
My Portfolio categories models which is linked with my Article Model:
class Categorieport(models.Model):
title = models.CharField(max_length=200)
article = models.OneToOneField('posts.Post')
And finally, my portfolio models with all the photos:
class Portfolio(models.Model):
title = models.CharField(max_length=200)
image = models.ImageField(upload_to=upload_location)
timestamp = models.DateTimeField(auto_now=False, auto_now_add=True)
updated = models.DateTimeField(auto_now=True, auto_now_add=False)
categorieportfolio = models.ForeignKey('Categorieport')
In one view and one template, i'd like to display information concerning the article and the portfolio related to the article.
I wrote the following view:
def portfolio(request, article=None):
portfolio = get_object_or_404(Categorieport, article=article)
image_portfolio = portfolio.portfolio_set.all()
return render(request, 'portfolio1.html', {'portfolio': portfolio, 'image_portfolio': image_portfolio})
And the following templates:
<div class="titre-display">
<h2>{{ portfolio.article.timestamp|date:"d E Y" }} / {{ portfolio.article.categorie}} </h2>
<h1>{{ portfolio.article.title}}</h1>
</div>
<div class="content-display">
<div class="content-display-main">
<div class="content-display-main-portfolio">
<div class="image-portfolio">
<a class="example-image-link" href="{{ image_portfolio.image.url }}" data-lightbox="example-set" data-title="{{image_portfolio.title}}">
</a>
I can access to information from my article but i can't access information from my portfolio. I tried it with the shell, and it works. I can't figure out why it doesn't work in my view and template.
Do you have any idea?
Thank you in advance
Singertwist
Your image_portfolio is a querySet, that's means is some kind of list, you have to use a loop to access the items and them access the properties:
<div class="content-display">
<div class="content-display-main">
<div class="content-display-main-portfolio">
<div class="image-portfolio">
{% for item_img in image_portfolio %}
<a class="example-image-link" href="{{ item_img.image.url }}" data-lightbox="example-set" data-title="{{item_img.title}}"></a>
{% endfor %}
Try this:
# views.py
def portfolio(request, article=None):
# first get the Post instance with slug = article (I'm assuming article passed as url argument, is a slug)
post = get_object_or_404(Post, slug=article)
# get the Categoriepost object based on a specifi article
categorie_port = get_object_or_404(Categorieport, article=post)
# image_portfolio is a QuerySet (that is a list of Portfolio objects)
image_portfolio = categorie_port.portfolio_set.all()
return render(request, 'portfolio1.html', {'portfolio': categorie_port, 'image_portfolio': image_portfolio})
Leave your HTML as is.
Hi thank you all for your answer.
So, I used a for loop for solving my case as mentioned previously.
Below, my code:
<div class="titre-display">
<h2>{{ portfolio.article.timestamp|date:"d E Y" }} / {{ portfolio.article.categorie}} </h2>
<h1>{{ portfolio.article.title}}</h1>
</div>
<div class="content-display">
<div class="content-display-main">
<div class="content-display-main-portfolio">
{% for photo in image_portfolio %}
<div class="image-portfolio">
<a class="example-image-link" href="{{ photo.image.url }}" data-lightbox="example-set" data-title="{{photo.title}}">
{% thumbnail photo.image "300x300" crop="center" as im %}
<img class="example-image" src="{{ im.url }}" alt=""/>
{% endthumbnail %}
</a>
<p>{{photo.title}}</p>
</div>
{% empty %}
<p>Aucun portfolio.</p>
{% endfor %}
</div>
</div>
And my views:
def portfolio(request, slug=None, article=None):
slug = get_object_or_404(Post, slug=slug)
portfolio = get_object_or_404(Categorieport, article=article)
image_portfolio = portfolio.portfolio_set.all()
return render(request, 'portfolio.html', {'portfolio': portfolio, 'image_portfolio': image_portfolio})
Thanks again for your help
Singertwist

Django blog post doesn't update it just creates another object

This view is supposed to find a blog post and change it's information, but instead of that it just makes a new Blog object with the new (and old) information.
The update view
#login_required
def view_updatepost(request, blog_id):
if not request.user.is_staff or not request.user.is_superuser:
raise Http404
#post = Blog.objects.get(pk=blog_id)
post_to_be_changed = get_object_or_404(Blog, pk=blog_id)
form = BlogForm(request.POST or None, instance=post_to_be_changed)
if form.is_valid():
post_to_be_changed = form.save(commit=False)
#
#
post_to_be_changed.save()
#messages.success(request, "<a href='#'>Item</a> Saved", extra_tags='html_safe')
return HttpResponseRedirect(post_to_be_changed.get_absolute_url())
context = {
'post_to_be_changed': post_to_be_changed,
'form': form,
}
return render(request, 'blog/makepost.html', context)
The template used by the view makepost.html
{% extends "base.html" %}
{% load staticfiles %}
{% block main_content %}
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('{% static "img/about-bg.jpg" %}')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="page-heading">
<h1>Make a Post</h1>
<hr class="small">
<span class="subheading">Share with the World.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% if not user.is_authenticated %}
You must be <u>logged in</u> to make a post.
{% else %}
<form action="{% url "makepost" %}" method="post">
{% csrf_token %}
{{form.as_p}}
<div align="center">
<input class="btn btn-default" type="submit" value="Post to Blog" onclick="window.location='{% url "" %}';"/>
{# Home #}
</div>
</form>
{% endif %}
</div>
</div>
</div>
<hr>
{% endblock main_content %}
The models.py
from django.db import models
import datetime
# Create your models here.
class Blog(models.Model):
title = models.CharField(max_length=250)
subtitle = models.CharField(max_length=250, null = True, blank=True)
date_added = models.DateTimeField(default=datetime.datetime.now())
image = models.TextField(max_length=1000, null = True, blank=True)
tags = models.TextField(max_length=500, null=True, blank=True)
article = models.TextField(max_length=15000, null=True, blank=True)
author = models.CharField(max_length=150, null=True, blank=True)
def get_absolute_url(self):
return "/blog/%i" % self.pk
The forms.py
from django import forms
from .models import Blog
import datetime
class PostForm(forms.Form):
title = forms.CharField()
subtitle = forms.CharField(required=False)
date_added = forms.DateTimeField()
image = forms.URLField(required=False)
tags = forms.CharField(required=False)
article = forms.CharField()
author = forms.CharField()
class BlogForm(forms.ModelForm):
class Meta:
model = Blog
fields = ('title', 'subtitle',
'image', 'tags', 'article')
It seems that you are not referring to your update view in your form action url:
<form action="{% url **"makepost"** %}" method="post">