In Jekyll I filter posts by tags displating a list of the posts which have the assigned tag like this:
---
layout: layout
---
<ul>
{% for post in site.posts %}
{% for tag in post.tags %}
{% if tag == page.tag %}
<li itemprop="name" itemprop=name>{{ post.title }}</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
Burt what I'd like to do is display the categories which have posts of the tag and the posts listed under each category.
Category 1 has post 1, post 2, post 3. Category 2 has post 4, post 5, post 6. Category 3 has post 7
Posts 1,2,4 have tag Tag1.
The tag page should display Category 1 + Post 1, post 2. Category 2 + Post 4.
On the homepage I display categories with all posts under each category like this:
{% assign counter=0 %}
<main id="page" role="main">
{% for category in site.categories %}
<div class="col pane ui-layout-{% assign counter=counter | plus:1 %}" id="{{ page.id }}">
<div class="colheader">
<div class="bar"></div>
<p class="lead">Leadin text</p>
<h1>{{ category | first }}</h1>
</div>
<div class="colscroll unlock">
{% for posts in category %}
{% for post in posts %}
<div class="colblock" itemscope itemtype="http://schema.org/BlogPosting">
<div class="excerpt">
<time class="date" datetime="{{ page.date | '%Y-%m-%dT%H:%i:%S-08:00' }}" itemprop="datePublished">
{{ page.date | date: '%B %d, %Y' }}
</time>
<h1>
<a itemprop="url" href="{{ post.url }}" target="_blank" title="{{ post.title }}">
<span itemprop="name" itemprop=name>{{ post.title }}</span>
</a>
</h1>
<p itemprop="description">
{{ post.excerpt }}..
</p>
<p class="link_tags">{{ page.tags }}</p>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% endfor %}
</main>
So on the tag page I try to achieve what I want like this but it is returning all categories and all posts just like the homepage rather than filtering by the tag.
---
layout: layout
---
<ul>
{% for post in site.posts %}
{% for tag in post.tags %}
{% if tag == page.tag %}
{% assign counter=0 %}
<main id="page" role="main">
{% for category in site.categories %}
<div class="col pane ui-layout-{% assign counter=counter | plus:1 %}" id="{{ page.id }}">
<div class="colheader">
<div class="bar"></div>
<p class="lead">Leadin text</p>
<h1>{{ category | first }}</h1>
</div>
<div class="colscroll unlock">
{% for posts in category %}
{% for post in post.tags %}
<div class="colblock" itemscope itemtype="http://schema.org/BlogPosting">
<div class="excerpt">
<time class="date" datetime="{{ page.date | '%Y-%m-%dT%H:%i:%S-08:00' }}" itemprop="datePublished">
{{ page.date | date: '%B %d, %Y' }}
</time>
<h1>
<a itemprop="url" href="{{ post.url }}" target="_blank" title="{{ post.title }}">
<span itemprop="name" itemprop=name>{{ post.title }}</span>
</a>
</h1>
<p itemprop="description">
{{ post.excerpt }}..
</p>
<p class="link_tags">{{ page.tags }}</p>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% endfor %}
</main>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
I alsio tried this but it returns a blank page
---
layout: layout
---
<ul>
{% for post in site.posts %}
{% for tag in post.tags %}
{% if tag == page.tag %}
{% assign counter=0 %}
<main id="page" role="main">
{% for category in tag.categories %}
<div class="col pane ui-layout-{% assign counter=counter | plus:1 %}" id="{{ page.id }}">
<div class="colheader">
<div class="bar"></div>
<p class="lead">Leadin text</p>
<h1>{{ category | first }}</h1>
</div>
<div class="colscroll unlock">
{% for posts in category %}
{% for post in tag.posts %}
<div class="colblock" itemscope itemtype="http://schema.org/BlogPosting">
<div class="excerpt">
<time class="date" datetime="{{ page.date | '%Y-%m-%dT%H:%i:%S-08:00' }}" itemprop="datePublished">
{{ page.date | date: '%B %d, %Y' }}
</time>
<h1>
<a itemprop="url" href="{{ post.url }}" target="_blank" title="{{ post.title }}">
<span itemprop="name" itemprop=name>{{ post.title }}</span>
</a>
</h1>
<p itemprop="description">
{{ post.excerpt }}..
</p>
<p class="link_tags">{{ page.tags }}</p>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% endfor %}
</main>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
The live site template is up on Github. (tags list is the second circular icon from the left at the top of the page)
I think this is what you are looking for:
---
layout: default
---
<main id="page" role="main">
{% for category in site.categories %}
{% assign counter=0 %}
{% for posts in category %}
{% for post in posts %}
{% if post.tags contains page.tag %}
{% assign counter=counter | plus:1 %}
{% endif %}
{% endfor %}
{% endfor %}
{% if counter != 0 %}
<div class="col pane ui-layout-{% assign counter=counter | plus:1 %}" id="{{ page.id }}">
<div class="colheader">
<div class="bar"></div>
<p class="lead">Leadin text</p>
<h1>{{ category | first }}</h1>
</div>
<div class="colscroll unlock">
{% for posts in category %}
{% for post in posts %}
{% if post.tags contains page.tag %}
<div class="colblock" itemscope itemtype="http://schema.org/BlogPosting">
<div class="excerpt">
<time class="date" datetime="{{ page.date | '%Y-%m-%dT%H:%i:%S-08:00' }}" itemprop="datePublished">
{{ page.date | date: '%B %d, %Y' }}
</time>
<h1>
<a itemprop="url" href="{{ post.url }}" target="_blank" title="{{ post.title }}">
<span itemprop="name" itemprop=name>{{ post.title }}</span>
</a>
</h1>
<p itemprop="description">
{{ post.excerpt }}..
</p>
<p class="link_tags">{{ page.tags }}</p>
</div>
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</main>
I've just modified your homepage code.
Edit: Added conditional code. Print only categories that contains posts with current tag.