Accessing an array with a variable in Jekyll/Liquid templating - html

I have the following code in my template:
{% for post in site.posts %}
{% capture num_colors %}{{ site.colors | size }}{% endcapture %}
{% capture color_index %}{{ forloop.index0 | mod: num_colors }}{% endcapture %}
<a href="{{ post.url }}" class="post-box" rel="bookmark" title="{{ post.title }}">
<div class="post-block {{ site.colors[color_index] }}">
<div class="contents">
<div class="cat-tag">
{{ post.categories[0] | upcase }}
</div>
<h2>{{ post.title }}</h2>
</div>
</div>
</a>
{% endfor %}
This keeps returning nothing: {{ site.colors[color_index] }} even though num_colors, color_index, and site.colors will all return the correct things when I try and print them.
colors is defined in my _config.yml as:
colors: [light_blue, coral, yellow, teal, blue, deep_blue]
I'm using a plugin to get modulus. Basically I just want to attach a class for each post that will start over when its gone beyond the total number of colors. This seems straightforward so I'm confused.

Replace
{% capture num_colors %}{{ site.colors | size }}{% endcapture %}
{% capture color_index %}{{ forloop.index0 | mod: num_colors }}{% endcapture %}
by :
{% assign num_colors = site.colors | size %}
{% assign color_index = forloop.index0 | modulo: num_colors %}

Related

JSONIFY Filter Odd Behavior in Jekyll

Goal
Display JSON similar to this from links that have the same category minus the current page.
"relatedLink": [ "https://example.com/category-slug/page-title.html", "https://example.com/category-slug/page-title.html", "https://example.com/category-slug/page-title.html" ],
Code
{% capture results %}[
{% for category in page.categories %}
{% for post in site.categories[category] %}
{% if post.url != page.url %}
{{ post.url | relative_url | prepend: site.url | replace:" ", "," | jsonify }}{% endif %}{% if forloop.last %}]{% else %}{% endif %}
{% endfor %}{% endfor %}{% endcapture %}
"relatedLink": {{ results }},
Results Error in JSON-LD
"relatedLink": [ "https://example.com/category-slug/page-title.html" "https://example.com/category-slug/page-title.html" "https://example.com/category-slug/page-title.html" ],
jsonify did not comma separate the values in the array.
I think this is expected behavior. You're calling jsonify on post.url. jsonify converts Hashs or Arrays to JSON, not strings.
The best way to get what you want is probably this:
{% capture results %}[
{% for category in page.categories %}
{% for post in site.categories[category] %}
{% if post.url != page.url %}
"{{ post.url | relative_url | prepend: site.url }}"{% unless forloop.last %},{% endunless %}
{% endif %}
{% endfor %}
{% endfor %}]
{% endcapture %}
"relatedLink": {{ results }}

Adding tags to jekyll hyde blog

