Have liquid syntax include an additional liquid syntax?

Question

I am trying to refactor my site using the D.R.Y. method, part of that is using liquid syntax to help.

Currently everything works with what I have here:

page-internal.html

---

layout: default

<div>

  <div class="d-flex" style="background-color: #e9ecef;">

    <div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
      <div class="col-lg-12 p-3 mx-auto">

        <img width="50" height="50"
        class="rounded-circle float-left mr-2"
        src="/assets/img/internal/{{ page.image }}" />
        <h1 class="display-4">{{ page.title | escape }}</h1>
        <p class="lead">{{ content }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="d-flex justify-content-center">
      {% include card-post-{{ page.passname }}.html %}
    </div>
  </div>
</div>

The {{ page.passname }} pulls from a .md file like so:

---
layout: page-internal
title: User Interface
permalink: /pages/design-ui
image: ui.svg
passname: ui
---

That works just fine, too. But then I have to create several pages to pull from instead of just referencing passname to grab the right .md page (I hope I'm making sense here, apologies if I'm not). That page looks like this

card-post.ui.html

And the html on that page is:

<div class="container-fluid">
  <div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
    {% for post in site.categories.ui %}
    <div class="card col-sm-12 col-lg-3 m-2">
      <div class="card-body d-flex flex-column">
        <div class="media">
          <div class="d-flex mr-3">
            <a href="{{ post.url }}">
              <img width="40" height="40"
              class="rounded-circle"
              src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
            </a>
          </div>
          <div class="media-body">
            <h6 class="mb-1">{{ post.title }}</h6>
          </div>
        </div>
        <div class="d-flex flex-column" style="height: 105px;">
         <div class="p-2">
           <p class="text-muted">{{ post.excerpt }}</p>
         </div>
        </div>
        <div class=" flex-column align-items-end">
          <button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

What I'd like to do is take the two html sites and have it like this:

---
layout: default
---
<div>

  <div class="d-flex" style="background-color: #e9ecef;">

    <div class="jumbotron mx-auto mb-0 py-3 px-5" style="max-width: 1200px">
      <div class="col-lg-12 p-3 mx-auto">

        <img width="50" height="50"
        class="rounded-circle float-left mr-2"
        src="/assets/img/internal/{{ page.image }}" />
        <h1 class="display-4">{{ page.title | escape }}</h1>
        <p class="lead">{{ content }}</p>
      </div>
    </div>
  </div>

  <div>
    <div class="d-flex justify-content-center">
      {% include card-post-{{ page.passname }}.html %}

      <div class="container-fluid">
        <div class="col-lg-12 mx-auto row d-flex justify-content-center mt-3" style="max-width: 1400px">
          {% for post in site.categories.ui %}
          <div class="card col-sm-12 col-lg-3 m-2">
            <div class="card-body d-flex flex-column">
              <div class="media">
                <div class="d-flex mr-3">
                  <a href="{{ post.url }}">
                    <img width="40" height="40"
                    class="rounded-circle"
                    src="/assets/img/{{ post.image }} " alt="{{ post.title }}" />
                  </a>
                </div>
                <div class="media-body">
                  <h6 class="mb-1">{{ post.title }}</h6>
                </div>
              </div>
              <div class="d-flex flex-column" style="height: 105px;">
               <div class="p-2">
                 <p class="text-muted">{{ post.excerpt }}</p>
               </div>
              </div>
              <div class=" flex-column align-items-end">
                <button type="button" class="btn btn-secondary btn-sm btn-block" onclick="location.href = '{{ post.url }}';">View project</button>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

This would work however the syntax here:

{% for post in site.categories.ui %}

Needs to be (and this is where I can't figure out what to do)

{% for post in site.categories. {{ page.passname }} %}

This throws an error:

 Liquid Warning: Liquid syntax error (line 23): Unexpected character { in "post in site.categories.{{ page.passname }}" in /_layouts/page-internal.html

So my question is, how can I get the passname from said .md post (in this instance it'd be design-ui.md ) and put it into {% for post in site.categories.ui %} where the word ui would be dependint on the .md

I hope I said all this right, apologies if not.

Answer 1

Your loop syntax {% for post in site.categories. {{ page.passname }} %} is incorrect :

You may reach your category with bracket notation :

{% for post in site.categories[page.passname] %}