Pulling from specific subfolders using {% for post in site.posts %}

254
January 29, 2017, at 05:11 AM

I'm currently working on my first Jekyll site. I have a page in which 2 seperate sections display previews of certain posts (a styled thumbnail).

What I want is for these sections to display posts from different subfolders in _site/_posts. I have organized _posts to contain two subfolders, /lesplannen and /verslagen (lesson plans and reports), each containing a bunch of articles.

My code for one of these sections is as follows (Jade formatting):

{% for post in site.posts limit: 4 %}
    a(href="{{post.url}}" target="_blank" style="background-image: url(assets/img/posts/lesplannen/thumbnails/{{post.thumbnail}})").lesplan-thumb
      .article-meta
        .name {{post.title}}
        .date {{ post.date | date: "%b %d, %Y" }}
    {% endfor %}

And similarly for the other section. My first instinct was to change site.posts to site.posts.lesplannen and site.posts.verslagen repectively, but this resulted in the thumbs not displaying at all. I also added the categories to the front matter in the articles themselves, but this wasn't picked up either.

For clarity, what I'm trying to do is have section 1 display posts from _site/_posts/subfolder 1 and section 2 display posts from _site/_posts/subfolder 2.

What would be the right way to go about this?

Question for bonus points: The page displays 4 posts, as expected, but chooses to display post 6 through 9 of the 12 posts available. Why is this and can I specify to e.g. always display the last x posts?

For reference:
GitHub page: https://zaena.github.io/portfolio-nadine/
GitHub repo: https://github.com/Zaena/portfolio-nadine

Answer 1

The website has several issues:

The posts folder structure is wrong

Posts should always be in a _posts folder, they can't be inside another folder (Jekyll can display them but some functionality is lost, they are not meant to be there)

If categories are folders, they can't start with an underscore (_)

The actual structure has categories defined as /_verslagen, they should be /verslagen and its posts inside /verslagen/_posts

Having the same post in two different folders has unexpected behaviour

There are posts located in different folders, only one version should exist.

Solution

The structure you are looking for is:

├── index.html
├── lesplannen
│   └── _posts
│       ├── 2016-12-10-dit-is-een-lesplan2.md
│       ├── 2016-12-10-dit-is-een-lesplan3.md
│       ├── 2016-12-10-dit-is-een-lesplan4.md
│       └── 2016-12-10-dit-is-een-lesplan.md
└── verslagen
    └── _posts
        ├── 2016-12-10-dit-is-een-verslag10.md
        ├── 2016-12-10-dit-is-een-verslag11.md
        ├── 2016-12-10-dit-is-een-verslag12.md
        ├── 2016-12-10-dit-is-een-verslag2.md
        ├── 2016-12-10-dit-is-een-verslag3.md
        ├── 2016-12-10-dit-is-een-verslag4.md
        ├── 2016-12-10-dit-is-een-verslag5.md
        ├── 2016-12-10-dit-is-een-verslag6.md
        ├── 2016-12-10-dit-is-een-verslag7.md
        ├── 2016-12-10-dit-is-een-verslag8.md
        ├── 2016-12-10-dit-is-een-verslag9.md
        └── 2016-12-10-dit-is-een-verslag.md

This will make posts available under each category in site.categories.verslagen and site.categories.lesplannen.

Then the code to show each category posts looks like:

{% for post in site.categories.verslagen %}
<p>{{post.title}}</p>
<p>{{ post.date | date: "%b %d, %Y" }}</p>
<p>{{post.thumbnail}}</p>
{% endfor %}
{% for post in site.categories.lesplannen %}
<p>{{post.title}}</p>
<p>{{ post.date | date: "%b %d, %Y" }}</p>
<p>{{post.thumbnail}}</p>
{% endfor %}
Answer 2

Here's how I got them displaying separately:

index.html

---
---
<p>Posts in dir-a:</p>
<ul>
    {% for post in site.posts %}
        {% assign first_dir = post.path | remove_first: "_posts/" | split: "/" | first %}
        {% if first_dir == 'dir-a' %}
            <li>
                <a href="{{ post.url }}">{{ post.title }}: {{ post.date | date: "%b %d, %Y" }}</a>
            </li>
        {% endif %}
    {% endfor %}
</ul>
<p>Posts in dir-b:</p>
<ul>
    {% for post in site.posts %}
        {% assign first_dir = post.path | remove_first: "_posts/" | split: "/" | first %}
        {% if first_dir == 'dir-b' %}
            <li>
                <a href="{{ post.url }}">{{ post.title }}: {{ post.date | date: "%b %d, %Y" }}</a>
            </li>
        {% endif %}
    {% endfor %}
</ul>

This assumes the following directory structure:

/_posts
/_posts/dir-a
/_posts/dir-b

Should be nice and easy to adapt to your needs.

READ ALSO
Iphone focus on input, textarea field issue using bootstrap modal

Iphone focus on input, textarea field issue using bootstrap modal

I have a problemIn my project I have an issue with focus on input using iphone device

452
Change class of an anchor when scroll is on a div using jquery

Change class of an anchor when scroll is on a div using jquery

I am making a webpage which has anchor button on the top linking to different divs on the webpage, I want to change the background color of the button when the scroll is on that div and keep that color until it reaches the subsequent sectionHow can i use toggleClass...

405
HTML Map Area Hover with jquery not working

HTML Map Area Hover with jquery not working

The question is asked before and I have gone through all of them ,I really can't find solutionLet me explain what I am thinking to do when the map area is hovered then it color should change to red and I am not able to do this

508
change cursor when user click and hold click whithout javascript

change cursor when user click and hold click whithout javascript

I'm working on 'drag/drop' plugin grid that give users ability to move rows to reorder

332