I'm building a simple blog using Jekyll. I'm looping through all of my posts which works a treat. However, I'd like to add a number marker to each post. For example the first post would be marked with a 1, second with a 2... and so on.
My current loop likes like this:
<ol class="post-list">
{% for post in site.posts %}
<li class="post-item">
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
<div class="post-info">
<p>Post #1</p>
<h2>{{ post.title }}</h2>
</div>
</a>
</li>
{% endfor %}
</ol>
I understand I need to add a count to this loop but I'm unsure how.
Adding the following to my loop seems to make sense:
{% for num in (1...n) %}
But I'm not sure how to use this with my existing loop.
Any help would be gratefully received.
In each liquid loop you have a counter out of the box : forloop
Change : <p>Post #1</p> for : <p>Post #{{ forloop.index }}</p>
Documentation here.
If you don't need to count them automatically you can simple add the variable to your posts:
---
number: 1
---
Than call it via
{{ post.number }}
Related
On my Jekyll website, I have an overview page on which I list my last 10 blog posts.
However, I also assign a tag exclude to some of my blog posts and those I don't want to show. This works, but then I don't get the last 10 blog posts, but 10 minus the number of exclude blog posts.
Here is how that looks like:
---
layout: page
title: "Last posts"
permalink: /last/
---
### Last posts
{% for post in site.posts limit:10 %}
{% unless post.category == "exclude"%}
* {{ post.date | date_to_string }} » [ {{ post.title }} ]({{ post.url }})
{% endunless %}
{% endfor %}
How can I always show the last 10 non-exclude blog posts?
To show the last 10 non-exclude blog posts:
Create an array with posts that doesn't contain the exclude tag.
{% assign nonexcludeposts = ''|split:''%}
{% for post in site.posts %}
{% unless post.category == "exclude"%}
{% assign nonexcludeposts = nonexcludeposts|push:post%}
{% endunless %}
{% endfor %}
Display 10 most recent posts
<ul>
{% for post in nonexcludeposts limit:10 %}
<li>
{{post.title}}
</li>
{% endfor %}
</ul>
I am trying to loop over a nested list in my posts font matter and display an associated image (using svg) for each nested item
post front matter:
---
layout: post
title: title of this post
spec:
- name: tee
- name: mobile
---
using a for loop in my post.html file
<div>
<h4>specs</h4>
{% for item in page.spec %}
<svg class='spec-icon'><use xlink:href="#icons_{{item.name}}"/</svg>
{% endfor %}
</div>
I would like this to render like below
<div>
<h4>specs</h4>
<svg class='spec-icon'><use xlink:href="#icons_tee"/></svg>
<svg class='spec-icon'><use xlink:href="#icons_mobile"/></svg>
</div>
for every neseted name:vale pair under spec:, I would like there to be a unique svg element created with that nested value included in the #id
???
Try this:
---
layout: post
title: title of this post
spec: [tee, mobile]
---
Then:
<div>
<h4>specs</h4>
{% for item in page.spec %}
<svg class='spec-icon'><use xlink:href="#icons_{{ item }}"/</svg>
{% endfor %}
</div>
Hope to have helped! Let me know if this works, yeah?
I have a for loop in Twig. I'm trying to access different elements in a for loop so I can use them in different places on my website.
Let'say I have a template called 'images'. Inside that template I have a for loop like so:
{% for image in images %}
<div>
<img src="{{ image | url_image }}" width="100" height="100" />
</div>
{% endfor %}
In a different template I'm trying to include this 'images' template. So what I have is this:
{% include 'images.html' %}
The problem I'm facing right now is that I only want the second element from the for loop in the images.html template. How do you do that?
So I want something like this:
<div>
{% include 'images.html' with {'second element'} only %}
</div>
Does anyone know what the best approach is or how do you do that? I'm pretty new to Twig as you can see ;)
You almost already found your answer!
Use the for with condition syntax:
{% for key,image in images if key==elementNumber %}
<div>
<img src="{{ image | url_image }}" width="100" height="100" />
</div>
{% endfor %}
And call you template with the parameter's value you need (keeping in mind that key starts at 0, so the example bellow will give you the second element):
<div>
{% include 'images.html' with {elementNumber: 1} %}
</div>
This syntax is useful if you want to do some "elaborated" things like if key<elementNumber
But if you need only one element at a time, this might be better, instead of the for loop:
<div>
<img src="{{ images[elementNumber] | url_image }}" width="100" height="100" />
</div>
Ok I have a base.html and I try to use that for my header menu and footer. In my other template I loop over items and display them on the page. My problem is the the other template is repeating my base.html like it's in the loop. I hope someone can show me the error in My ways.
Here is my base.html code:
<div class="menu">
<ul class="nav">
<li>Home</li>
<li>New Entry</li>
<li>Sign-up</li>
{% if user %}
<li>{{user.name}}</li>
<li>Log-Out</li>
{% else %}
<li>Log-In</li>
{% endif %}
</ul>
This is in the base.html also but didn't paste correctly.
<div id="content">
{% block content %}
{% endblock %}
</div>
And here is the sub template code:
{% extends "base.html" %}
{% block content %}
{% for p in posts %}
{{ p.render() | safe }}
<br><br>
{% endfor %}
<div>
{{text}}
</div>
{% endblock %}
Please help
Edit:
edit2: removed link and found my problem I was calling the wrong html file in render()
Be kind Newbie here
Looks ok. Are you sure you don't have a loop in the python code that renders the template?
How to use this solution https://stackoverflow.com/a/10067749/604240 in jinja 2 template?
I agree my question was due to lack of knowledge than problem. Eventually I figured it out how to achieve it. Basically I didn't know how to link loop from python code to query so it's available to Jinja2 template.
Although correct solution might be to use map() with callback function https://developers.google.com/appengine/docs/python/ndb/queryclass#Query_map but I am using temporary solution which is working for me for now.
query = Image.query()
query2 = query.filter(Image.is_slider == 'yes')
for item in query2:
item.parent = item.key.parent().get()
and in template
{% for item in query2 %}
<img src="{{ item.url }}=s1000" alt="{{ item.title }}" title="{{ item.title }}" />
<h2>{{ item.title }}</h2>
<h3>{{ item.gallery }}</h3>
Go to gallery
{% endfor %}
Why don't you just try {{ item.key.parent().get().slug }} on your jinja2 template (assuming that slug is a property of your Gallery entity).