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

how to create a Pagination with if and for loop django

I tried to do Pagination using for and if and it didn't work
So how do I do that
this an image that can show u
front page image
page 2 image
front page code
{% for post in posts %}
{% if forloop.counter <= 2 %}
<div style="background-color: #9999;" class="card mb-3" style="max-width: 100%;">
<div class="row no-gutters">
<div class="col-md-4">
<img style="height: 200px; width: 330px;" src="{{ post.mainimage.url }}" class="card-img" alt="...">
</div>
<div class="col-md-6" id="ph">
<div class="card-body">
<h5 class="card-title">{{ post.title }} , {{ post.xnumber }}</h5>
<p class="card-text">{{ post.version }}</p>
<p>{{ post.category }}</p>
<p class="card-text"><small class="text-muted">{{ post.date_added }}</small></p>
</div>
</div>
</div>
</div>
<hr >
{% endif %}
{% empty %}
<div class="notification">
<p>No posts yet!</p>
</div>
{% endfor %}
page 2 code
{% for post in posts %}
{% if forloop.counter2 <= 30 %}
<div style="background-color: #9999;" class="card mb-3" style="max-width: 100%;">
<div class="row no-gutters">
<div class="col-md-4">
<img style="height: 200px; width: 330px;" src="{{ post.mainimage.url }}" class="card-img" alt="...">
</div>
<div class="col-md-6" id="ph">
<div class="card-body">
<h5 class="card-title">{{ post.title }} , {{ post.xnumber }}</h5>
<p class="card-text">{{ post.version }}</p>
<p>{{ post.category }}</p>
<p class="card-text"><small class="text-muted">{{ post.date_added }}</small></p>
</div>
</div>
</div>
</div>
<hr >
{% endif %}
{% empty %}
<div class="notification">
<p>No posts yet!</p>
</div>
{% endfor %}
so pls help
i did this but its not work no posts show in the page 2

Here is how you can approach this using the Paginator class provided by Django.
from django.core.paginator import Paginator
from django.shortcuts import render
from yourApp.models import Post
def frontpage(request):
posts = Post.objects.all()
paginator = Paginator(posts, 3) # Show 3 posts per page or 10 to show 10 posts.
page_number = request.GET.get('page')
page_obj = paginator.get_page(page_number)
return render(request, 'posts/frontpage.html', {'page_obj': page_obj})
Now in your frontedend html page all you have to do is make this minor change and your html code will look like this
{% for post in page_obj %}
<div style="background-color: #9999;" class="card mb-3" style="max-width: 100%;">
<div class="row no-gutters">
<div class="col-md-4">
<img style="height: 200px; width: 330px;" src="{{ post.mainimage.url }}" class="card-img" alt="...">
</div>
<div class="col-md-6" id="ph">
<div class="card-body">
<h5 class="card-title">{{ post.title }} , {{ post.xnumber }}</h5>
<p class="card-text">{{ post.version }}</p>
<p>{{ post.category }}</p>
<p class="card-text"><small class="text-muted">{{ post.date_added }}</small></p>
</div>
</div>
</div>
</div>
<hr >
{% empty %}
<div class="notification">
<p>No posts yet!</p>
</div>
{% endfor %}
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
« first
previous
{% endif %}
<span class="current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
last »
{% endif %}
</span>
</div>
Now the next thing is just style the pagination div. I hope this will solve your pagination issue. Thank you

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.

What's problem with this pagination code?

This code already have done the pagination ,but it false because per page it shows all items in the database ,and the same in other pages
This is the routing
#app.route('/shop/page/<int:page_num>')
def shop(page_num):
products=Product.query.filter
(Product.category.has(Product.category_id))
shopPage=Product.query.paginate
(page=page_num,per_page=5,error_out=True)
return render_template('shop.html',
shopPage=shopPage,products=products)
And this is the HTML code of pagination and the output products of database
{% block content %}
<div class="mb-5">
{% for product in products %}
<div class="col-4 mt-3 ">
<div class="card">
<div class="card-header">
<form method="POST" action="{{ url_for('shop') }}" >
</form>
</div>
<div class="card-body">
<h5 class="card-title">{{product.name }}</h5>
<p class="card-text">
<div>Category: {{ product.category.name }}</div>
<div>Price: {{ product.price }} $</div>
<div>Company: {{ product.company }}</div>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
{% for page in shopPage.iter_pages(left_edge=2, right_edge=2, left_current=1, right_current=2) %}
{% if page %}
<nav >
<ul class="pagination ">
<li class="page-item ">
<a class="page-link" href="{{url_for('shop',page_num=page)}}" tabindex="-1">{{ page }}</a>
</li>
</ul>
</nav>
{% else %}
...
{% endif %}
{% endfor %}
{% endblock %}