Manual sorting of images on a project overview page

Kirby 3 Solved ✅
1

Hi guys, I’m having a little trouble getting the first image of a project on my project-overview page. It always shows the (I think) alphabetically first image, but I’d like it to show the first image in the backend, in case I wanna change the order around later on. Here’s my code:

<?php
	
$filterBy = get('filter');

$projects = $page
	->children()
	->listed()
	->when($filterBy, function($filterBy) {
		return $this->filterBy('category', $filterBy);
	})
	->paginate(4);

$pagination = $projects->pagination();

?>

<div class="main">

	<div class="projects-filter" data-aos="fade-in">
		<a href="<?= $page->url() ?>">All</a>
		<a href="<?= $page->url() ?>?filter=Residential">Residential</a>
		<a href="<?= $page->url() ?>?filter=Commercial">Commercial</a>
		<a href="<?= $page->url() ?>?filter=B2B">B2B</a>
	</div>

	<ul class="projects">
		<?php foreach ($projects as $project): ?>
		<li data-aos="fade-in">
			<a href="<?= $project->url() ?>">
				<div class="border-bottom"><?= $project->image()->crop(600, 800) ?></div>
				<div class="projects-info">
					<div><?= $project->title() ?></div>
					<div class="text-right"><?= $project->subtitle() ?></div>
				</div>
			</a>
		</li>
		<?php endforeach ?>
	</ul>

</div>

I tried adding sortBy but that doesn’t seem to work, it just breaks my php. Many thanks in advance.

Cheers,
Wim

2

image() always returns the first image in the file system. You can only sort a collection, so all images in a page:

if ( $image = $project->images()->sortBy('sort')->first() ) {
  echo $image->crop(600,800);
}
3

Thanks so much! Worked like a charm! :facepunch: