Toggles and bool

Hi there, I’m back to kirby and running into my first problem.

I have a toggles field in my panel with 2 options. It makes the output switch between two css classes.

      mytoggle:
        type: toggles
        label: Width
        options:
          full: Full
          half: Half

my output code is derived from the starterkit code and goes like this

<?php if ($photographyPage = page('photography')): ?>
   <section class="posts">
	 <?php foreach ($photographyPage->children()->listed() as $album): ?>
	 
	 <div <?php if($page->mytoggle()->bool()): ?>
		class="half"
	  <?php else: ?>
		class="full"
	  <?php endif ?>>
	 
		 <a class="link" href="<?= $album->url() ?>">
		   <div class="item-overlay"></div>
		   <?php if ($cover = $album->cover()): ?>
			  <img class="item-image"
				loading="lazy" alt="<?= $cover->alt() ?>"
				src="<?= $cover->url() ?>"
			  >
			<?php endif ?>
		 </a>
	   </div>
	   <?php endforeach ?>
   </section>
   <?php endif ?>

But this doesn’t seem to work. not sure if I’m not supposed to nest another if loop into that existing one that gathers the images. From my understanding it should get which of the buttons is activated and set the class accordingly. but still, i can not make sense of the bool function at all :frowning:
Anyone can shed some light?

See the docs: Toggle | Kirby CMS

A toggle doesn’t have options.

You are using toggles, it ships the option as value so you have to:

<div <?php if($page->mytoggle()->value() === 'half'): ?>
		class="half"
	  <?php else: ?>
		class="full"
	  <?php endif ?>>

Otherwise, as @texnixe said you could use the toggle field. It just ships bools and you can rename them via ‘text’ option


    mytoggle:
      type: toggle
      label: Width
      text:
        - Full
        - Half

and then you can use you code. :slight_smile:

Thank you all for your answers. @texnixe I went for toggles instead of toggle because i found it a better UX being able to see both options at a glance. Toggle only shows option b if activated.

Still it does not work unfortunately. Whatever I do, it goes for the second value (after “else”) no matter what value is set in panel. I tried it with existing pages as well as with creating a new one.

Could you post your code please? The toggles field only stores a text value, so you fetch that like from any other field.

sure, my PHP goes like this

   <?php if ($photographyPage = page('photography')): ?>
	  <section class="posts">
		<?php foreach ($photographyPage->children()->listed() as $album): ?>
		
		<div <?php if($page->mytoggle()->value() === 'half'): ?>
			class="half"
		  <?php else: ?>
			class="full"
		  <?php endif ?>>
		
			<a class="link" href="<?= $album->url() ?>">
			  <div class="item-overlay"></div>
			  <?php if ($cover = $album->cover()): ?>
				 <img class="item-image"
				   loading="lazy" alt="<?= $cover->alt() ?>"
				   src="<?= $cover->url() ?>"
				 >
			   <?php endif ?>
			</a>
		  </div>
		  <?php endforeach ?>
	  </section>
	  <?php endif ?>

My blueprint is this atm

      mytoggle:
        type: toggles
        label: Width
        options:
          - Full
          - Half

The posts save beautifully, everything is visible in the related .txt file. I even checked if there’s some trouble with uppercase/lowercase but it isn’t. The php code still skips over to what comes after the else statement. :frowning:

You options are uppercase,

In your condition, you use lowercase.

true, that’s a leftover from my trial & error troubleshooting attempts. sorry for that. still, as mentioned above, I tried all possible upper/lowercase configurations possible to no avail. i’m stuck.

So it always outputs class="full". But since you don’t echo anything, there should be no output at all.

probably yes, i don’t know. if i change class=“full” to class=“half” in php it does that. but only that. I can not switch to the other case by toggeling the toggle in panel. As I already mentioned, the value is written to the content .txt file correctly. There must be something weird going on in my php script.

IMO, your code should look like this

<div class="<?= Str::lower($album->myToggle()->value()) ?>">

No need even for the if statement.

Thank you a lot, this finally works! The if statement had it’s origin in my css structure somehow. I’m still not sure why it does not work. Anyways, i’ll mark this as solved.