Twig Template: Looping a two dimensional Array - html

I have an PHP Array like this:
$fruits = array(
array("Apple", 1.25),
array("Banana", 0.86),
);
What I wanted:
Then I simply wanted the HTML output like this:
Fruit: Apple
Price: 1.25
Fruit: Banana
Price: 0.86
What I tried:
I have already tried looping like:
{% for fruits in data["fruits"] %}
{% for fruit in fruits %}
Fruit: {{ fruit[0] }}
Price: {{ fruit[1] }}
{% endfor %}
{% endfor %}
.. which didn't work.
Only this worked:
{% for fruits in data["fruits"] %}
{% for fruit in fruits %}
{{ fruit }}
{% endfor %}
{% endfor %}
.. but it gave the output like this:
Apple 1.25 Banana 0.86
How do I get the result like I mentioned in "What I wanted:" section above, please?

You just could do this:
{% for fruit in fruits %}
Fruit: {{ fruit[0] }}<br />
Price: {{ fruit[1] }}<br />
{% endfor %}

Related

How to count current showing products in Shopify 2.0 dawn theme?

In collection page of dawn(version 5.0.0) theme Shopify, there is and inbuilt functionality to see the total number of products.
I want show that how many current product are showing when more products are getting into pagination.
There is 2 modification in 2 files of dawn theme.
in facets.liquid file add below code under the span id ProductCountDesktop.
{% if next_link %}
{{ offset | plus: 1 }} - {{ offset | plus: page_size }} of
{% else %}
{% capture itemsOnCurrentPage %}
{{ results.all_products_count | minus: offset }}
{% endcapture %}
{% if results.all_products_count > 0 %}{{ offset | plus: 1 }}{% else %}{{ offset }} {% endif %}- {{ offset | plus: itemsOnCurrentPage }} of
{% endif %}
now replace render: facets with below code in main-collection-product-grid.liquid file.
{%- paginate collection.products by section.settings.products_per_page -%}
{% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering,
filter_type: section.settings.filter_type, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices,
offset : paginate.current_offset,next_link:paginate.next.is_link,page_size:paginate.page_size %}
{%- endpaginate -%}

How to use Jekyll to sort posts by a custom YAML front matter variable?

