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