Manual sorting of images on a project overview page

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:

$filterBy = get('filter');

$projects = $page
	->when($filterBy, function($filterBy) {
		return $this->filterBy('category', $filterBy);

$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>

	<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>
		<?php endforeach ?>


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


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);

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