Associating comments with images

[Jeff Waters]

I am creating a website where users can comment on photos in a gallery. The challenge I currently have is that Django is not able to determine which of the photos the comment 'submit' button relates to.

This is my HTML code for the photo gallery:

<h2>comments</h2>
{% if not comments %}
No comments
{% endif %}
{% for x in comment %}
<div class="comments" style="padding: 10px;">
<p class="font-weight-bold">
<h4>Comment by</h4> {{ x.user }}
<span class=" text-muted font-weight-normal">
{{ x.created_on }}
</span>
</p>
{{ x.body | linebreaks }}
</div>
{% endfor %}
</div>
<div class="card-body">
{% if new_comment %}
<h2>Your comment has been posted.</h2>
{% else %}
<h3>Leave a comment</h3>
<form action="{% url 'nowandthen:add_comment'%}" method="POST">
{{ comment_form.as_p }}
{% csrf_token %}
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
{% endif %}

How do you suggest I overcome this problem, please?

Thanks

Jeff

[Andréas Kühne]

Add the photo id to the url - so instead of having the form like this:

<form action="{% url 'nowandthen:add_comment'%}" method="POST">

you add it like this:

 <form action="{% url 'nowandthen:add_comment' photo_id %}" method="POST">

and make sure that the photo_id variable is in the current context and that the comment view accepts an id.

Regards,

Andréas

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/cabe2b94-bf00-4394-b699-8a15d48247d2%40googlegroups.com.

[Jeff Waters]

Thanks Andreas

I think that one of the mistakes I'd made previously was to not associate particular comments with particular pictures.

I've tried to rectify that using the code below. However, when I do this, the page I get is empty.

Any advice would be appreciated:

{% extends 'nowandthen/base.html' %}
{% block body_block %}
<br>
<br>
{% if pictures %}
<ul>
{% for p in Picture.objects.all %}
<div class="container">
<div class="row">
<div class="col-md-8 card mb-4 mt-3 ">
<!-- Card -->

<!-- Card content -->
<div class="card-body d-flex flex-row">

<!-- Content -->
<div>

<!-- Title -->
<h4 class="card-title font-weight-bold mb-2">{{ p.title }}</h4>
<!-- Subtitle -->
<p class="card-text"><i class="far fa-clock pr-2"></i>{{ p.when_added }}</p>
</div>
</div>

<!-- Card image -->
<div class="view overlay">
<img class="card-img-top rounded-0" src="{{ p.image.url }}" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>

<!-- Card content -->
<div class="card-body">
<div class="collapse-content">

<!-- Text -->
<p class="card-text collapse" id="collapseContent">{{ p.description }}</p>
<!-- Button -->
<a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse" href="#collapseContent" aria-expanded="false" aria-controls="collapseContent">Click for description</a>
<i class="fas fa-share-alt text-muted float-right p-1 my-1" data-toggle="tooltip" data-placement="top" title="Share this post"></i>
<i class="fas fa-heart text-muted float-right p-1 my-1 mr-3" data-toggle="tooltip" data-placement="top" title="I like it"></i>

</div>
</div>
<div class="card-body">
<!-- comments -->
<h2>comments</h2>
{% if not p.comments %}

No comments
{% endif %}

{% for x in p.comment %}

<div class="comments" style="padding: 10px;">
<p class="font-weight-bold">
<h4>Comment by</h4> {{ x.user }}
<span class=" text-muted font-weight-normal">
{{ x.created_on }}
</span>
</p>
{{ x.body | linebreaks }}
</div>
{% endfor %}
</div>
<div class="card-body">
{% if new_comment %}
<h2>Your comment has been posted.</h2>
{% else %}
<h3>Leave a comment</h3>

<form action="{% url 'nowandthen:add_comment' p.image_id %}" method="POST">

{{ comment_form.as_p }}
{% csrf_token %}
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
{% endif %}

</div>
</div>
</div>
</div>
<!-- Card -->
{% endfor %}
</ul>
{% else %}
<li><strong>There are no photographs present.</strong></li>
{% endif %}

{% endblock %}

Thanks

Jeff

[Andréas Kühne]

Ok - so you are not really doing this correctly - I am guessing now.

Can you send the code for your view as well. Because I am guessing that you aren't sending anything to the context variable "pictures".

I think the other things are more or less correct (even though there are some issues with the html as well....)

But if we start with the context variable:

{% if pictures %}

This means that you need to send a variable called pictures with the pictures you want to display on the page. This should be populated in your view with the pictures you want to display. The reason I don't think this is done, is because you then use the following for loop:

 {% for p in Picture.objects.all %}

You shouldn't use the models in the templates that way - but it would be better to do:

 {% for p in pictures %} (if you have set the variable) :)

Other than that - you have a ul tag there that seems a bit out of place :)

Regards,

Andréas

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/7a56b57b-42e9-42be-bc9f-3ed8714cf444%40googlegroups.com.

[Jeff Waters]

Thank you Andreas.

This is the views.py - https://github.com/EmilyQuimby/my_now_and_then/blob/master/nowandthen/views.py

[Andréas Kühne]

Yeah ok - so you should use the pictures variable to iterate over to get the pictures and you should be fine!

Regards,

Andréas

Den ons 1 apr. 2020 kl 15:26 skrev Jeff Waters <wate...@gmail.com>:

Thank you Andreas.

This is the views.py - https://github.com/EmilyQuimby/my_now_and_then/blob/master/nowandthen/views.py

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/944c9708-34f5-497a-a877-ecd66cd0fbca%40googlegroups.com.

[Jeff Waters]

Thanks Andreas

When I do that, I get an error message: NoReverseMatch at /photo_feed/

Could the problem be with my add_comment.html?

The code for that is as follows:

{% extends 'nowandthen/base.html' %}
{% load staticfiles %}
{% block title_block %}
Add self
{% endblock %}
{% block body_block %}
<h1>Add a Comment</h1>
<div>
<form id="comment_form" method="post" action="{% url 'nowandthen:add_comment' comment_id%}" enctype="multipart/form-data" >
{% csrf_token %}
{{ form.as_p }}
<input type="submit" name="submit" value="Add Comment" />
</form>
</div>
{% endblock %}