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 %}
Related
On the category page, the sub-category are getting repeated in refine search. I have added categories and sub-categories. I have 3 level categories i.e Phone-cases(Parent)->Apple(Sub-category)->iPhone X(Sub-category of apple).
Screenshot:
<?php
{{ header }}
<div id="product-category" class="container">
<ul class="breadcrumb">
{% for breadcrumb in breadcrumbs %}
<li>{{ breadcrumb.text }}</li>
{% endfor %}
</ul>
<div class="row">
{{ column_left }}
{% if column_left and column_right %}
{% set class = 'col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-sm-9' %}
{% else %}
{% set class = 'col-sm-12' %}
{% endif %}
<div id="content" class="{{ class }}">
{{ content_top }}
<h2>{{ heading_title }}</h2>
{% if thumb or description %}
<div class="row">
{% if thumb %}<div class="col-sm-2"><img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" class="img-thumbnail" /></div>
{% endif %}
{% if description %}<div class="col-sm-10">{{ description }}</div>
{% endif %}</div>
<hr>
{% endif %}
{% if categories %}
<h3>{{ text_refine }}</h3>
{% if categories|length <= 5 %}
<div class="row">
<div class="col-sm-3">
<ul>
{% for category in categories %}
<li>{{ category.name }}</li>
{% endfor %}
</ul>
</div>
</div>
{% else %}
<div class="row">
{% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
<div class="col-sm-3">
<ul>
{% for child in category %}
<li>{{ child.name }}</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
<br />
{% endif %}
{% endif %}
{% if products %}
<div class="row">
<div class="col-md-2 col-sm-6 hidden-xs">
<div class="btn-group btn-group-sm">
<button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_list }}"><i class="fa fa-th-list"></i></button>
<button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="{{ button_grid }}"><i class="fa fa-th"></i></button>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">{{ text_compare }}
</div>
</div>
<div class="col-md-4 col-xs-6">
<div class="form-group input-group input-group-sm">
<label class="input-group-addon" for="input-sort">{{ text_sort }}</label>
<select id="input-sort" class="form-control" onchange="location = this.value;">
{% for sorts in sorts %}
{% if sorts.value == '%s-%s'|format(sort, order) %}
<option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
{% else %}
<option value="{{ sorts.href }}">{{ sorts.text }}</option>
{% endif %}
{% endfor %}
</select>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="form-group input-group input-group-sm">
<label class="input-group-addon" for="input-limit">{{ text_limit }}</label>
<select id="input-limit" class="form-control" onchange="location = this.value;">
{% for limits in limits %}
{% if limits.value == limit %}
<option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>
{% else %}
<option value="{{ limits.href }}">{{ limits.text }}</option>
{% endif %}
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
{% for product in products %}
<div class="product-layout product-list col-xs-12">
<div class="product-thumb">
<div class="image"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></div>
<div>
<div class="caption">
<h4>{{ product.name }}</h4>
<p>{{ product.description }}</p>
{% if product.price %}
<p class="price">
{% if not product.special %}
{{ product.price }}
{% else %}
<span class="price-new">{{ product.special }}</span>
<span class="price-old">{{ product.price }}</span>
{% endif %}
{% if product.tax %}
<span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
{% endif %}
</p>
{% endif %}
{% if product.rating %}
<div class="rating">
{% for i in 1..5 %}
{% if product.rating < i %}
<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
{% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
<div class="button-group">
<button type="button" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
<button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
</div>
</div>
</div>
</div>
{% endfor %} </div>
<div class="row">
<div class="col-sm-12 text-left">{{ pagination }}</div>
{# <div class="col-sm-6 text-right">{{ results }}</div> #}
</div>
{% endif %}
{% if not categories and not products %}
<p>{{ text_empty }}</p>
<div class="buttons">
<div class="pull-right">{{ button_continue }}</div>
</div>
{% endif %}
{{ content_bottom }}</div>
{{ column_right }}</div>
</div>
{{ footer }}
Okay, this looks the relevant piece.
{% if categories %}
<h3>{{ text_refine }}</h3>
{% if categories|length <= 5 %}
<div class="row">
<div class="col-sm-3">
<ul>
{% for category in categories %}
<li>{{ category.name }}</li>
{% endfor %}
</ul>
</div>
</div>
{% else %}
<div class="row">
{% for category in categories|batch((categories|length / 4)|round(1, 'ceil')) %}
<div class="col-sm-3">
<ul>
{% for child in category %}
<li>{{ child.name }}</li>
{% endfor %}
</ul>
</div>
{% endfor %}</div>
<br />
{% endif %}
{% endif %}
You have the else triggering I think, as you have more than 5 categories.
As you can see, the child in that category gets printed instead of the category that you're trying to trigger. Rather remove the if/else and loop straight through the categories. Each of your children falls under multiple categories as well, therefore duplication.
{% if categories %}
<h3>{{ text_refine }}</h3>
<div class="row">
<div class="col-sm-3">
<ul>
{% for category in categories %}
<li>{{ category.name }}</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
Is probably what you want, or if you only want the first category with its children:
{% if categories %}
<h3>{{ text_refine }}</h3>
<div class="row">
<div class="col-sm-3">
<ul>
{% for child in category %}
<li>{{ child.name }}</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
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>
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.