Fetching images from other pages in 'see also' pane

Hi everybody!

I’m working on a portfolio site and in each project page there is a ‘see also’ pane which lists the other projects on the site. Each project has its own unique icon which I want to be displayed on hover of the specific project title, but I’m having trouble firstly setting it up so that the user can add a unique icon to each project, and secondly fetching those icons in each of the different project pages.

This is what I have currently,

        <?php
        $items = false;
        // get the open item on the first level
        if($root = $pages->findOpen()) {
            // get visible children for the root item
            $items = $root->children()->visible();
        }

        // only show the menu if items are available
        if($items and $items->count()):
        ?>
          <ul>
            <?php foreach($items as $item): ?>
            <li class="clearfix see-also-li">
                <p class="see-also-p"><a<?php e($item->isOpen(), ' class="active"') ?> href="<?php echo $item->url() ?>"><?php echo $item->title()->html() ?></a></p>

                <!-- Fetch project icon -->
                <?php
                // try to get an image object
                $image = $page->projectIcon()->toFile();
                // check if image exists
                if($image): ?>
                <img src="<?php echo $image->url(); ?>" alt="" class="see-also-gif">
                <?php endif ?>
                <!-- <img src="../assets/images/img-ph.gif" class="see-also-gif"> -->
            </li>
            <?php endforeach ?>
          </ul>
        <?php endif ?>

And in my project template blueprint I simply have an image type field.

You can see an image here for clarity (with rollover state active on the King Lake Cabin project):

Hm, it seems you already have an icon field of type image (projectIcon) and you are fetching it correctly in your template. I’m not quite sure what your exact problem is?

Although I don’t quite understand what this part is doing in your code:

        <?php
        $items = false;
        // get the open item on the first level
        if($root = $pages->findOpen()) {
            // get visible children for the root item
            $items = $root->children()->visible();
        }

After all, you want to fetch siblings of the currently opened page, don’t you? So that would be:

$items = $page->siblings(false)->visible(); // exclude the current page by using the false parameter

Thanks texnixe, that’s an elegant solve for fetching sibling projects. The problem with the set up currently is that the icon that the user sees on rollover depends on the one uploaded to the whichever project page the user is currently on, whereas I need it to respond to the corresponding project in the ‘see also’ pane.

Eg in the examples below, the icon is the same for both ‘Regional Futures’ and ‘In Extremis’ on the page …/projects/king-lake-cabin because that’s the one I’ve uploaded to the current ‘King Lake Cabin’ page.

Rollover on ‘In Extremis’…

is the same as rollover on ‘Regional Futures’.

I want what icon is shown for each project to correspond to the icon uploaded to each of those projects in their panel.

Hope that makes sense? Cheers.

Oh, I missed something, you have to fetch the item image, not the page image:

$image = $item->projectIcon()->toFile();
                // check if image exists
                if($image): ?>
                <img src="<?php echo $image->url(); ?>" alt="" class="see-also-gif">
                <?php endif ?>
```

Thanks @texnixe that did the trick!