I am trying to add tags to my blog based on jekyll hyde.
This is what I have in place right now.
_includes/filter_by_tag.html
<div class="message">
Filter by tag:
{% assign all_tags = site.data.tags %}
{% for tag in all_tags %}#{{ tag[1].name }}
{% endfor %}
</div>
_includes/tags_for_page.html
{% assign post = page %}
{% if post.tags.size > 0 %}
{% capture tags_content %}{% if post.tags.size == 1 %}<i class="fa fa-tag"></i>{% else %}<i class="fa fa-tags"></i>{% endif %} {% endcapture %}
{% for post_tag in post.tags %}
{% assign tag = site.data.tags[post_tag] %}
{% if tag %}
{% capture tags_content_temp %}{{ tags_content }}#{{ tag.name }} {% if forloop.last == false %}<!--comma-->{% endif %}{% endcapture %}
{% assign tags_content = tags_content_temp %}
{% endif %}
{% endfor %}
{% else %}
{% assign tags_content = '' %}
{% endif %}
_layouts/blog_by_tag.html
---
layout: default
---
{% assign tag = site.data.tags[page.tag] %}
<div class="page">
<h1 class="page-title">Articles by tag: #{{ tag.name }}</h1>
<div class="message">
All tags:
{% assign all_tags = site.data.tags %}
{% for tag in all_tags %}#{{ tag[1].name }}
{% endfor %}
</div>
<div>
{% if site.tags[page.tag] %}
{% for post in site.tags[page.tag] %}
{{ post.date | date_to_string }} » {{ post.title }}<br>
{% endfor %}
{% else %}
<p>There are no posts for this tag.</p>
{% endif %}
</div>
</div>
_layouts/post.html
comments: true
---
{% include tags_for_page.html %}
<div class="post">
<h1 class="post-title">{{ page.title }}</h1>
<span class="post-date">{{ page.date | date_to_string }} {{ tags_content }}</span>
{% if page.cover_image %}
<img src="{{ page.cover_image }}" alt="{{ page.title }}">
{% endif %}
{{ content }}
</div>
archive.md
title: Blog Archives
{% include filter_by_tag.html %}
{% for post in site.posts %}{{ post.date | date_to_string }} » [ {{ post.title }} ]({{ post.url }})
{% endfor %}
I am not sure where am I going wrong here, I tried following the content from this blog post here, tried replicating the same for my blog but I can't see the tags being generated and displayed.
Not sure where am I going wrong.
Link to my blogs github repo where I am trying to add tags
link to the blog where you can see the blog.
Commit hash where I tried adding the tags
I had missed out the file
_data/tags.yml
whose contents would be like
ansible:
name: ansible
apache:
name: apache
and so on

jekyll/liquid - how to pass variable as an argument to post.title contains statement?

I'm trying to filter results of the loop based on hashtags included in titles. If done manually it works perfectly:
<article class="post-preview">
<a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
{% if post.title contains "#hashtag" %}
<br>
<div class="float-left">
{% include read-time.html %}
</div>
<h2 class="post-title">{{ post.title }}</h2>
{% if post.subtitle %}
<h3 class="post-subtitle">{{ post.subtitle }}</h3>
{% else %}
<h3 class="post-subtitle">{{ post.excerpt | strip_html | truncatewords: 15 }}</h3>
{% endif %}
</a>
<p class="post-meta float-right">Posted by
{% if post.author %}
{{ post.author }}
{% else %}
{{ site.author }}
{% endif %}
on {{ post.date | date: '%B %d, %Y' }}</p><br>
{% endif %}
</article>
what I'd like to achieve is to be able to use variable instead of string:
e.g.
{% if post.title contains "{{ content }}" %} - (this way it doesn't work)
instead of
{% if post.title contains "#hashtag" %}
Is there a way to pass variable to post.title contains, or any other way to achieve my goal i.e. filtering results of for loop based on the hashtag in the title ?
Simply write the variable name after contains. Example:
{% assign a = "Sample text" %}
{% assign b = "text" %}
{% if a contains b %}
Variable 'a' contains the value of variable 'b'! :)
{% endif %}
In your case, a will be post.title and b will be content.

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 }}

jekyll variables, if functions

Why is something like this not working ?
i try to filter all posts from this year
<div class="tiles">
{% for post in site.categories.articles %}
{% capture pubyear %} {{ post.date | date: "%Y" }} {% endcapture %}
{% if pubyear == "2014" %}
{% include post-grid.html %}
{% endif %}
{% endfor %}
</div><!-- /.tiles -->
The problem is that it is capturing the output with some spaces in it, so it fails the if condition, remove those spaces and it should work
<div class="tiles">
{% for post in site.categories.articles %}
{% capture pubyear %}{{ post.date | date: "%Y" }}{% endcapture %}
{% if pubyear == "2014" %}
{% include post-grid.html %}
{% endif %}
{% endfor %}
</div>
Capturing the pubyear is vaild but you can also assign pubyear with no spaces.
{% assign pubyear = post.date | date: "%Y" %}