Link multiple images to individual subpage


I have a small problem with my Site. I would like to link multiple Images to their each individual subpage.

My page structure looks like this.

  • Home
  • About
  • Projects
    • Image 1 -> Link to project 1 subpage
    • Image 2 -> Link to project 2 subpage
    • Image 3 -> Link to project 3 subpage

a website with a project page. On that are multiple images. Each Image represent a subpage, i want to link to.
My code looks like this.

<div class="portfolio-image">
    <?php foreach($page->children() as $subpage): ?>
        <?php foreach($page->images()->sortBy('sort') as $image): ?>
        <a href="<?= $subpage->url() ?>">
            <img src="<?= $image->url() ?>">
        <?php endforeach ?>
    <?php endforeach ?>

The problem is, that I get all 3 images with the link to the project 1 subpage. Then again all 3 images with the link to suppage 2 and so on. I can feel it, Iยดm nearly there, but I cant get it to work. Thanks for your help.

What is the relationship between these images and the subpages?

Why are the images not in their respective subfolders? If you want to keep them in the parent, it would probably make sense to have a files field in the subpage where you can select the image you want to show for each subpage.

1 Like

The relationship is like a cover image that shows a little sneak peak into each Project.
Your point is great, I could make a coverimage in each subpage and then loop over each coverimage in my projects overview page. Iโ€™ll try something like that. Thanks a lot for the hint.