Please be patient with me as I’m not familiar with PHP/ Kirby’s API (trying to slowly learn through playing with Kirby).
I’m trying to create a portfolio page that has 3 tabs (web design, logo design, other). When a tab is active, for example the web-design tab, I want to show the preview image for each project in that category.
Clicking on the other tabs will bring up project preview images for that category. 1 preview image per project. 10 projects in the logo design category will show 10 preview images, 1 per project. Clicking on one of the preview images should take you to that specific project page.
Sorry if this sounds confusing, I will try to clarify any misunderstandings if needed. I think I need a folder structure like this, I just don’t understand how the filtering would work with this structure. I’m also using Jquery for tabs.
content
2-portfolio
1-web-design
project-a
preview.png
project-b
preview.png
project-c
preview.png
2-logo-design
3-other
Basically, you need to create a collection of all preview images contained in the child pages of each portfolio category. Here’s some code, not tested though.
<?php
//example for tab webdesign
$page = page('portfolio/web-design');
$children = $page->children();
//create a new image collection
$images = new Collection();
foreach ($children as $child) {
$preview = $child->image('preview.png');
//append the preview image to the collection
$images->data[] = $preview;
}
?>
Then you can use another foreach-loop to show the images.
I think he meant a loop to output all categories. This is rather straight forward (pseudo-code for the tabs, that depends on your implementation):
<?php foreach($page->children() as $category): ?>
<tab>
<tablabel><?php echo $category->title() ?></tablabel>
<?php foreach($category->children() as $project): ?>
<a href="<?php echo $project->url() ?>">
<img src="<?php echo $project->images()->first()->url() ?>" alt="<?php echo $project->title() ?>">
</a>
<?php endforeach ?>
</tab>
<?php endforeach ?>
Thanks @lukasbestle for your help! I was able to use your advice, alongside with some tinkering, and I’ve managed to almost set this up.
Basically I’m trying to use jQuery UI tabs which means I have to set everything up in a very specific manner. One restriction is that each tab has to have an unique id. I found one solution but it isn’t quite working, I was wondering if you would be able to help me figure out what’s wrong.
jQuery UI Tabs Documentation
Here’s my code:
<script>
$(function() {
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
<?php $i = 1; ?>
<?php foreach($page->children() as $category): ?>
<li>
<a href="#tabs-<?php echo $i;?>"><?php echo $category->title() ?></a>
</li>
<?php $i++; ?>
<?php endforeach ?>
</ul>
<ul>
<?php $i = 1; ?>
<?php foreach($category->children() as $project): ?>
<li id="tabs-<?php echo $i;?>">
<a href="<?php echo $project->url() ?>">
<img src="<?php echo $project->images()->first()->url() ?>" alt="<?php echo $project->title() ?>">
</a>
</li>
<?php $i++; ?>
<?php endforeach ?>
</ul>
</div>
Go easy on me 
I think it should be something like this:
First you iterate through the children as categories to get the label, then you need one div per category (therefore iterate through the categories again), which holds the images per category.
<div id="tabs">
<ul>
<?php $i = 1; ?>
<?php foreach($page->children() as $category): ?>
<li>
<a href="#tabs-<?php echo $i;?>"><?php echo $category->title() ?></a>
</li>
<?php $i++; ?>
<?php endforeach ?>
</ul>
<?php $i = 1; ?>
<?php foreach($page->children() as $category) ?>
<div id="tabs-<?php echo $i ?>">
<ul>
<?php foreach($category->children() as $project): ?>
<li id="tabs-<?php echo $i;?>">
<a href="<?php echo $project->url() ?>">
<img src="<?php echo $project->images()->first()->url() ?>" alt="<?php echo $project->title() ?>">
</a>
</li>
<?php endforeach ?>
</ul>
</div>
<?php $i++; ?>
<?php endforeach ?>
</div>
1 Like
Ah ah! It’s alive! Thank you so much.
That actually makes way more sense now that I think about. Thanks again for your time and help.