Image sorting in panel not reflected on front-end, for multi-language support

Kirby 2 Solved ✅
1

Hi all, for the first time I’ve created a one-pager with two-language setup (English/Korean). The basic structure scrolls to three main ids.

First Question:
In the second , I only want the first image from this $event to display, but while I manually reorder the files in /panel using drag and drop, and call them at the front-end, it does not reflect the order in /panel. Like the boilerplate one-pager example, these are wrapped in an unordered-list.

Second Question:
If there is no image to accompany the li, my code breaks, since the figure is looking for an img. I’m wondering how to re-write this as a conditional call, so that if there is no image for the $event, its not a problem.

	    <?php foreach($data->children()->visible() as $event): ?>
			<li class="make-block decompose-lines">
				<h1>
					<?php echo $event->artist()->kirbytext() ?>
					<?php echo $event->artwork()->kirbytext() ?>
				</h1>
					<?php echo $event->text()->kirbytext() ?>
	        <figure class="make-block decompose-lines">
	          <img src="<?php echo $event->images()->first()->url() ?>" alt="<?php echo $event->title()->html() ?>" />
	        </figure>
	      </li>
	    <?php endforeach ?>

Thank you very much!

2

Here you go:

<?php
// let's sort the images by the sort field and grab the first
// (when images are manually sorted in the Panel, a meta data file with a sort field is added)
$image = $event->images()->sortBy('sort', 'asc')->first();
// check if the image exists
if($image):
?>
<figure class="make-block decompose-lines">
  <img src="<?php echo $image->url() ?>" alt="<?php echo $event->title()->html() ?>" />
</figure>
<?php endif ?>
1 Like
3

AH, thank you! I was attempting an <if statement, but I did not apply it outside the figure and my syntax was wrong. I was also concerned the code was breaking since the meta data was not being added with both languages.

But this works precisely.

Thank you, again.