Hey,
I’m working on a website displaying icons, with all of them having a different category. I’d like to have one page displaying all these icons in their different categories. Something like this:
I created a page for every icon in /_icons/, and a page for every category in /_icon_categories/, and of course put them in my _config.yml.
This is my code now for /icons.html:
{% assign icon_categories = site.icon_categories | sort: "order" %}
{% for icon_category in icon_categories %}
<li>
<h3>{{ icon_category.name }}</h3>
<ul>
{% assign filtered_icons = site.icons | where: 'icon_category', page.icon_category %}
{% for icon in filtered_icons %}
<li>{{ icon.title }}</li>
{% endfor %}
</ul>
</li>
{% endfor %}
An exemple of the page of an icon:
---
title: address-card
icon_category: people
---
And an icon category page:
---
name: People
short_name: people
---
Now it just displays the name of the categories and not the icons inside each of them.
Does someone have a solution?
Thanks!
Can you confirm the filtering is working? It sounds like you have zero icons show up so first use for loop on site.icons as then you can refine with filter after.
Regarding the structure, I’d recommend researching data in Jekyll docs. It sounds like you might be duplicating logic.
Assuming an icon can only be in one category, add an icons attribute in your config file which has the categories. Each category can have title and short name fields and icons field as a list.
Then you can have a for loop to iterate over categories and an inner loop to iterate over icons in the category. No filtering needed.
You could move that structure to _data/icons.yml rather than config. Then iterate over as site.data.icons
If you do want use the page approach I’d say make icon categories folder and icons inside there. And iterate over those. Lookup collections in jekyll docs
Here on my band’s site I have a folder of albums called _music and in each album is an index page as the album page which lists songs and multiple .md subpages for the songs.
Check in config file for how collections and layouts is setup. And you can of course look at the built site to see how URLs look… for the Music page of all albums and drill down to each album and each song.
Jekyll also has builtin support for categories and tags for posts and maybe other pages. This could help
Hey,
At the moment it’s working only if I have only one category on the page, but I’d like the page with all the icons inside their category. The page you sent me works only for post categories, but they’re already used by the other components category (I’m working on a framework documentation).
A category is designed to work on a post yes in fact the path of a post depends on the category.
But you can still use the approach I suggest when the “category” is the directory like album and there are pages inside as songs. Then you make sure you enable collections for the outer folder in config so you can iterate over them.
_music # folder of albums
foo # album name. This is your category
bar
index.md # this is has Bar in the title and uses a layout to all items in the album.
fizz.md
buzz.md
The suggestion I made outputs a list of song names only on each album page and an a list of album names on the top level music page. But this can be adapted to match your needs by keeping the storage structure but changing the templating.
For example I’d have one page even the root index.md… which iterates over site.collections.music and outputs every album (category) name and then iterated through all songs (icons) and outputs the title and image.
