Suddenly, using jekyll 3.4.3 for a while now, this loop for rendering collection items has stopped working for me...
{% for work in site.work %}
{% if work.featured %}
{% assign mod = forloop.index | modulo:2 %}
{% if mod == 0 %}
<a href="{{work.url}}"><div class="col-xs-12 col-md-6 col-md-offset-5 featured-work">
<div class="featured-work-title">{{work.title|replace: " ","</br>"}}</div>
<div class="featured-work-image" style="background-image: url(/images/{{work.image}});"></div>
</div></a>
{% else %}
<a href="{{work.url}}"><div class="col-xs-12 col-md-6 featured-work">
<div class="featured-work-title">{{work.title|replace: " ","</br>"}}</div>
<div class="featured-work-image" style="background-image: url(/images/{{work.image}});"></div>
</div></a>
{% endif %}
{% endif %}
{% endfor %}
This is my _config.yaml
collections:
work:
output: true
permalink: /work/:path/
And this is a sample of one of the items
---
layout: work
featured: true
title: Eluu.ee
link: http://eluu.ee
punchline: What does it take to sell a toy.
image: eluu.jpg
disciplines:
- Website
- Ecommerce
- Voog
year: Ongoing
---
In late 2016, I .....
Nothing gets put to the page, no errors are given.. when outputting site.collections.work alone, all the content IS there.... What's wrong?
An update to jekyll 3.5 worked.
Related
what I'm trying to do is bring products pictures and titles from specific collection into my product recommendation module.
This is the module im trying to call my products.
{% if section.settings.show_product_recommendations %}
<div class="product-recommendations"
data-section-type="product-recommendations"
data-components="product-block"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=12">
{% if recommendations.performed and recommendations.products_count > 0 %}
<div class="product-recommendations-container product-slider">
<div class="wide-container section-spacing">
<div class="product-list swiper-container" data-products-in-view="{{ section.settings.grid }}">
<h2 class="h2 section-heading" data-cc-animate>
{{ section.settings.title }}
</h2>
<div class="swiper-wrapper" data-normheights=".image" data-normheights-inner="img">
{%- for product in recommendations.products -%}
<div class="swiper-slide">
{% render 'product-block', product: product, product_class: product_class, i: forloop.index, animate: forloop.index, show_vendor: section.settings.show_vendor, hide_swatches: section.settings.hide_swatches %}
</div>
{%- endfor -%}
</div>
<div class="swiper-scrollbar"></div>
{% render 'svg-chevron-left' %}
{% render 'svg-chevron-right' %}
</div>
</div>
</div>
{% endif %}
</div>
{% endif %}
So far i did tried something like this. But this code has to be integrated into to code above because what Im trying to do is call specific collection to my recommendations module.
/collections/224916897949 is ID of my collection list and it has multiple products. Instead of using the Shopify panel to add collection I would like to add by liquid.
{% assign collection = collections[section.settings.collection] %}
{% for product in collection.products.224916897949 limit: 12 %}
I have been looking at multiple answers to similar questions here on stack overflow and other sources, but simply cannot solve my problem.
I have a page consisting of index.md which has the following frontmatter:
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
title: title
layout: default
pagination:
enabled: true
---
And this is what I do to list my post:
<!--
Here is the main paginator logic called.
All calls to site.posts should be replaced by paginator.posts
-->
{% for post in paginator.posts %}
<li>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
<h2>
<a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
</h2>
</li>
{% endfor %}
</ul>
<!--
Showing buttons to move to the next and to the previous list of posts (pager buttons).
-->
{% if paginator.total_pages > 1 %}
<ul class="pager">
{% if paginator.previous_page %}
<li class="previous">
← Newer Posts
</li>
{% endif %}
{% if paginator.next_page %}
<li class="next">
Older Posts →
</li>
{% endif %}
</ul>
{% endif %}
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="previous">
Previous
</a>
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">
Page: {{ paginator.page }} of {{ paginator.total_pages }}
</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
I have added the gem to plugin list and to the gem file and run bundle install, and my configuration looks like this:
pagination:
enabled: true
per_page: 3
offset: 2
permalink: '/page/:num/'
title: ':title - page :num of :max'
limit: 0
sort_field: 'date'
sort_reverse: true
However when I run bundle exec jekyll s my test post is not listed.
But if I use:
{% for post in site.posts%}
{{post.title}}
{% endfor %}
My test post is listed as I intent. Anyone who can help me towards, what I am doing wrong, I simply cannot spot it.
Do you have a specific reason for including offset: 2 in the _config.yml? This will exclude the first 2 posts from appearing in the pagination so if you don't have at least 3 posts in your project nothing will be displayed.
Try removing the offset line from your config file, rerun bundle exec jekyll serve, and see if the functionality works.
For offset usage check the jekyll-paginate-v2 README section "Offsetting posts".
I've run into an issue when using Jekyll (which uses the Liquid templating language), the plugin jekyll-paginate-v2 and offset.
The problem: I have a featured section on my blog that always shows the most recent post. The other posts appear below, 10 per page using paginate.
I tried to simply show them using {% for post in paginator.posts offset:1 %}, but this is flawed in two ways:
it only shows 9 posts per page instead of 10
it offsets the first post on each page, so that the 1st, 10th, 20th, etc. posts are hidden, which is not what I want
What I'm trying to achieve: a loop that always ignores the post at index 0 and shows everything else as it normally would.
Am I just using offset wrong, or is this a bug in jekyll-paginate-v2?
Right now I've "fixed" it by doing the following, but it's not ideal as the first page only shows 9 posts:
<div class="articles-showcase row post-list">
{% assign featuredpost = site.posts.first %}
{% for post in paginator.posts %}
{% if post == featuredpost %}
{% continue %}
{% else %}
<!-- Article Card -->
<div class="article-detail-box col-lg-6 col-md-6 col-sm-12 card-article-div" data-cat="{{post.category | join: ','}}">
<div class="card card-article box-shadow h-100">
<div class="img-div text-center post-card-header bg-gray">
<img src="{{ site.baseurl }}{{post.image}}" alt="{{post.title}}">
</div>
<div class="card-article-body">
<p class="author-name">{{post.author}} | {{ post.date | date: '%B %d, %Y' }}</p>
<a href="{{site.baseurl}}{{post.url}}">
<h5>{{post.title}}</h5>
</a>
<div class="article-description">{{post.content}}</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
I raised this as an issue to the jekyll-paginate-v2 developers, and it has now been solved: https://github.com/sverrirs/jekyll-paginate-v2/issues/100
As a quick fix you should be able to add a front-matter property to the latest post manually:
---
layout: page
pagination:
enabled: false
---
Otherwise, you either have to exclude the paginator-v2 plugin and write your own logic for pagination or else extend the plugin in your _plugins dir so that the posts data sent to the paginate plugin already excludes the first (actually last because the reverse sorting will be done afterwards.) post.
I've hacked together a flawed solution that I'm using until something better comes along. I'll share it here for now:
<div class="articles-showcase row post-list">
{% if paginator.page == 1 %}
{% for post in site.posts limit:11 %}
{% if post == featuredpost %}
{% continue %}
{% else %}
<!-- Article Card -->
<div class="article-detail-box col-lg-6 col-md-6 col-sm-12 card-article-div" data-cat="{{post.category | join: ','}}">
<div class="card card-article box-shadow h-100">
<div class="img-div text-center post-card-header bg-gray">
<img src="{{ site.baseurl }}{{post.image}}" alt="{{post.title}}">
</div>
<div class="card-article-body">
<p class="author-name">{{post.author}} | {{ post.date | date: '%B %d, %Y' }}</p>
<a href="{{site.baseurl}}{{post.url}}">
<h5>{{post.title}}</h5>
</a>
<div class="article-description">{{post.content}}</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% if paginator.page > 1 %}
{% for post in paginator.posts %}
<!-- Article Card -->
<div class="article-detail-box col-lg-6 col-md-6 col-sm-12 card-article-div" data-cat="{{post.category | join: ','}}">
<div class="card card-article box-shadow h-100">
<div class="img-div text-center post-card-header bg-gray">
<img src="{{ site.baseurl }}{{post.image}}" alt="{{post.title}}">
</div>
<div class="card-article-body">
<p class="author-name">{{post.author}} | {{ post.date | date: '%B %d, %Y' }}</p>
<a href="{{site.baseurl}}{{post.url}}">
<h5>{{post.title}}</h5>
</a>
<div class="article-description">{{post.content}}</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
The main problem with it is the 2nd paginated page shows the last article on the 1st page again. For me that's better than only showing 9 posts on the first page, however. Any better solution would be greatly appreciated!
I wrote a loop in Jekyll to populate rows of four columns. The last row will have one to four columns filled. In local development it works as expected. On Github Pages it has worked for the last two years. I haven't changed this code in over a year. Every time I push new changes to Github Pages, the static site generator kicks in and rebuilds the entire site. At some point, the code below stopped writing in columns and started writing in rows only with a single column filled. Again, I didn't change the source file, so apparently somewhere in maintenance on Github's side something has changed to the point of breaking this layout.
Did Jekyll or Github Pages change in such a way that the below code is now broken or outdated? Do you see anything I can change to get the previous result restored?
---
layout: default
---
<div id="people-container" class="container">
{% assign numColumns = 4 %}
{% assign columnWidth = 12 | divided_by: numColumns %}
{% for person in site.data.people %}
{% assign card = person[1] %}
{% cycle 'add row' : '<div class="row">', nil, nil, nil %}
{% if card.image %}
{% if card.profile == true %}
<a href="{{ site.baseurl }}/team/{{ person[0] }}/">
{% endif %}
<div class="col-sm-{{columnWidth}}">
<div class="profile-image-wrapper">
<img class="profile-image" src="{{ site.baseurl}}/{{ card.image }}" alt="{{ person[1].name }}">
</div>
<div class="profile-data-wrapper inverted">
<p class="profile-name">{{ card.name }}</p>
<p class="profile-title">{{ card.title }}</p>
</div>
</div>
{% if card.profile == true %}
</a>
{% endif %}
{% endif %}
{% cycle 'end row' : nil, nil, nil, '</div>' %}
{% endfor %}
{% cycle 'end row' : nil, '</div>', '</div>', '</div>' %}
</div>
What I had before:
What I have now:
Github pages (and Jekyll) now uses Liquid 4.0.0, which doesn't handle nil in the cycle tag (as you are using it to generate columns).
There is an open issue in Liquid repo: Since 4.0.0 'nil' values are ignored inside cycle tag.
Suggested patch meanwhile: changing nil to an empty string ''.
{% cycle 'add row' : '<div class="row">', '', '', '' %}
I am creating a Jekyll theme where all user pages that implement the 'indexable' attribute in the front matter are rendered in the main landing page. So I have the 'frontpage layout:
---
layout: root
---
{% assign custom_pages = site.pages | where: 'indexable', true | sort: 'priority' | reverse %}
{% include header.html %}
{% for c_page in custom_pages %}
<div class="container {{ c_page.class | default: '' }}" >
{{ c_page.content }}
</div>
{% endfor %}
{% include footer.html %}
{% include javascripts.html %}
A sample page that will be processed:
---
layout: page
title: Us
permalink: /us/
indexable: true
priority: 10
class: us-page
---
<div class="row">
{% for member in site.data.members %}
<div class="col-sm-6">
<div class="card card-block">
<img src="{{ member.gravatar }}?s=256" alt="Avatar">
<h4 class="card-title text-xs-center">{{ member.name }}</h4>
<p class="card-text">{{ member.description | markdownify }}</p>
<p class="card-text">
{% for tag in member.expertise_areas %}
<span>{{ tag }}</span>
{% endfor %}
</p>
<a href="{{ member.blog }}" class="btn btn-primary" role="button" >Mi blog</a>
</div>
</div>
{% endfor %}
</div>
However the liquid tags are appearing unprocessed, like the same output {% raw %} would produce. Is there a way through I could do {{ c_page.content | magic_here }} in order to manually get rendered those tags?
EDIT. Screenshot:
EDIT2
Theme repository
Web implementation
Well, despite I still don't know whether the issue is in my code, I am posting how I managed to solve it. Basically I created a filter tag called liquefy which has been put in a .gem and whose main task is taking a text with markdown or/and liquid syntax as an argument which will be parsed and rendered.
Repo: https://github.com/sonirico/liquefy
Gem: https://rubygems.org/gems/liquefy