I'm trying to create a page in my Jekyll site that will display a custom variable and list the posts that contain that custom variable.
I have created a movie review blog using a template Thiago Rossener created:
Thiago's Template: https://github.com/thiagorossener/jekflix-template
My Site: https://www.howdareyoureview.com/
in each post, I have defined custom variables in the YAML front matter that relate to the movie's details (i.e actor, director score, etc.)
for example:
---
layout: post
title: "Baby Driver"
image: 'https://res.cloudinary.com/how-dare-you-review/image/upload/c_fill,h_399,w_760/v1529865791/baby-driver.png'
tags:
- action
score: 72
director: Edgar Wright
written-by: Edgar Wright
staring:
- Ansel Elgort
- Lily James
- Eiza González
- Jon Hamm
- Jamie Foxx
---
I want to create pages exactly like the tags page that already exists in this template:
https://www.howdareyoureview.com/tags/
except I would want to sort by director, starring, etc. instead of by tags.
the tags page is created using the following code in a tags.html file:
---
layout: minimal
title: "#Tags"
permalink: /tags/index.html
description: "Procure por sua #tag favorita."
---
<div class="tags">
{% assign tags_list = site.tags %}
{% if tags_list.first[0] == null %}
{% for tag in tags_list %}
{{ tag }}
{% endfor %}
{% else %}
{% for tag in tags_list %}
{{ tag[0] }}
{% endfor %}
{% endif %}
{% assign tags_list = nil %}
</div>
{% for tag in site.tags %}
<div class="tag-wrapper">
<span class="tag-title" id="{{ tag[0] | slugify }}">{{ tag[0] }}</span>
<ul class="post-list">
{% assign pages_list = tag[1] %}
{% for post in pages_list reversed %}
{% if post.title != null %}
{% if group == null or group == post.group %}
<li>{{ post.title }}<span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: "%m/%d/%Y" }}</time></li>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
</ul>
</span>
</div>
{% endfor %}
To achieve this for the custom variables I created I tried replacing "tag/tags" with director and saving the file out into to root directory as "directors.html" but the page is blank.
---
layout: minimal
title: "#Directors"
permalink: /directors/index.html
description: "Procure por sua director favorita."
---
<div class="directors">
{% assign directors_list = site.director %}
{% if directors_list.first[0] == null %}
{% for director in directors_list %}
{{ director }}
{% endfor %}
{% else %}
{% for director in directors_list %}
{{ director[0] }}
{% endfor %}
{% endif %}
{% assign directors_list = nil %}
</div>
{% for director in site.director %}
<div class="director-wrapper">
<span class="director-title" id="{{ tag[0] | slugify }}">{{ director[0] }}</span>
<ul class="post-list">
{% assign pages_list = director[1] %}
{% for post in pages_list reversed %}
{% if post.title != null %}
{% if group == null or group == post.group %}
<li>{{ post.title }}<span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: "%m/%d/%Y" }}</time></li>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
</ul>
</span>
</div>
{% endfor %}
Since the code and the concept is exactly the same as the way tags are populated - I cannot understand why this doesn't work - I'm hoping someone can assist!
Here is my entire directory for reference:
https://github.com/howdareyoureview/howdareyoureview.github.io
Tags page uses site.tags, which is an array of site.posts grouped by tag, created by Jekyll at generation time.
You're trying to replicate by targeting site.directors but this expected array doesn't exist. But, you can use the group_by filter to achieve your goal.
<div class="directors">
{% assign directors = site.posts | group_by: 'director' | sort: "name" %}
{% for director in directors %}
{% if director.name == "" %}
{% assign name = "Anonymous" %}
{% else %}
{% assign name = director.name %}
{% endif %}
{{ name }}
{% endfor %}
</div>
{% for director in directors %}
<div class="director-wrapper">
{% if director.name == "" %}
{% assign name = "Anonymous" %}
{% else %}
{% assign name = director.name %}
{% endif %}
<span class="director-title" id="{{ name | slugify }}">{{ name | debug }}</span>
<ul class="post-list">
{% assign pages_list = director.items %}
{% for post in pages_list reversed %}
<li>{{ post.title }}<span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: "%m/%d/%Y" }}</time></li>
{% endfor %}
</ul>
</span>
</div>
{% endfor %}
Tip : You can use the inspect filter to debug your vars. {{ myvar | inspect }}

How to loop through categories in a Jekyll collection

I'm trying to loop through categories that have been added to collection posts. For the default 'posts' section it's as easy as:
{% for category in site.categories %}
{{ category }}
{% endfor %}
But I can't seem to get this working for my collection. I thought it would be something along the lines of:
{% for category in my_collection.categories %}
{{ category }}
{% endfor %}
But that doesn't seem to work. Any help would be appreciated.
for anyone needing the answer to this...I've managed to solve this by adding all unique 'my_collection' categories to an array then looping through that. Here's the code:
<!-- create categories array-->
{% assign categories_array = "" | split:"|" %}
<!--Add each unique 'my_collection' category to the array-->
{% for post in site.my_collection %}
{% for category in post.categories %}
{% assign categories_array = categories_array | push: category | uniq %}
{% endfor %}
{% endfor %}
<!--Output the categories-->
{% for category in categories_array %}
{{ category }}
{% endfor %}
you can grab the name of each category like so:
{% for category in site.categories %}
{{ category | first | strip_html }}
{% endfor %}
You first have to declare the collection
{%a assign col = site.COLLECTIONNAME %}
Then you can loop inside the collection
{% for cat in col %}
{{ col.name }}
{% endfor %}

Jekyll, Liquid - get posts belonging to category1 and category2

