Homepage thumbnails link and scroll to anchor on subpage

On my homepage, I’m looking to have project thumbnail images link out and scroll to the correct image on their project subpages. I’m not sure what the best solution would be for this — any help would be much appreciated! :•)

You can get the thumb parent (i.e. the page the original file belongs to like this:

$thumb        = $image->resize(500);
$originalFile = $thumb->original();
$parentPage   = $originalFile->parent();
$url          = $parentPage->url();

To scroll directly to the file, add an id to the image container on the page, e.g. the filename (with or without extension, sluggified) then add that as a hash to the url on the home page:

$url = $url . '/#' . Str::slug($originalFile->name());

Thanks for your quick reply Texnixe! :blush:

So I think I understand the logic but I’m still a bit unsure on implementation! To give some context here’s my home.php template (edit: would look to use thumbs here instead):

<div class="grid grid-cols-12 gap-4 mt-40">
<?php $work = $site->find('work') ?>
<?php foreach ($work->children()->listed() as $project): ?>
	<div class="col-span-12 italic">
		<a href="<?= $project->url() ?>"><?= $project->title() ?><?php if ($project->projectyear()): ?><span class="not-italic">, <?= $project->projectyear() ?></span><?php endif ?></a>
	<?php foreach($work->children()->listed()->images() as $image): ?>
		<div class="col-span-4 xs:col-span-3 sm:col-span-1"><img src="<?= $image->url() ?>" srcset="<?= $image->srcset([300]) ?>"></div>
	<?php endforeach ?>
<?php endforeach ?>

I’m using the Page Builder plugin for project pages so here’s the image block that I’d need to add the id and that would hopefully scroll to based on what thumbnail was clicked on the homepage.

<div class="grid grid-cols-12 gap-4 mb-16">

<div class="
	<?php if ($data->imagewidth() == 'large'): ?>col-span-12<?php endif ?>
	<?php if ($data->imagewidth() == 'medium'): ?> col-span-12 sm:col-span-9<?php endif ?>
	<?php if ($data->imagewidth() == 'small'): ?>col-span-12 sm:col-span-4<?php endif ?>">

	<?php if($image = $data->projectimage()->toFile()): ?>
		<img class="w-full" src="<?= $image->url() ?>" srcset="<?= $image->srcset([800, 1024, 1440, 2048]); ?>" alt="<?= $data->text()->kirbytext() ?>">
	<?php endif ?>

	<figcaption class="mt-2 text-lg"><?= $data->text()->kirbytext() ?></figcaption>


Hopefully, that gives a touch more context to my question! One other thing, currently the homepage is showing every file uploaded to the project page, regardless if they’re in use or not — I want them to be in the order they’re displayed on the page instead of upload date (I assume). Not sure how to get this done :sweat_smile:

Here you fetch the image, so with

$parentPage = $image->parent();

You get the parent page for the image


$url = $parentPage ? $parentPage->url() : null;

you get the URL to that page.

So with that URL you can wrap an anker tag around your image. The only thing that is missing is the hash that needs to be added as above.
But for that to work, you need to add an ID to the image or image wrapper on the target page.