We Keep Coding

Django for loop in Carousel

I'm trying to add a title to each slide in a dynamic carousel in Django. I have the images functioning properly and working as expected. The title is stacking on the first slide and as it progresses towards the end it removes a title and once it reaches the end it has only one title and it is correct. What would be the best way to fix this?
Update: I have the matching title with the matching image now but it is no longer in a carousel. The images are being displayed in a list now. here is my updated html. Models.py and Views.py is still the same
Updated html
<div id="CarouselWithControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for item in carousel_items %}
<div class="item {% if forloop.counter == 1 %}active{% endif %}" id="CarouselWithControls">
<img class="d-block w-100" src="{{ item.carousel_picture.url }}" >
<div class="carousel-caption">
<h4 class="text-white">{{ item.carousel_title }}</h4>
</div>
</div>
<a class="carousel-control-prev" href="#CarouselWithControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#CarouselWithControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% endfor %}
html
<div id="CarouselWithControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for item in carousel_items %}
{% if forloop.first %}
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<img src="{{ item.carousel_picture.url }}" class="d-block w-100">
</div>
<div class="carousel-caption d-none d-sm-block">
<h5 class="text-white">{{ item.carousel_title }}</h5>
</div>
{% else %}
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<img src="{{ item.carousel_picture.url }}" class="d-block w-100">
</div>
<div class="carousel-caption d-none d-sm-block {% if forloop.first %} active {% endif %}">
<h5 class="text-white">{{ item.carousel_title }}</h5>
</div>
{% endif %}
<a class="carousel-control-prev" href="#CarouselWithControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#CarouselWithControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
{% endfor %}
views.py
def gallery(request):
carousel_items = CarouselItem.objects.all()
context = {'carousel_items': carousel_items}
return render(request, 'home/gallery.html', context=context)
models.py
class CarouselItem(models.Model):
carousel_title = models.CharField(max_length=200 , blank=True, null=True)
carousel_picture = models.ImageField(upload_to='carousel_images/', null=True, blank=True)
Kindest Regards,
Jared

FInally figured it out it was a formatting error. Here is the corrected working code for anyone that may be searching in the future.
Working html
<div id="CarouselWithControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for item in frame_items %}
{% if forloop.first %}
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<h2 class="text-center">{{ item.frame_title }}</h2>
<img src="{{ item.frame_picture.url }}" class="d-block w-100">
<h5 class="text-center">{{ item.frame_description }}</h5>
</div>
{% else %}
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<h2 class="text-center">{{ item.frame_title }}</h2>
<img src="{{ item.frame_picture.url }}" class="d-block w-100">
<h5 class="text-center">{{ item.frame_description }}</h5>
</div>
{% endif %}
<a class="carousel-control-prev" href="#CarouselWithControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#CarouselWithControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
{% endfor %}

'while', expected 'endblock'. Did you forget to register or load this tag?

