I try to do this:
{% for post in posts %}
{% if forloop.counter 15>=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 %}
{% endfor %}
and it gives me an error:
the photo here
**What I'm trying to do is make the repetition start at 15 and end or = at 30 **
I searched a lot and couldn't find what I wanted
So please help me
lan = python django
try it like this
{% if forloop.counter>15 and forloop.counter<=30 %}
Related
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
I'm trying to use the paginator inbuild Django module so that the user can pass the pages. The problem is that I've configured everything as it should, but the pages numbers are not displaying. The place where it should have the numbers is entirely blank. Why can that due to?
Home Shop
Shop
<section class="ftco-section bg-light">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-10 order-md-last">
{% for item in items %}
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 ftco-animate d-flex">
<div class="product d-flex flex-column">
<a href="{{ item.get_absolute_url }}" class="img-prod"><img class="img-fluid" src='{% static "images/product-1.png" %}' alt="Colorlib Template">
<div class="overlay"></div>
</a>
<div class="text py-3 pb-4 px-3">
<div class="d-flex">
<div class="cat">
<span>{{ item.get_category_display }}</span>
</div>
<div class="rating">
<p class="text-right mb-0">
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
</p>
</div>
</div>
<h3>{{ item.title }}</h3>
<div class="pricing">
{% if item.discount_price %}
<p class="price"><span>${{ item.discount_price }}</span></p>
{% else %}
<p class="price"><span>${{ item.price }}</span></p>
{% endif %}
</div>
<p class="bottom-area d-flex px-3">
<span>Add to cart <i class="ion-ios-add ml-1"></i></span>
Buy now<span><i class="ion-ios-cart ml-1"></i></span>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row mt-5">
<div class="col text-center">
<div class="block-27">
{% if items.paginator.num_pages > 1 %}
<ul>
{% if items.has_previous %}
<li><</li>
{% endif %}
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
{% if items.has_next %}
<li>></li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</div>
views.py:
def shop(request):
items = Item.objects.all()
paginator = Paginator(items, 5)
page = request.GET.get('page')
posts = paginator.get_page(page)
context = {
'items': Item.objects.all(),
'page': page
}
return render(request, 'ecommerceapp/shop.html', context)
Any help i would really appreciate it. I've been trying to fix this issue for a while.
You have to use your posts object.
view.py
def shop(request):
items = Item.objects.all()
paginator = Paginator(items, 5)
page = request.GET.get('page')
posts = paginator.get_page(page)
context = {
'posts': posts
}
return render(request, 'ecommerceapp/shop.html', context)
template.html
<section class="ftco-section bg-light">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-10 order-md-last">
{% for item in posts %}
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 ftco-animate d-flex">
<div class="product d-flex flex-column">
<a href="{{ item.get_absolute_url }}" class="img-prod"><img class="img-fluid" src='{% static "images/product-1.png" %}' alt="Colorlib Template">
<div class="overlay"></div>
</a>
<div class="text py-3 pb-4 px-3">
<div class="d-flex">
<div class="cat">
<span>{{ item.get_category_display }}</span>
</div>
<div class="rating">
<p class="text-right mb-0">
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
<span class="ion-ios-star-outline"></span>
</p>
</div>
</div>
<h3>{{ item.title }}</h3>
<div class="pricing">
{% if item.discount_price %}
<p class="price"><span>${{ item.discount_price }}</span></p>
{% else %}
<p class="price"><span>${{ item.price }}</span></p>
{% endif %}
</div>
<p class="bottom-area d-flex px-3">
<span>Add to cart <i class="ion-ios-add ml-1"></i></span>
Buy now<span><i class="ion-ios-cart ml-1"></i></span>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row mt-5">
<div class="col text-center">
<div class="block-27">
{% if posts.paginator.num_pages > 1 %}
<ul>
{% if posts.has_previous %}
<li><</li>
{% endif %}
{% for i in posts.paginator.page_range %}
<li>{{ i }}</li>
{% endfor %}
{% if posts.has_next %}
<li>></li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</div>
I Need your help please.
My envirenement is:
python 3.6.6
django 2.2
I want to generate some code like this using django template.
<div class="card-deck">
<div class="card">
actu1
</div>
<div class="card">
actu2
</div>
<div class="card">
actu3
</div>
<div class="card">
actu4
</div>
</div>
<!--insert inside a new div (with class card-deck) the 5th actu and next one-->
<div class="card-deck">
<div class="card">
actu5
</div>
<div class="card">
actu6
</div>
<div class="card">
actu7
</div>
<div class="card">
actu8
</div>
</div>
<!--insert inside a new div (with class card-deck) the 9th actu and next one-->
what I manage to do with django templates is as follows:
{% extends 'actu/base_actu.html'%}
{% load static %}
{%block actumain%}
<div class="card-deck">
{%for actu in actu%}
<div class="card">
{ {actu.content }}
</div>
{%endfor%}
</div>
{%endblock%}
which just gives the code as follows:
<div class="card-deck">
<div class="card">
actu1
</div>
<div class="card">
actu2
</div>
<div class="card">
actu3
</div>
<div class="card">
actu4
</div>
<div class="card">
actu5
</div>
<div class="card">
actu7
</div>
<div class="card">
actu8
</div>
<div class="card">
actu9
</div>
<div class="card">
actu10
</div>
<div class="card">
actu11
</div>
<div class="card">
actu...
</div>
</div>
Please, could you give me your idea to be able to generate such a code.
Thank you very much.
Use the forloop.counter0 and the divisibleby tempate tag like this:
{% for actu in actu %}
{% if forloop.counter0|divisibleby:"4" and not forloop.first %}
</div>
{% endif %}
{% if forloop.counter0|divisibleby:"4" %}
<div class="card-deck">
{% endif %}
<div class="card">
{{ actu.content }}
</div>
{% if forloop.last %}
</div>
{% endif %}
{% endfor %}
Here we first check if the loop counter is divisible by 4 and not the first iteration if yes we render the closing div tag.
Next we if the loop counter is divisible by 4 and if so we render the opening div tag.
After this we render the individual cards.
Next we check if this is the last iteration if so we render the closing div tag.
{% for item in actu %}
{% if forloop.counter0|divisableby:4 %}
<div class="card-deck">
{% endif %}
<div class="card">
{{ item.content }}
</div>
{% if forloop.counter0|divisableby:4 or forloop.last %}
</div>
{% endif %}
{% endfor %}
I am trying to render the data from the database one by one by it does not work.
index.html
{% for i in edus %}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">{{i[0].title}}
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>{{i[0].descripiton}} </p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
If you want to render specific index, you should change:
{{i[0].title}} into {{ i.0.title }}
{{i[0].descripiton }} into {{ i.0.description }}
I have created a blog with Django that I originally looped through each post with:
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
<h4>{{ post.title }}</h4>
<i class="fa fa-calendar" aria-hidden="true"></i> {{ post.pub_date_pretty }}
<img src="{{ post.image.url }}" class="img-responsive center-sm-block" style='width:75%; text-align:center;' />
<br/>
<p>{{ post.summary }}</p>
<br/>
<br/>
{% endfor %}
</div>
Which worked great! But I didn't just want to have a linear list of post and wanted to display each unique post in a bootstrap card which I attempted with this solution:
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
<div class="row">
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
</div>
{% endfor %}
</div><!-- End container -->
However each unique post now displays twice in a card:
First row of posts
Second row of posts
Any help would be greatly appreciated! This is my first Django project and I have gotten pretty far already. However this is tripping me up quite badly.
Edit: Just to clarify I need to have a second post in that card is what I'm asking. I want two cards displayed side by side, each with a unique post
<div class="container">
<h2 class="latest-posts">Latest Posts</h2>
<hr />
{% for post in posts.all %}
{% if forloop.counter0|divisibleby:2 %}
<div class="row">
{% endif %}
<div class="col-12 col-md-6">
<!-- Card -->
<article class="card animated fadeInRight">
<div class="card-block">
<h4 class="card-title">{{ post.title }}</h4>
<h6 class="text-muted">Antoine de Saint-Exupéry</h6>
<p class="card-text">{{ post.summary }}</p>
</div>
<div class="card-block text-center">
<div class="btn-group hidden-sm-down hidden-md-down" role="group" aria-label="Card buttons">
Read more
</div>
</div>
<img class="card-img-bottom img-responsive" style='width:100%; text-align:center;' src="{{ post.image.url }}" alt="White sand" />
</article><!-- .end Card -->
</div>
</div>
{% if forloop.counter|divisibleby:2 == False %}
</div>
{% endif %}
{% endfor %}
// When lenght of posts is even the <div> is not close. Close it!</div>
{% if posts.all|length|divisibleby:2 == False %}
</div>
{% endif %}
</div><!-- End container -->