I have a little question, and it's about for loop in Django template:
I want to do a for and in each iteration do something different for example
{% for object in objects %}
##### html code to put a div with object information in the left and one in the right ######
{% endfor %}
To print all my objects but one in the left and another one in the right.
Can anyone help me?
You want the cycle tag.
{% for object in objects %}
<li class="{% cycle "your-left-class" "your-right-class" %}">
{{object}}
</li>
{% endfor %}
{% for object in objects %}
<div class="
{% if forloop.counter % 2 == 0 %}
pull-left
{% else %}
pull-right
{% endif %}
">
{{object}}
</div>
{% endfor %}
Check the for loop in templates.
Related
I'm attempting to fix some pagination issues in a Django app. Using the Previous and Next buttons work fine, since I'm using existing variables like previous_page_number, but I'm unsure how to get the Page 1, Page 2, Page N buttons to work. Here's the Previous Page code, which works just fine:
{% if table.page and table.paginator.num_pages > 1 %}
{% block pagination %}
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
{% block pagination.previous %}
{% if table.page.has_previous %}
Previous
{% else %}
<a href="#" class="pagination-previous" disabled>Previous</a>
{% endif %}
{% endblock pagination.previous %}
And here's my current Pagination Range code, which doesn't. Specifically, the else segment is what I'm unable to get working.
{% block pagination.range %}
{% if table.page.has_previous or table.page.has_next %}
<ul class="pagination-list">
{% for p in table.page|table_page_range:table.paginator %}
{% if table.page.number == p %}
<li>
<a class="pagination-link is-current is-dark" aria-label="Page {{ table.page.number }}" aria-current="page">{{ table.page.number }}</a>
</li>
{% else %}
<li>
{{ p }}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% endblock pagination.range %}
Currently, the pagination doesn't work, and the URL that gets passed ends at page= instead of page=p, whatever p is at the time. I'm uncertain how to pass p in as a readable variable, to cause it to appear in the URL. I've tried using the same format as other parts of the code not in the querystring.
{% else %}
<li>
{{ p }}
</li>
{% endif %}
This causes an error that prevents the page loading at all, as Django can't reconcile the {{ part.
Display
and you can get from the views.py like that;
page = request.GET.get("page", ""),
if it is page is none you can give them default value like this
page = request.GET.get("page", "1")
I'm creating some templates with Twig and have an issue.
I'm trying to load a piece of html that is used several times troughout a webshop. So my idea is to create a reusable piece of code that I can load everytime when needed.
The problem I'm facing is that when I do a for loop and then include that piece of code I get an empty return. With other words my code doesn't recognize the data that need to be loaded for each product in the for loop. It returns empty info boxes.
To clarify:
I have a main template index.html which calls a snippet to include some products (don't look at rain extension!!):
{% if featured %}
{% include 'snippets/products.rain' with {'products': featured, 'type': 'grid'} %}
{% endif %}
My products.rain snippet looks like this:
{% if type %}
{% if type == 'grid' %}
{% for product in products %} {# Products in this case = feautured products #}
<li class="item clearfix">.... etc etc .... </li>
{% endfor %}
{% elseif type == 'other-layout' %}
<div class="item">.... etc etc .... </div>
{% endif %}
{% endif %}
In the for loop there's html that's for 95% the same as in each for loop. I want to place that code inside a block that can be included in the for loops.
So what I did was:
{% set product_html %}
.... a lot of html ....
<a href="{{ product.url | url }}" title="{{ product.fulltitle }}">
<img src="{{ product.image }}" width="100" height="100" alt="{{ product.fulltitle }}"/>
</a>
{% endset %}
And then included in the for loop, like so:
{% if type %}
{% if type == 'grid' %}
{% for product in products %} {# Products in this case = feautured products #}
<li class="item clearfix">{{ product_html | raw }}</li>
{% endfor %}
{% elseif type == 'other-layout' %}
<div class="item">{{ product_html | raw }}</div>
{% endif %}
{% endif %}
However this returns the html that is set however with empty product.image and empty product.fulltitle.
I tried the same with set block, but that has the same result.
Is there anything I'm doing wrong....??
When you are using {% set %}, content inside your variable is not dynamic, it will only use data in your current context, see it live.
You can achieve your goal using 2 ways: using include or using macros.
As your piece of code for a product is small and not reused somewhere else, I suggest you to use macros:
{% macro product_html(product) %}
Current product is: {{ product }}
{% endmacro %}
{% import _self as macros %}
{% for product in products %}
{{ macros.product_html(product) }}
{% endfor %}
See it live
I'm looking to display information from a csv file on a jekyll-generated site. I need to search for the appropriate category in the csv file, then display four of them on the page. Filtering to the selected category is no problem, but I'm having difficulty limiting the output to four.
Is there a way to apply a limit to an if statement? Or is there any other way to write this? I'm not that savvy in Liquid, so it's extremely likely that I'm missing an obvious solution.
Basic code to make all the applicable data show up on the screen:
{% for study in site.data.studies %}
{% if study.category contains "foo" %}
<div class="col-sm-3">
<h3>{{ study.title }}</h3>
<div class="list-of-attributes">
<h6>Attributes: </h6>
{{ study.attributes }}
</div>
</div>
{% else %}
{% continue %}
{% endif %}
{% endfor %}
I've also tried unless and tablerow, neither of which worked at all. Am I at least on the right track? How can I limit this forloop to stop at four items?
Thank you!
Ideally data should be filtered before rendering however you can also create a variable in liquid to hold the number of stuff rendered
{% assign rendered = 0 %}
{% for study in site.data.studies %}
{% if study.category contains "foo" %}
<div class="col-sm-3">
<h3>{{ study.title }}</h3>
<div class="list-of-attributes">
<h6>attributes: </h6>
{{ study.attributes }}
</div>
</div>
{% assign rendered = rendered | plus: 1 %}
{% if rendered == 4 %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
The ideal solution as I said would be to create your own filter which does all the work (filter by category and limit the number of results)
{% assign filtered = site.data.studies | my_custom_filter %}
{% for study in filtered %}
<div class="col-sm-3">
<h3>{{ study.title }}</h3>
<div class="list-of-attributes">
<h6>attributes: </h6>
{{ study.attributes }}
</div>
</div>
{% endfor %}
Presuming that your category is a string, not an array, you can do :
{% assign selected = site.data.studies | where: 'category','foo' %}
{% for study in selected limit:4 %}
<div class="col-sm-3">
<h3>{{ study.title }}</h3>
<div class="list-of-attributes">
<h6>Attributes: </h6>
{{ study.attributes }}
</div>
</div>
{% endfor %}
And if your category is a string like "foo, bar, baz" or and array of strings you can use the jekyll 3.2 where_exp filter like this :
{% assign selected = site.data.studies | where_exp:"item", "item.category contains 'foo'" %}
I want to create a little side navigation for on-page navigation.
The site contains multiple images one above the other, the navigation is inside every single image and is linking to the individual id's.
I am using jekyll with the liquid templating engine. To not hard code every single element I created a for-loop which gets its data of a seperat .yml file.
This is how it should looks like:
Image
My problem is that its not working on the first element. Inside the first navigation element the first circle should be selected. But its not:
Image
This is the code:
{% for element in site.data.elements %}
{% capture number %}{{ forloop.length }}{% endcapture %}
<section id="spezial-{{forloop.index}}" {% assign imgIndex = {{forloop.index0}} %} class="spezial-img" style="background-image:url('{{ element.bild }}');">
<div class="container spezial-container">
<div class="sub-navi">
<ul>
{% for y in (1..number) %}
{% if imgIndex == naviIndex %}
<li></i></li>
{% else %}
<li></i></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</section>
{% endfor %}
You're comparing two counter that are not working the same way.
{% assign imgIndex = {{forloop.index0}}
This will count from 0 to array.size-1
{% assign naviIndex = {{forloop.index}}
This will count from 1 to array.size
As your not in the same "time zone", for the first image you have
imgIndex == naviIndex
0 == 1 -> false
And then, starting from the second loop,one time in each loop you will reach an equality but not on the right element.
On the second imgIndex element, for example, the active class will be set on the first naviIndex element but it's wrong. And it's the same for all following elements.
Correct code can be :
{% for element in site.data.elements %}
{% capture number %}{{ forloop.length }}{% endcapture %}
{% assign imgIndex = {{forloop.index}} %}
<section id="spezial-{{imgIndex}}" class="spezial-img" style="background-image:url('{{ element.bild }}');">
<div class="container spezial-container">
<div class="sub-navi">
<ul>
{% for naviIndex in (1..number) %}
{% if imgIndex == naviIndex %}
<li></i></li>
{% else %}
<li></i></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</section>
{% endfor %}
I need to check if the variable texts is defined or not in index.html.
If the variable is defined and not empty then I should render the loop. Otherwise, I want to show the error message {{error}}.
Basically this in PHP
if (isset($texts) && !empty($texts)) {
for () { ... }
}
else {
print $error;
}
index.html
{% for text in texts %}
<div>{{error}}</div>
<div class="post">
<div class="post-title">{{text.subject}}</div>
<pre class="post-content">{{text.content}}</pre>
</div>
{% endfor %}
How do I say this in jinja2?
I think your best bet is a combination of defined() check along with looking at the length of the array via length() function:
{% if texts is defined and texts|length > 0 %}
...
{% endif %}
To test for presence ("defined-ness"?), use is defined.
To test that a present list is not empty, use the list itself as the condition.
While it doesn't seem to apply to your example, this form of the emptiness check is useful if you need something other than a loop.
An artificial example might be
{% if (texts is defined) and texts %}
The first text is {{ texts[0] }}
{% else %}
Error!
{% endif %}
Take a look at the documentation of Jinja2 defined(): http://jinja.pocoo.org/docs/templates/#defined
{% if variable is defined %}
value of variable: {{ variable }}
{% else %}
variable is not defined
{% endif %}
Is it clear enough? In your case it could look like this:
{% if texts is defined %}
{% for text in texts %}
<div>{{ error }}</div>
<div class="post">
<div class="post-title">{{ text.subject }}</div>
<pre class="post-content">{{ text.content }}</pre>
</div>
{% endfor %}
{% else %}
Error!
{% endif %}
As mentioned in the documentation, you could also write:
{% for text in texts %}
<div class="post">
<div class="post-title">{{text.subject}}</div>
<pre class="post-content">{{text.content}}</pre>
</div>
{% else %}
<div>{{ error }}</div>
{% endfor %}
It handles both the case where texts is undefined, and the case where texts is empty.
This is a neat and simple solution that worked well for me!
{% if texts is defined and texts[0] is defined %}
...
{% endif %}
It's possible that texts could be defined but contain a single list element which is an empty string; For example:
texts = ['']
In this case, testing if texts is defined will produce a true result so you should test the first element instead:
{% if texts[0] != '' %}
..code here..
{% endif %}
You might also want to combine that with the |length filter to make sure it only has one element.
This worked for me when working with the UPS API where if there is only one object in a parent object the child is just an object, but when there is more than one child it's a array of objects.
{% if texts[0] %}
..code here..
{% endif %}
This is what worked for my use case in my Django app:
I needed to pass a queryset as context to an html template and display the block only if the queryset had values
Queryset:
events = Event.objects.filter(schedule_end__gte=date.today()).order_by('-created_at')
Passed context dictionary as follows:
{ "events" : events }
HTML template
{% if events %}
<h3>Upcoming Events</h3>
<ul>
{% for event in events %}
<li><h4>{{ event.title }}</h4></li>
{% endfor %}
</ul>
{% endif %}
This works for me ( But I make sure to return an empty array [] and not None if its empty )
{% if array %}
<table class="table">
...
</table>
{% endif %}
We can check if array is not empty by writing below jinja code.
where the content2 is an array defined under py file. #app.route("/<name>") def home(name): return render_template("index.html", content=name, content2=[])
{% if content2 %}
<div>
<h2>Array elements are available</h2>
{% for con2 in content2 %}
<p> {{con2}} </p>
{% endfor %}
</div>
{% endif %}
Thanks