I'm working on an ebay like website. On the homepage I would like to render a bootstrap carousel with the most recent postings. I'm using a while loop to cycle through the images I send through to the Django template, but I keep getting this error
I think I've properly checked my block tags for typeos, so I'm not sure what would be causing this error. I've also tried moving the endwith tag to after the endwith tag, to no avail.
HTML
{% extends "auctions/layout.html" %}
{% block body %}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<h2>Active Listings</h2>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
{% with i=0 %}
{% endwith %}
{% while i < images.count: %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{ i }}"></li>
{% i+=1 %}
{% endwhile %}
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/static/auctions/images/products.jpeg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Check Out What's New</h5>
<p>Find these new items below!</p>
</div>
</div>
{% for image in images %}
<div class="carousel-item">
<img class="d-block w-100" src="{{ image.url }}" alt="Second slide">
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% endblock %}
Any help here would be greatly appreciated(:

The error tells you exactly what the problem is: while is invalid. In other words, there is no while loop in Django templates. You need to figure out how to accomplish what you want with {% for %} instead.

You can do this with for loop like this:
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
{% for i in images.count|make_list %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{ i }}"></li>
{% endfor %}
</ol>

Pagination button not highlighting the current page

So I'm trying to make a button which highlights as active when the page is the same as page number, but it does not work, It only highlights page 1, When I go to page 2 then page 1 is still highlighed, index function handles the page I'm talking about.
views.py
from django.shortcuts import render
from .models import Listing
from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
# Create your views here.
def index(request):
listings = Listing.objects.all()
paginator = Paginator(listings, 3)
page = request.GET.get('page')
paged_listings = paginator.get_page(page)
params = {'listings':paged_listings}
return render(request, 'listings/listings.html', params)
def listing(request, listing_id):
return render(request, 'listings/listing.html')
def search(request):
return render(request, 'listings/search.html')
listings.html
{% extends 'base.html' %}
{% block content %}
{% load humanize %}
<!-- Breadcrumb -->
<section id="bc" class="mt-3">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{% url 'index' %}">
<i class="fas fa-home"></i> Home</a>
</li>
<li class="breadcrumb-item active"> Browse Listings</li>
</ol>
</nav>
</div>
</section>
<!-- Listings -->
<section id="listings" class="py-4">
<div class="container">
<div class="row">
{% if listings %}
{% for listing in listings %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<img class="card-img-top" src="{{ listing.photo_main.url }}" alt="">
<div class="card-img-overlay">
<h2>
<span class="badge badge-secondary text-white">${{ listing.price | intcomma}}</span>
</h2>
</div>
<div class="card-body">
<div class="listing-heading text-center">
<h4 class="text-primary">{{ listing.title }}</h4>
<p>
<i class="fas fa-map-marker text-secondary"></i>{{ listing.city }} {{ listing.state }}, {{ listing.zipcode }}</p>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-th-large"></i>Sqfit: {{ listing.sqft }}</div>
<div class="col-6">
<i class="fas fa-car"></i>Garage: {{ listing.garage }}</div>
</div>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-bed"></i>Bedrooms: {{ listing.bedrooms }}</div>
<div class="col-6">
<i class="fas fa-bath"></i>Bathrooms: {{ listing.bathrooms }}</div>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-12">
<i class="fas fa-user"></i>{{ listing.realtor.name }}</div>
</div>
<div class="row text-secondary pb-2">
<div class="col-6">
<i class="fas fa-clock"></i>{{ listing.list_date | timesince }}</div>
</div>
<hr>
More Info
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="col-md-12">
<p>No Listings Available</p>
</div>
{% endif %}
<!-- Footer -->
<div class="row">
<div class="col-md-12">
{% if listings.has_other_pages %}
<ul class="pagination">
{% if listings.has_previous %}
<li class="page-item">
«
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link">«</a>
</li>
{% endif %}
</ul>
{% endif %}
{% for i in listings.paginator.page_range %}
{% if listings.number == i %}
<li class="page-item active">
<a class="page-link page-item">{{ i }}</a>
</li>
{% else %}
<li class="page-item">
{{i}}
</li>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</section>
{% endblock %}

You mistyped argument in page links. Just replace
<li class="page-item">
{{i}}
</li>
with
<li class="page-item">
{{i}}
</li>
(difference is equal sign = between query parameter and value)

The problem seems to be your use of
{% for i in listings.paginator.page_range %}
As this is returning a range, I think you should be using:
{% for i in listings.paginator %}

Colapsable Button Bootstrap Django

I'm trying to create a social media news feed, with the posts, but I dont want to show the comments just if the user presses the button Show Comments. The problem is that when I press the button of one post, all the post will extend comments. I don't really know how to solve this...
{% for post in posts %}
<div class="container">
<div class="row">
<div class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]">
<div class="[ panel panel-default ] panel-google-plus">
<div class="panel-heading">
<img class="[ img-circle pull-left ]" width="50" height="50" src="{{post.author.profile.image.url}}" alt="Mouse0270" />
<h3 class="author">{{post.author}}</h3>
<h5><span>Shared publicly</span> - <span> {{post.date_posted}} </span> </h5><br>
</div>
<div class="panel-body">
{% if user == post.author %}
<a class="text-right" href="{% url 'post-update' post.id %}"><p>Update</a>
<a class="text-danger text-right" href="{% url 'post-delete' post.id %}">Delete post</a>
{% endif %}
<p>{{post.content}}</p>
{% if post.image %}
<img src ="{{post.image.url}}" width="300" height="300" border="0" class="img-thumbnail">
{% endif %}
{% if post.video %}
<video width="250" controls >
<source src="{{post.video.url}}" type="video/mp4" >
</video>
{% endif %}
</div>
<br/>
<div class="container" >
<button class="btn btn-primary">Add comment</button>
</div>
<br>
<button type="button" class="btn btn-danger btn-block" data-toggle="collapse" data-target="#demo">See comments</button>
<div id="demo" class="collapse">
{% for comment in post.comments.all %}
<div class="container">
<div class="row">
<div class="col-sm-5">
<div class="panel panel-default">
<div class="panel-heading">
<strong>{{comment.author}}</strong> <span class="text-muted">commented at {{comment.created_on|date:"d M g:i a"}}</span>
</div>
<div class="panel-body">
<img class=" img-circle" width="30" height="30" src="{{comment.author.profile.image.url}}">
{{comment.body}}
</div><!-- /panel-body -->
</div><!-- /panel panel-default -->
</div><!-- /col-sm-5 -->
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
The problem is with the collapsable button above {% for comment in post.comments.all %}, but I dont know how to make it unique for every post.

How to fix: Django forms: {{ form }} doesn't show up any result in html page

I've created a django form:
#forms.py
from django import forms
class NameForm(forms.Form):
subject = forms.CharField(max_length=100)
message = forms.CharField(widget=forms.Textarea)
sender = forms.EmailField()
cc_myself = forms.BooleanField(required=False)
and in view file:
#views.py
def get_form(request):
print(request.POST)
form = NameForm(request.POST or None)
if form.is_valid():
print(form.cleaned_data)
return render(request, "name.html", {"title": "Contact us"})
I've imported to a html file inside templates folder:
#templates/name.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/your-name/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
</body>
</html>
However, it doesn't show up any thing just a submit button. I have no idea what is the issue. I'll be so grateful for a solution around this issue.
Update: If I create a new html file, the form is shown there. However, if I use it in my main html including boostarp, it is not showing up. Here is the full code of my html:
{% extends 'base.html' %}
{% block content %}
<!-- Team -->
{% for card in cards %}
<!-- Team member -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<div class="card">
<div class="card-body text-center">
<p><img class=" img-fluid"
src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png"
alt="card image"></p>
<h4 class="card-title">{{ card.name }}</h4>
<p class="card-text">{{ card.description }}</p>
<i class="fa fa-plus"></i>
</div>
</div>
</div>
<div class="backside">
<div class="card">
<div class="card-body text-center mt-4">
<h4 class="card-title">{{ card.name }}</h4>
<!--<p class="card-text"> {{ card.back_description }}-->
<form action="/your-name/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
<!--</p> -->
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-skype"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ./Team member -->
{% endfor %}
{% endblock %}
It made me crazy for three days. I look forward for a solution. Thanks
Update2:
#base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="{% static 'css/stylesheet.css' %}" rel="stylesheet" type="text/css">
<!------ Include the above in your HEAD tag ---------->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section id="team" class="pb-5">
<div class="container">
<h5 class="section-title h1">OUR TEAM</h5>
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
</section>
</body>
</html>
#card.html
{% extends 'base.html' %}
{% block content %}
<!-- Team -->
{% for card in cards %}
<!-- Team member -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<div class="card">
<div class="card-body text-center">
<p><img class=" img-fluid"
src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png"
alt="card image"></p>
<h4 class="card-title">{{ card.name }}</h4>
<p class="card-text">{{ card.description }}</p>
<i class="fa fa-plus"></i>
</div>
</div>
</div>
<div class="backside">
<div class="card">
<div class="card-body text-center mt-4">
<h4 class="card-title">{{ card.name }}</h4>
<!--<p class="card-text"> {{ card.back_description }}-->
<form action="/your-name/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
<!--</p> -->
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-skype"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ./Team member -->
{% endfor %}
{% endblock %}

change this line on your views.py file:
return render(request, "name.html", {"title": "Contact us"})
into this one:
return render(request, "name.html", {'form': form })