Forums

Image Menu Items

Permalink 1 user found helpful
Hi,

How can i make autonav or menu items with images ?

Thanks
orange73
 
Sergio replied on at Permalink Reply
Sergio
You can use a custom template.

One option is to copy autonav header_menu template to your block folder and print the page Id as id of the LI tag.

Put this in lines 19:
$pageId = $ni->getCollectionID();

And change line 36 to this:

echo '<li class="'.$navSelected.' '.$isFirstClass.'" id="page_'.$pageId.'">';

All <li> will have an id like this "page_#" where # is the page id.
Remo replied on at Permalink Reply
Remo
I usually create two page attributes "pic on" and "pic off".

I then create a custom template where I fetch the pictures using getAttribute.

This has the advantage that you're able to change/add the items using c5 and don't have to modify any css files...

Might be a nice tutorial... Will check if I have some time to write it (:
orange73 replied on at Permalink Reply
orange73
Ok Remo, i'm waiting for tutorial :-)
Thanks
Remo replied on at Permalink Reply
Remo
New tutorial on CodeBlog:

http://www.codeblog.ch/2009/12/image-navigation-items/...
VortexSurfer replied on at Permalink Reply
VortexSurfer
very nice tutorial. works perfectly for me.

but any chance to get some kind of hover-effect with this method also?
VortexSurfer replied on at Permalink Reply
VortexSurfer
very nice tutorial. works perfectly for me.

but any chance to get some kind of hover-effect with this method also?
Sergio replied on at Permalink Reply
Sergio
Nice approach Remo!
But I suggest to use one image file for all menu items and CSS background position. What do you think?

Thanks for the tutorial!
Remo replied on at Permalink Reply
Remo
well, this would sure be better if you want to build a perfect site but it's very hard to handle...

1. I don't have a single end-user who would be able to manage such a solution.

2. C5 also doesn't have a "image region selector", I therefore couldn't use page attributes, I would have to build my own attribute with a custom editor to select.

3. Building the interface is a lot harder and would take way more time than I needed to write the tutorial.


To me, it's just not worth the effort. Creating a new attribute, educate all the users to create single images etc. etc.

If I'd build a library, something like TinyMCE I'd definitely use the single image css position solution but for a website it's just too much effort compared to what you get back..

But feel free to create autonav2 with a custom image selector ;-)
FatTony1952 replied on at Permalink Reply
FatTony1952
I'm working on a site now where the client wants a small image of a house as the home icon in the menu, but the rest of the menu items to still be text.

I haven't dove into it yet, but it seems like you would only have to make a file upload page attribute named "menu_icon" or something then put something like this in your autonav template

if ($menu_icon) {
  $menu_icon = '<img src="' . $menu_icon->getURL() . '" alt="' . $ni->getName() . '"/>';
}
} else {
   echo('
   <li><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
}


That could be way off, but seems simple for anyone needing to have just one image in the menu.
jero replied on at Permalink Reply
jero
You're on the right lines. Funnily enough I've done something similar twice this week. I added a file/image attribute to a page, and then set the attribute on a range of pages. Each one has a different image. I created a new autonav template (in blocks/autonav/templates/My_View.php) which contains this:

$fo = $_c->getCollectionAttributeValue('icon_image');
         if (is_object($fo)) {
                 $fID = $fo->getFileID();
                 $ih=Loader::helper('image');
                 $thumb = $ih->getThumbnail($fo, 76, 60);
                 $image = '<img src="'.$thumb->src.'" width="'.$thumb->width.'" height="'.$thumb->height.'" title="'.$ni->getName().'" alt="'.$ni->getName().'"/>';
         }


In the case above, I use the image helper to ensure that the image has a maximum height & width, just in case the client uploads a huge image.
FatTony1952 replied on at Permalink Reply
FatTony1952
That is pretty much what I had in mind. Hopefully I can get into this portion of the development in the next day or so.

This will be an extremely helpful thread now that the little house icon is becoming popular as the home button on many websites now.