Rename false and true toggle classes

1

I have a Blueprint for my images, so that in the Panel I can add a border to images that need it.

border:
	label: Border
	type: toggle
	text: 
		- none
		- border

This adds the class false or true to my images. And I have a css style for .true to add a border. Is there a way to rename false and true to something more meaningful? For example adding the classes no-border or border?

2

You could alter your PHP template to add whatever class name you need based on the toggle field state:

<div class="<?= e($page->border()->toBool() === true, 'border', 'no-border') ?>">
    <p>Some content here...</p>
</div>

There is a page about the e() helper in Kirby reference.

3

This is my template code

<img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>" class="<?= $image->border() ?>">

This adds the class ‘true’ or ‘false’ to my images.

Not sure how to combine what you’re suggesting with this?

4

You currently just echo border field value, which is either true or false. What you need instead is check the border field value and echo something based on that value.

Your template could be:

<img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>" class="<?= e($image->border()->toBool() === true, 'border') ?>">

If the toggle is on, “border” gets echoed inside the class attribute.

This part

<?= e($image->border()->toBool() === true, 'border') ?>

can be rewritten like

if($image->border()->toBool() === true) {
  // the toggle is "on", meaning you want to add border class (the class name can be anything, I chose border)
  echo "border";
}

and you get the same result. With e() helper it is much shorter.

5

Thank you. Works great