Using images field plugin within a structure

Kirby 2 Questions 🤔
1

I’m using a structure field to build a timeline on my website. I would need to show multiple images (with a slider) for each event of the timeline. This is my code so far for a single image for each event:

<?php
	$events = $page->events()->yaml();
    foreach($events as $event): ?>	
	  <dl>                                  
	    <dd class="pos-<?php echo $event['positie'] ?> clearfix">
	      	<div class="circ"></div>
	      	<div class="time">
	      	<?php $somedate = $event['event_datum']; echo date('M Y', strtotime($somedate)) ?>	
	      	</div>
	      	<div class="events">
	        	<div class="events-header"><?php echo $event['event_titel'] ?></div>                                
	        	<div class="events-body">                                                                                            
					<?php if($image = $page->image($event['event_beeld'])) echo thumb($image, array('width' => 200, 'height' => 150, 'crop' => true)); ?>
					<div class="events-desc">
					<?php echo $event['event_tekst'] ?>
					</div>
	          </div>                                 
	      	</div>
	    </dd>		   
	  </dl>
	<?php endforeach ?>

My blueprint:

 fields:
  event_datum:
    label: Datum
    type: date
  event_titel:
    label: Titel
    type: text
  event_tekst:
    label: Tekst
    type: textarea
  event_beeld:
    label: Afbeelding
    type: image

I would like to use the ‘images’ field of this plugin: https://github.com/medienbaecker/kirby-images

Is this possible and could you help me on my way to accomplish this? Thank you for your help.

2

Yes, it’s possible. When you fetch the images field, you have to use the structure() or yaml() method again to get the images collection, then loop through that collection. I’d use toStructure() for both, then you can use chaining syntax.

<?php
$imageNames = $event->event_beeld()->structure();
foreach($imageNames as $imageName):
  if($image = $imageName->toFile()):
    echo $image;
  endif;
endforeach;
?>

Note: You can’t drag and drop images into the field when using the images field within a structure field, but it works using the add button.

3

Thank you very much for your fast answer. However, i’m getting the error ‘Call to a member function event_beeld() on array’

Any idea why and how i can solve this?

4

That’s probably because you are using yaml() in your first loop. You’d better change that structure().

$events = $page->events()->structure();
foreach($events as $event): ?>	
<dl>                                  
  <dd class="pos-<?= $event->positie() ?> clearfix">
    <div class="circ"></div>
    <div class="time">
      <?php 
      $somedate = $event->event_datum(); 
      echo date('M Y', strtotime($somedate));
      ?>	
    </div>
    <div class="events">
      <div class="events-header"><?= $event->event_titel() ?></div>                                
      <div class="events-body">   
        <?php
        $imageNames = $event->event_beeld()->structure();
        foreach($imageNames as $imageName):
          if($image = $imageName->toFile()):
            echo thumb($image, array('width' => 200, 'height' => 150, 'crop' => true));
          endif;
        endforeach;
        ?>                         
        <div class="events-desc">
          <?= $event->event_tekst() ?>
        </div>
      </div>                                 
    </div>
  </dd>		   
</dl>
<?php endforeach ?>
1 Like