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 %}
Related
Given this field {% bootstrap_field form.photo %} which is a forms.ImageField and the form after, I need to associate the field with the form in a way that when the form is submitted, I get the value in form.photo.
<div class="row container h-100">
<div class="col-xl-4">
<div class="card mb-4 mb-xl-0">
<div class="card-body text-center">
<img style="max-width: 50%" alt="Avatar" class="img-account-profile rounded-circle mb-2"
src={{ request.user.profile.photo.url }}>
{% bootstrap_field form.photo %}
</div>
</div>
</div>
<div class="col h-100">
<div class="card shadow-lg">
<div class="card-body p-5">
<form enctype="multipart/form-data" method="post">
{% csrf_token %}
<div class="row">
<span class="col">
{% bootstrap_field form.first_name %}
</span>
<span class="col">
{% bootstrap_field form.last_name %}
</span>
<button class="btn btn-success col">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
Currently if a photo is uploaded, it won't show up in the form response because it's not included within <form></form>. I need it to be outside the form because the locations of the form fields and the photo are different.
One way to do so is to wrap both cards inside the form tags. Is this the best way to do it or is there a simpler way like specifying {% bootstrap_field my_field form=my_form %}
With the django framework I use a loop in my templates to display the image inside my database, I also use the Bootstrap grid to make it clean, but it not working correctly. As you can see the image on at the bottom are not align correctly.
hmtl
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-2">
<div class="card-filter" style="width: 10rem;">
<div class="card-header">
Pattern Type
</div>
<ul class="list-group list-group-flush">
{% for pattern in categories %}
<li class="list-group-item">{{pattern.name}}</li>
{% endfor %}
</ul>
</div>
</div>
{% for photo in photos %}
<div class="col-sm-12 col-md-5 col-ld-5">
<div class="card" style="width: 25rem;">
<img class="card-img-top" src="{{photo.image.url}}" alt="Card image cap">
<div class="card-body">
<p class="card-text">Symbol: GBPUSD<br>Pattern: ButterFly Bullish</p>
View Pattern
</div>
</div>
</div>
{% endfor %}
</div>
</div>
views.py
def home(request):
categories = Category.objects.all()
photos = Photo.objects.all()
context = {'categories': categories,
'photos': photos}
return render(request, "main/home.html", context)
You better put all the images in a parent that takes rest of the width after the list on the left, so it should be like this:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-2">
<div class="card-filter" style="width: 10rem;">
<div class="card-header">
Pattern Type
</div>
<ul class="list-group list-group-flush">
{% for pattern in categories %}
<li class="list-group-item">{{pattern.name}}</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col-sm-12 col-md-9 col-lg-10">
{% for photo in photos %}
<div class="col-sm-12 col-md-6">
<div class="card" style="width: 25rem;">
<img
class="card-img-top"
src="{{photo.image.url}}"
alt="Card image cap"
/>
<div class="card-body">
<p class="card-text">
Symbol: GBPUSD<br />Pattern: ButterFly Bullish
</p>
<a href="{% url 'photo' photo.id %}" class="btn btn-dark"
>View Pattern</a
>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
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'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.
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 }}