I'm looping through two products - on the post view page I pull in a secondary post (in the example, a related recipe) which parses just fine on the first product page - on the second product page just {{ post.content }} won't parse. I can hack it with {{ post.content | markdownify }} - but I'd like to know why it's breaking. Here's the relevant code:
{% for post in site.categories.recipe %}
{% if post.products contains page.title and post.featured %}
<div class="row">
<div class="four columns">
<h4>{{ post.title }}</h4>
<ul>
<li>Serves {{ post.serves }}</li>
<li>Prep: {{ post.time }}</li>
<li>Share</li>
</ul>
{{ post.content }}
...
<!-- All tags are closed, the rest just isn't relevant -->
{% endif %}
{% endfor %}
Please find my solution with counter
<pre>
{% assign counter=0 %}
{% for post in site.posts%}
{% if post.category == 'blog' and counter < 2 %}
{% assign counter=counter | plus:1 %}
{{post.content}}
{% endif %}
{% endfor %}
</pre>
The markdownify filter is probably making it work because there might be special characters that aren't encoded in the content you're pulling from. I always forget to make my & into &.
If you're using the default Markdown interpreter Maruku, here's a list of the entities that might be giving you problems and their encoded equivalent. http://maruku.rubyforge.org/entity_test.html and more info on Maruku. http://maruku.rubyforge.org/maruku.html
Related
I think I'm not even sure what I should be searching for. On my Jekyll Blog I currently have just blog posts that have been written and listed with their full content on the main page and using pagination. I want to follow more Indie Web standards and follow a PESOS (Publish Elsewhere, Syndicate (to your) Own Site) method. I've figured out a way to get data from my Twitter (e.g. post_date, embed code, etc) into a YAML data file automatically. What I want to do is take the data from my posts and combine the data from Twitter and include those posts as if they were also blog posts (the plan is to do the same with Instagram as well).
I've tried a lot of things, but I'm not even sure what is the best way to go about doing this. I'm assuming that it will use something similar to Using Jekyll, how do you alter an array's contents using a for loop?, but I can't seem to make it work. My code for the blog posts is as follows currently:
{% for post in paginator.posts %}
{% if post.header.teaser %}
{% capture teaser %}{{ post.header.teaser }}{% endcapture %}
{% else %}
{% assign teaser = site.teaser %}
{% endif %}
{% if post.id %}
{% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" %}
{% else %}
{% assign title = post.title %}
{% endif %}
<div class="list__item">
<article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
<h1 class="archive__item-title" itemprop="headline">
{% if post.link %}
{{ title }} <i class="fas fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span>
{% else %}
{{ title }}
{% endif %}
</h1>
<p>Posted on {{ post.date | date: "%A %B %-d, %Y" }} by Jacob Campbell.</p>
{{ post.content }}
</article>
</div>
{% endfor %}
{% include paginator.html %}
Maybe, if your posts and tweets do have the same structure in terms of fields you could concat the two:
{% comment %} Given that you make the tweets accessible from site, as a collection, for example {% endcomment %}
{% assign posts = paginator.posts | concat: site.tweets | sort: "date" %}
{% for post in posts %}
<h2>{{ post.title }}</h2>
<div>{{ post.content }}</div>
{% endfor %}
Mind that, here I am also resorting the list after the concat, via the sort filter, so the tweets do appear in the normal time series of the posts.
And if your structures are not the same, you can always resort to the collection in which your post is:
{% assign posts = paginator.posts | concat: site.tweets | concat: site.instagram | sort: "date" %}
{% for post in posts %}
{% if post.collection == 'posts' %}
<h2>{{ post.title }}</h2>
<div>{{ post.content }}</div>
{% elsif post.collection == 'tweets' %}
{% comment %} If I am not mistaken, twitter have no title concept {% endcomment %}
<h2>There was a bird singing about:</h2>
<div>{{ post.content }}</div>
{% elsif post.collection == 'instagram' %}
{% comment %} So, now, it can fit any social media of your choice {% endcomment %}
{% endif %}
{% endfor %}
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 am trying to make a blog and I want to make id tags that correspond with each time a for loop runs (e.g. #section_1, #section_2,#section_(insert variable) ).
Is there some way to do that in Jekyll?
This should produce what you're looking for:
{% assign indices = "1|2|3" | split: "|" %}
{% for index in indices %}
<div id="{{ index }}">This is div {{ index }}</div>
{% endfor %}
You'll have to know in advance how many sections that you want created, and add each ID to the 1|2|3 bit in the first line.
Use the forloop.index
The menu part :
<ul>
{% for posts in site.posts %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
Content part :
{% for posts in site.posts %}
<h2 id="section_{{ forloop.index }}">{{ post.title }}</h2>
{{ post.content }}
{% endfor %}
I try to do things like this in my post:
<ul class="articles-list">
{% for post in site.posts | where:'group', post.group %}
<div data-scroll-reveal="enter ease 0">
{% include article-snippet.html %}
</div>
{% endfor %}
</ul>
but it loops through all my collection instead the only loops posts with special group.
You cannot use where filter in a loop.
But you can do :
{% assign posts = site.posts | where:'group', post.group %}
<ul class="articles-list">
{% for post in posts %}
<div data-scroll-reveal="enter ease 0">
{% include article-snippet.html %}
</div>
{% endfor %}
</ul>
According to liquid documentation about filters they should be used inside output tags {{ and }}.
You can maybe try an if statement:
{% for post in site.posts %}
{% if post.group == 'group' %}
<div data-scroll-reveal="enter ease 0">
{% include article-snippet.html %}
</div>
{% endif %}
{% endfor %}
Also you should use the where filter a bit differently. Something like this:
{{ site.members | where:"graduation_year","2014" }}
This says select site members whose graduation_year is 2014. You don't need to specify that it should filter members, the first part implicitly states that.