Trying to iterate multiple posts through a loop, into 2 rows of 3 items.
Currently my code looks like this
{% for post in post.all %}
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>{{ post.title }} - {{post.assignment_level}}</h3>
<p>by {{post.author}} from {{post.pub_date}}</p>
<h4>{{post.assignment_body}}</h4>
<p>Read...</p>
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock%}
this gives me one column of 6 posts.
How do I split them in to 2 rows of three posts.
Really been googling this.
Thank you in advance
You can do something like this:
{% set count = 0 %}
{% for post in post.all %}
{% if count == 0 %}
<div class="row">
{% endif %}
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>{{ post.title }} - {{post.assignment_level}}</h3>
<p>by {{post.author}} from {{post.pub_date}}</p>
<h4>{{post.assignment_body}}</h4>
<p>Read...</p>
</div>
</div>
</div>
{% set count = count + 1 %}
{% if count == 3 %}
</div>
{% set count = 0; %}
{% endif %}
{% endfor %}
{% endblock%}
What you are doing here is creating multiple rows for each posts. Hence all your elements are coming in separate rows.
You can do something like this.
<div class="row">
{% for post in post.all %}
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3>{{ post.title }} - {{post.assignment_level}}</h3>
<p>by {{post.author}} from {{post.pub_date}}</p>
<h4>{{post.assignment_body}}</h4>
<p>Read...</p>
</div>
</div>
</div>
{% endfor %}
</div>
Related
I Hope You Are Good
I want to show my city in my footer
I want 4 cities in each div after 4 cities added in div I want to create a new div and add 4 cities and so on
here is the html reffrence:
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
<p>Islamabad</p>
<p>Karachi</p>
<p>Lahore</p>
<p>Rawalpindi</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
<p>Abbottabad</p>
<p>Abdul Hakim</p>
<p>Ahmedpur East</p>
<p>Alipur</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
<p>Arifwala</p>
<p>Astore</p>
<p>Attock</p>
<p>Awaran</p>
</div>
I want to like this HTML
how can I achieve this!
the following code dosen't work:
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
{% for city in citys %}
<p>{{ city }}</p>
{% endfor %}
</div>
it adds all element in one div
how can create new div after 4 items added on that div
You can use forloop.counter
{% for city in citys %}
{% if forloop.first %}
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
<p>{{ city }}</p>
{% elif forloop.counter|divisibleby:"4" and not forloop.last %}
<p>{{ city }}</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
{% elif not forloop.last %}
<p>{{ city }}</p>
{% endif %}
{% if forloop.last %}
{% if forloop.first %}
</div>
{% else %}
<p>{{ city }}</p>
</div>
{% endif %}
{% endif %}
{% endfor %}
try this
Make List Tag will help you.
{% for i in '0123'|make_list %}
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
{% for city in citys %}
<p>{{ city }}</p>
{% endfor %}
</div>
{% endfor %}
I've a template design like this
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
and I've tried using this article django template rows of multiple items
But output doesnt come as required. How can I do as required.
What I've tried:
{% for item in items %}
<div class="row">
{% if forloop.counter|divisibleby:2 %}
<div class="col-sm-4"></div>
{% else %}
<div class="col-sm-8"></div>
{% endif %}
</div>
{% endfor %}
Your code produce one row per item. If I'm correct, you want 2 items per row.
{% with items_length = items|length%}
<div class="row">
{% for item in items %}
<div class="col-sm-{% cycle '4' '8'%}"></div>
{% if forloop.counter|divisibleby:2 and forloop.counter < items_length %}
</div>
<div class="row">
{% endif %}
{% endfor %}
</div>
{% endwith %}
Something like that should work.
The following is one way to do it:
{% for item in items %}
<div class="row">
{% if forloop.counter0|divisibleby:2 %}
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
{% else %}
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
{% endif %}
</div>
{% endfor %}
Notice the use of forloop.counter0.
I am skipping first item and add 2 items in one Tag. This divisibleby does not work for me.
<div class=container>
<div class=row>
skip news 1
<div class=col-md-6>news2</div>
<div class=col-md-6>news3</div>
</div>
<div class=row>
<div class=col-md-6>news4</div>
<div class=col-md-6>news5</div>
</div>
....
</div>
You can use a mixture of conditions to accomplish this:
<div class=container>
{% for news in news_list %}
{% if forloop.counter > 1 %}
{% if forloop.counter|divisibleby:"2" %}
{% if forloop.counter > 2 %}
</div>
{% endif %}
<div class="row">
{% endif %}
<div class=col-md-6>{{ news }}</div>
{% endif %}
{% endfor %}
</div>
</div>
I am working with a carousel to show some top rated products, the carousel works but I cant make work properly it seems that the problem is with the 'active' class . Each 'slide' shows 4 products.
This is my code
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
{% for p in prod %}
<div class="item {% if forloop.first %} active {% endif %}"> // here is the problem
<div class="row">
<div class="col-sm-3">
<h1>{{p.name}}</h1>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
If I don't use the forloop.first, the carousel doesn't slide. And with this forloop.first, it shows only one item per slide, instead of 4 items.
The output in the inspector is :
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"> // Here I expect 4 columns and I get only 1
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3">
</div>
</div>
</div>
</div>
Your issue is that you're trying to make a slide per each product: for each iteration of your loop you're creating a new item and put one col-sm-3 into it.
You can change your view to pass a nested structure to template or try to do something like:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
{% for p in prod %}
{% cycle 'yes' '' '' '' as slidestart silent %}
{% if slidestart %} <div class="item {% if forloop.first %} active {% endif %}"> <div class="row">{% endif %}
<div class="col-sm-3">
<h1>{{p.name}}</h1>
</div>
{% if slidestart %} </div></div>{% endif %}
{% endfor %}
</div>
</div>
or use forloop.counter to put your items and rows each 4th row like that:
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<div class="carousel-inner">
{% for p in prod %}
{% if forloop.counter0|divisibleby:"4" %}<div class="item {% if forloop.first %} active {% endif %}">
<div class="row">{% endif %}
<div class="col-sm-3">
<h1>{{p.name}}</h1>
{% if forloop.counter0|divisibleby:"4" %}</div>
</div>
</div>{% endif %}
{% endfor %}
</div>
</div>
The cycle answer above was closing the item everytime. Needed an 'end' cycle. This worked for me.. Thx x3al!
<div class="carousel-inner">
{% for track in track_set.all %}
{% cycle 'start' '' '' '' '' '' as slidestart silent %}
{% cycle '' '' '' '' '' 'end' as slideend silent %}
{% if slidestart %} <div class="item {% if forloop.first %} active {% endif %}"> <div class="row">{% endif %}
<div class="col-md-2">
.. slide code ..
</div>
{% if slideend %} </div></div>{% endif %}
{% endfor %}
</div>
Try this
<div {% if forloop.first %} class="item active" {% else %} class="item" {% endif %}>
I wanted to use this code to make 3 columned carousel, but the problem was when the object_list had number of items that are not dividable by the number of columns.
For example: it works with 6 columns because 6 % 3 = 0 but it doesn't work with 5 columns because 5 % 3 != 0
The problem was the cycle never got to the slidend and stopped prematurely, so I had to change the last if statement.
<div class="bs-news-wrapper">
{% for a in articles %}
{% cycle 'start' '' '' as slidestart silent %}
{% cycle '' '' 'end' as slidend silent %}
{% if slidestart %}<div class="item{% if forloop.first %} active {% endif %}">
<div class="row">{% endif %}
<div class="col-md-4">
#content
</div>
{% if not slidend and forloop.last or slidend %}
</div>
</div>{% endif %}
{% endfor %}
</div>
The change is in this line:
{% if not slidend and forloop.last or slidend %}
I hope this helps some future dwellers.
Currently for every article in articles a new div with class span4 is created.
Instead for each row I would like to limit it's content to three span's and create a new row once that limit has been reached. How can I best implement this?
{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
<legend></legend>
<div class="row-fluid" id="main">
{% for article in articles %}
<div class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x150/483CB4">
<div class="caption">
<h4>{{ article.title }}</h4>
<p> {{ article.summary }}</p>
</div>
<legend></legend>
<a class="btn" href="#"><i class="icon-thumbs-up"></i></a>
<a class="btn" href="#"><i class="icon-thumbs-down"></i></a>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Goal:
<div class="row">
<div class="span4">article[0]</div>
<div class="span4">article[1]</div>
<div class="span4">article[2]</div>
</div>
<div class="row">
<div class="span4">article[3]</div>
<div class="span4">article[4]</div>
<div class="span4">article[5]</div>
</div>
The best way to do this is to use the built in batch filter to break up your list into groups of three:
{% for article_row in articles | batch(3, ' ') %}
<div class="row">
{% for article in article_row %}
<div class="span4">{{ article }}</div>
{% endfor %}
</div>
{% endfor %}
You can use loop.index0 and loop.last inside the for loop. Here is the for-loop documentation.
Example:
{% extends "base.html" %}
{% block content %}
<div class="container-fluid">
<legend></legend>
<div class="row-fluid" id="main">
{% for article in articles %}
{% if loop.index0 % 3 == 0 %}
<div class="row">
{% endif %}
<div class="span4">
...
</div>
{% if loop.index0 % 3 == 2 or loop.last %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
The loop.last clause should close the last row even if there were less than 3 items. <div> should start when loop.index0 gives 0 as the remainder and should end when 2 is the remainder
Another alternative would be to group the items into rows before passing them into the template, then you can just issue two for-loops one inside the other.