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?
Related
In Django I am trying to loop through all of the children of my Todo model. But whenever I try to run it, it gives me an AttributeError that says "Manager isn't accessible via Todo instances". My code looks like this:
{% extends 'base.html' %}
{% block content %}
<h3>Tasks</h3>
{% for t in model.objects.all %} <!-- Error -->
<p>{{t.name}}</p>
{% endfor %}
{% endblock %}
{% block options %}
<li class="bg-light py-3 w-100 px-4 rounded text-nowrap fs-4">
<button class="text-decoration-none text-dark">Save</button>
</li>
{% endblock %}
I tried to just put the model in the context, and then I got an error in the HTML, so I figured out that it happened when I tried to reference 'model.objects.all'.
Inside of your view you need to specify what django should pass to the template. It does not serve the entire Database; therefore queries like in model.objects.all inside of your templates are not allowed.
Specify the queryset inside your views.py:
def todo_view(request):
context = {}
context['my_todos'] = my_todo_model.objects.all()
context['most_important_todo'] = my_todo_model.objects.get(pk=1)
# put your own logic inside the `.get` method above
return render(request, 'my_template.html' context)
And then access it inside of your template like so:
{% for t in my_todos %}
<p>{{ t.name }}</p>
{% endfor %}
{{ most_important_todo.name }}
Because we put a queryset inside of my_todos we can loop over it in the template. most_important_todo ist just a single object passed to the template, so we can access its properties (e.g. the name) directly.
Let me know how it goes
I am a true beginner in Wagtail. How do I generate a list of pages in the sections for a sidemenu in Wagtail?
I have the following site structure, as an example:
home/
fruits/
apples/
oranges/
grapes/
vegetables/
kale/
spinach/
cabbage/
home is of HomePage type using home_page.html template , and all the subpages are of ContentPage type using content_page.html template.
I want to make a side menu for all the content pages, listing all the pages in their groups. For example, this list:
Fruits
Apples
Oranges
Grapes
should be the sidemenu for the pages fruits, apple, oranges, and grapes.
page.get_children in the template only lists out if the page has children, so, in this case just fruits and vegetables.
How would I go about making that sidemenu?
The examples in Wagtail's documentation seem to imply that I can't have just a generic content type like ContentPage to have the sort of listing that I want, is that true?
Thanks a bunch!
welcome to Wagtail!
As with most things in web development, there are a few ways you can do this. The simplest to understand when you're just starting is to do this all through the template. So in your home_page.html you could have:
{% for parent in page.get_children %}
Page title: {{ parent.title }} <br />
{% if parent.get_children.count %}
{% for child in parent.get_children %}
- Child page title: {{ child.title }}<br/>
{% endfor %}
{% endif %}
{% endfor %}
What this does is:
Loops through the child pages of HomePage (labeled as parent in this loop) and prints Page title: {title_here}
Then it'll check for child pages of each parent loop iteration and print - Child page title: {child_title}
There's a gotcha here though. This will only work on the home_page.html template. Once you go to /fruits/ it'll try to perform the same logic, but this time it'll think Fruits is the new HomePage
There are 2 options you can take from here.
You can add custom context to every page to make sure you're always passing in the HomePage and loop through that. This is the simplest method and I'll show you the code below. Or,
You can create a Menu system using a Django Model and registering the Menu class as a Wagtail Snippet. I have a video with all the source code available if you want to take a deeper dive into Wagtail (https://www.youtube.com/watch?v=Y8a9ROUUJXU)
To add HomePage to every ContentPage you can add it to the context of every page, like so:
class ContentPage(Page):
# Fields here
def get_context(self, request, *args, **kwargs):
"""Adding HomePage to your page context."""
context = super().get_context(request, *args, **kwargs)
context["home_page"] = HomePage.objects.first()
return context
And in your templates you'd write:
{% for child_page in home_page.get_children %}
Page title: {{ child_page.title }} <br />
{% if child_page.get_children.count %}
{% for grandchild_page in child_page.get_children %}
- Child page title: {{ grandchild_page.title }}<br/>
{% endfor %}
{% endif %}
{% endfor %}
Edit: If you're on a grandchild page, like /fruits/apples/ and want to display the parent page title, and all the sibling pages (ie. /fruits/oranges/ and /fruits/grapes/) you can loop through the sibling pages. Something like this should work:
<!-- On `/fruits/` this will be the Home Page title. On `/fruits/apples/` this will be the Fruits page title. -->
<h2>{{ self.get_parent.title }}<h2>
{% for sibling in self.get_siblings %}
{{ sibling.title }}
{% endfor %}
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'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 }}
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>