I produced an overview page for all posts from the category "Tutorials" like this:
<ul class="post-list">
{% for post in site.categories.Tutorials %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
But now I would like to produce an index page for posts with both category "Tutorials" and category "German". But how?
The post I would like to have in this overview page is this one:
---
layout: post
title: 'German tutorial'
categories: [Tutorials, German]
---
Posts I would not like to have in this overview page are posts with a header like this:
---
layout: "post"
title: "English totorial"
categories: [Tutorials, English]
---
I tried for example:
{% for post in site.categories.Tutorials & site.categories.German %}
but this doesn't work...
I easily would switch to tags instead of categories, if this makes it easier.
Get the first category array : site.categories.Tutorials then sort German category posts out of it :
{% assign tutorials = site.categories.Tutorials %}
{% comment %}Creates an empty array{% endcomment %}
{% assign germansTutos = "" | split: "/" %}
{% for p in tutorials %}
{% if p.categories contains "German" %}
{% assign germansTutos = germansTutos | push: p %}
{% endif %}
{% endfor %}
<ul>
{% for post in germansTutos %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
You can also simply assign a tutorial category and a lang variable to your posts and filter them by the power of the where filter.
eg:
---
layout: post
title: "Post 1"
date: 2016-01-27 00:29:55 +0100
categories: Tutorials
lang: ge
---
Post one
You can then sort your posts like this :
{% assign tutorials = site.categories.Tutorials %}
{% assign germanTutos = tutorials | where: 'lang', 'ge' %}
<ul>
{% for post in germanTutos %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>

Sorting/grouping collections for an archive

I am building my first site and am having a very difficult time grouping/sorting collections. The only success I have had is a list of files sorted alphabetically by subdirectory, then by files by their dates (seems to be the default) using:
<ul>
{% for page in site.collection_name | sort: weight %}
<h3>{{ page.title }}</h3>{{ page.category }}{{page.excerpt}}
{% endfor %}
</ul>
Weight (above) does not work. Neither did type, category, or any other variable I substituted.
My files are in subdirectories, and have permalinks as:
/collection_name/category_name/file_name/
Front matter includes:
title,
category,
layout,
type,
(tried several others)
The collection will have several file types such as:
articles,
videos,
research
What I want to accomplish is something that loops through my collection first for category, then by type. In very bad pseudo code:
<ul>
{% for page in site.{{category_name}} %}
<li><h2>{{category01}}</h2></li>
<ul>
{% for type in site.{{category_name.type}} | sort: date reverse%}
<li><h3>Articles</h3></li>
<li>{{ page.title }}{{page.excerpt}}</li>
<li><h3>Videos</h3></li>
<li>{{ page.title }}{{page.excerpt}}</li>
<li><h3>Research</h3></li>
<li>{{ page.title }}{{page.excerpt}}</li>
</uL>
<li><h2>{{category02}}</h2></li>
. . .
. . . {% endfor %}
Any help or direction will be appreciated.
Try to use group_by :
{% assign byCategory = site.collection_name | group_by: 'category' | sort: 'name' %}
{% for cat in byCategory %}
<h2>{{ cat.name | capitalize }}</h2>
{% assign byType = cat.items | group_by: 'type' %}
{% for type in byType %}
<h3>{{ type.name | capitalize }}</h3>
<ul>
{% for item in type.items %}
<li>{{ item.title }}</li>
{% endfor %}
</ul>
{% endfor %}
{% endfor %}
Note: this works with category: mycategory not with categories: [one, two]
If you want to specifically order types, you can do :
_config.yml
# this array determine types order
# a collection itm with non matching type will not be listed
types :
- articles
- videos
- research
code
{% assign byCategory = site.area | group_by: 'category' %}
{% for cat in byCategory %}
<h2>{{ cat.name }}</h2>
{% assign byType = cat.items | group_by: 'type' %}
{% for type in site.types %}
{% assign currentType = byType | where:"name", type | first %}
<h3>{{ currentType.name | capitalize }}</h3>
<ul>
{% for item in currentType.items %}
<li>{{ item.title }}</li>
{% endfor %}
</ul>
{% endfor %}
{% endfor %}