Structure field with select

The CMS Questions
1

i try to created some structure fields in the panel. in my blueprints i take this:

stage:
     label: 
     type: structure
     style: table
    fields:
       item_image:
       label: Bild
        type: image
item_title:
  label: Title
  type: text

alignment:
  label: Ausrichtung
   type: select
  default: left
   options:
     alignleft:  left
     alignright: right

now i need some help to create a if loop for the structure element:

<?php
		// get all data
		$stage = $page->stage()->toStructure();
		
		// loop through the collection of events:
		foreach($elements as $element): ?>
				 
	    <figure><?php if($image = $element->item_image()->toFile()) echo $image->html() ?></figure>

	    <div class="container">
	      <div class="text">
	        <h1><?= $element->item_title()->html() ?></h1>
	        <p><?= $element->item_copy()->kirbytext() ?></p>
	    </div>
	    </div>
  <?php endforeach ?>

how can i do such voodoo?
:slight_smile:

2

Not completely sure what the question is here - are you wondering how to get the value of the select field?

<?= $element->$alignment->value() ?>

Is this to display things alternately left and right on the page? If thats the case then you do not need a field for it at all, you can use CSS to do it, with :nth-child(odd) and :nth-child(even) … I don’t know which items you want to display left and right, but something like this will do it…

.myparentelement:nth-child(odd) {
float: left;
width: 50%;
}
.myparentelement:nth-child(even) {
float: right;
width: 50%;
}
3

thanks.

good idea with the css thing – but the editor have to choose it by himself.
i need a select field to arrange the image left or right.

4 
<?php
// get all data
$stage = $page->stage()->toStructure();
// loop through the collection
foreach($stage as $element):
  // get the image & check it exists
  $image = $element->item_image()->toFile();

  if($image): ?>

  <figure class="<?= $element->$alignment->value() ?>">
    <img src="<?= $image->url() ?>" alt="">
  </figure>
  
  <?php endif ?>

  <div class="container">
    <div class="text">
      <h1><?= $element->item_title()->html() ?></h1>
      <p><?= $element->item_copy()->kirbytext() ?></p>
    </div>
  </div>

<?php endforeach ?>
5

very nice. thanks.

a bit more markup ist changing. how is the if syntax if the value == left

then.

many thanks for the help

6 
<?php if ($element->$alignment->value() == "left"): ?>
<!-- dance to the left.... -->
<?php else: ?>
<!-- ...dance to the right -->
<?php endif ?>

Or you could do it this way which would give you a class on the parent to control the image and text content. If you used an IF statement, you would end up repeating HTML.

<?php
// get all data
$stage = $page->stage()->toStructure();
// loop through the collection
foreach($stage as $element):
  // get the image & check it exists
  $image = $element->item_image()->toFile();
  $align = $element->$alignment->value();

  ?>

  <div class="align <?= $align ?>">

    <?php if($image): ?>

    <figure>
      <img src="<?= $image->url() ?>" alt="">
    </figure>
    
    <?php endif ?>
      <div class="text">
        <h1><?= $element->item_title()->html() ?></h1>
        <p><?= $element->item_copy()->kirbytext() ?></p>
      </div>
    </div>
<?php endforeach ?>

Basic CSS…

.align {
  overflow: hidden; // clear floats
}

.align figure,
.align .text {
  width: 50%;
}

.align.left figure {
  float:left;
}
.align.left .text {
  float:right;
}

.align.right figure {
  float:right;
}
.align.right .text {
  float:left;
}