I'm trying to make it like the following: https://getbootstrap.com/docs/4.3/examples/pricing/
it shows the screen divided into three section
so it should be like this I think...
<div class="row mb-2">
<div class="col-4 bg-danger">
.col-4
</div>
<div class="col-4 bg-warning">
.col-4
</div>
<div class="col-4 bg-success">
.col-4
</div>
</div>
But the problem is I am using django jinja template and for loop. so it groups the whole content.
This is my code but it won't do what's like in the link
<div class="row">
<div class="col-6 col-md-4">
<div class="card">
{% for all_episode in episode %}
<img class="card-img-top" src='{{all_episode.image.url}}'>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">{{ all_episode.season }}</span></small>
</div>
{% endfor %}
</div>
</div>
Related
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 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 -->
when the page is viewed with 768*1280 (smartphone) resolution it looks like
django template for the web page is
<div class="row">
{% for discount in object_list %}
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!--<img src="{{static_url}}images/vendor/{{ discount.product_vendor__vendor_logo }}" class="img-responsive" alt="Image">-->
<img src="{% static "images/vendor/" %}{{ discount.product_vendor__vendor_logo }}" class="img-responsive" alt="Image">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img src="{% static "images/products/" %}{{ discount.product_vendor__vendor_alias }}/full/{{ discount.product_image }}" class="img-responsive" alt="Image">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
{{ discount.product_name }}
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h5>{{ discount.product_price }}</h5>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<strike>
<h5>{{ discount.product_price_old }}</h5>
</strike>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h5>{{ discount.product_vendor__vendor_odeliver }}</h5>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h5>{{ discount.diff }}</h5>
</div>
</div>
</div>
</div>
</div>
<!-- if last column in row -->
{% if forloop.counter|divisibleby:"4" and not forloop.last %}
</div><div class="row">
{% endif %}
{% endfor %}
I want to change in divisibleby:"4" the number 4 with respect to the size of the screen. example, divisibleby:"1" for mobile screens and divisibleby:"3" for tablets and divisibleby:"4" for desktops. please help.
There is no particular reason that each product gets separated into rows. This makes your templating work way harder. I am not even sure that you need to use divisibleby. I would recommend something like:
{% for discount in object_list %}
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<!--<img src="{{static_url}}images/vendor/{{ discount.product_vendor__vendor_logo }}" class="img-responsive" alt="Image">-->
<img src="{% static "images/vendor/" %}{{ discount.product_vendor__vendor_logo }}"
class="img-responsive" alt="Image">
<img src="
{% static "images/products/" %}{{ discount.product_vendor__vendor_alias }}/full/{{ discount.product_image }}"
class="img-responsive" alt="Image">
{{ discount.product_name }}
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h5>{{ discount.product_price }}</h5>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<strike>
<h5>{{ discount.product_price_old }}</h5>
</strike>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h5>{{ discount.product_vendor__vendor_odeliver }}</h5>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h5>{{ discount.diff }}</h5>
</div>
</div>
</div>
{% endfor %}
If for some reason (eg. variable heights of items) you indeed need to use divisibleby, then add a <div class="clearfix"></div> or take care of your heights.
I'm new to Jinja and this is my first post here on Stack Overflow.
I'm trying to loop through a gallery of images handled by bootstrap carousel/modal. I was able to let it work; <img> and <div> are rendered correctly, however I can't loop through the active element. Searching the web, I found that macros can help achieve it but I'm not familiar with using them. Here's the code I'm working on:
<div class="modal fade" id="myModalGal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Wrapper for slides -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for content in porte %}
{% if content.gal_porte %}
<img src="{{content.gal_porte}}" class="img-responsive" alt="test">
<div class="carousel-caption"></div>
</div>
<div class="item">
{% elif content.gal_porte %} <img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
{% endif %}
{% endfor %}
</div>
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev"> <i class="fa fa-arrow-left"></i>
</a> <a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next"> <i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
Jinja for loops have counters so you can check if you are on the first iteration of the loop and make that one the active slide.
Something like this:
<div class="carousel-inner">
{% for content in porte %}
<div class="item{% if loop.index == 1 %} active{% endif %}">
<img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
</div>
{% endfor %}
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>