Show select options

Hello,

project pages a grouped under some category name (to be filter with isotope ).

 cat:
  label: Secteur
  type:  select
  options:
    exemple1: Exemple 1
    exemple2: Exemple 2

How can I show the 2 cat in the projects template, the last way I tried is the one, but does not show nothing, or show correctly the cat but also all pages.

 <?php
$categorie = $page->filterBy('template', 'project')->cat()->toStructure();
foreach($categorie as $cat): ?>
<button class="<?php echo $cat->html() ?>"><?php echo $cat->html() ?></button>
<?php endforeach ?>

Thank you.

Hm, I don’t understand what you are trying to achieve here. In your blueprint select, you let the user select ONE category, but then in your template, you use toStructure() without having used a structure field :confused:

Kirby does not know anything about the different options in your blueprint.

If you want to read the blueprint, this solution might help: Get label for select field value from Blueprint

Other than that, you can get an array of all categories that are used in all text files with the pluck() method.

ahah yes, I’m trying some experience ;-).

Better than my english, please see my code below:

In projects template:

I’m trying to filter the pages like this (2 or 3 cat for Xpages):

<button class="filter all">All</button>
<button class="filter" data-filter="exemple1">Exemple 1</button>
<button class="filter" data-filter="exemple2">Exemple 2</button>

this:
returns all the pages :frowning:

<ul>
<button class="filter" data-filter="all">all</button>
 <?php foreach($pages->filterBy('template', 'projects')->children()->visible()->pluck('cat') as $cats): ?>
 <li><button class="filter" data-filter="<?php echo html($cats) ?>"><?php echo html($cats) ?></button></li>
 <?php endforeach ?>
</ul>

This, is ok and display well all articles in projects template with the “cat” in li class:

<ul id="Container" class="container">
 <?php foreach ($pages->filterBy('template', 'projects')->children()->visible() as $project): ?>
  <li class="mix <?php echo $project->cat()->html() ?>">
   <div>
    <h3><a href="<?php echo $project->url() ?>"><?php echo $project->title()->html() ?></a></h3>    
    <p><?php echo $project->text()->excerpt(80) ?> <a href="<?php echo $project->url() ?     >">read&nbsp;more&nbsp;→</a></p>
    <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
    <a href="<?php echo $project->url() ?>">
     <img src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>" >
   </a>
  <?php endif ?>
   </div>
  </li>
 <?php endforeach ?>
 </ul>

What does this produce? Shouldn’t it be:

<ul>
<button class="filter" data-filter="all">all</button>
 <?php foreach(page('projects')->children()->visible()->pluck('cat') as $cats): ?>
 <li><button class="filter" data-filter="<?php echo html($cats) ?>"><?php echo html($cats) ?></button></li>
 <?php endforeach ?>
</ul>

Or do you have multiple parent pages with a project template? Then try this:

<ul>
<button class="filter" data-filter="all">all</button>
 <?php foreach($site->index()->filterBy('template', 'projects')->children()->visible()->pluck('cat') as $cats): ?>
 <li><button class="filter" data-filter="<?php echo html($cats) ?>"><?php echo html($cats) ?></button></li>
 <?php endforeach ?>
</ul>

With:

<?php foreach($site->index()->filterBy('template', 'projects')->children()->visible()->pluck('cat') as $cats): ?>

and

<?php foreach($pages->filterBy('template', 'projects')->children()->visible()->pluck('cat') as $cats): ?>

It returns all articles, not only the 2 “cat” options

And with

<?php foreach(page('projects')->children()->visible()->pluck('cat') as $cats): ?>

I’ve an error

Maybe you have to add the complete set of paramters;

$categories = $site->index()->filterBy('template', 'projects')->children()->pluck('cat', ',', true);

Could you please post the source code that results from the different code snippets`

BTW. a ul tag should only have li children, not a button as in your code example above; so you should wrap your first button within li tags as well.

Yes, here it is correctly wrapped, I did not copy the code correctly :sleeping:. My error was to use “foreach” for the pages, not, for the category. So it returned all pages + the cat. I should have thought about it before.

The correct code is:

<ul>
    <li>
        <button class="filter" data-filter="all">all</button>
    </li>
    <?php $categories = $site->index()->filterBy('template', 'projects')->children()->pluck('cat', ',', true);
    foreach($categories as $cats): ?>
    <li>
        <button class="filter" data-filter=".<?php echo html($cats) ?>"><?php echo html($cats) ?></button>
    </li>
    <?php endforeach ?>
</ul>

Now the buttons show correctly the data-filter “cat”, how can I show correctly its title:

 <button class="filter" data-filter=".exemple1"> Exemple 1  </button>


   cat:
   label: Secteur
   type:  select
    options:
      exemple1: Exemple 1
      exemple2: Exemple 2

You can use a category map or rename the options, see also this thread; Selection field text

1 Like