CodeBlog.ch

Image Navigation Items

Posted in Concrete5, PHP by Remo Laubacher on the December 14th, 2009

It’s been a while since I’ve posted the last tutorial. Due to some unexpected events I finally found some time to write a new one.

The default autonav Block in Concrete5 allows you to add a navigation/menu to your site in almost no time. But as soon as you want to use images it get a bit more difficult. In this tutorial I’m going to show you, how you can specify pictures for each page and pull them in an autonav template.

Page attributes

Concrete5 allows you do add different kinds of attributes to your page. You can use them to manage meta tags, tags, notes, thumbnails or images for your navigation. First we have to create two new page attributes where we can select the pictures. One which will be shown if the page is currently active and one for inactive pages.

1_page_attribute

All the important information has a red overlay:

  • Attribute type must be Image/File
  • The Handle is used in the template, make sure you remember it
  • The Name is just a description to explain what the use of the attribute is

Assign images

We have two new attributes where we can assign some images. The following screenshot explains this:

2_set_pictures

  • In the sitemap, open “Properties” for the page where you would like to see an image in the navigation
  • Go to the last tab “Custom Fields” and add the two fields you just created
  • Select the image you want to see if the page is active and inactive

Do this for all the pages where you’d like to have an image instead of a text link. You can always add and modify the images for the pages. Even your end-user can add new image menu item this way. One of many reasons why page attributes are so powerful!

Custom Autonav Template

If you haven’t worked with custom template you should probably read this tutorial first: http://www.codeblog.ch/2009/03/concrete5-templates/.

To create a new custom template, simply copy /concrete/blocks/autonav/view.php to /blocks/autonav/templates/image_navigation.php. You probably have to create the folders autonav and templates first.

Around line 55 you should see this code (might be different, depending on your c5 version:

1
2
3
4
5
6
7
8
9
10

if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
}

With some HTML and PHP knowledge you probably have already found the place which outputs the link text. It’s of course “$ni->getName()”. This is the code which we have to modify to display images if they’ve been selected.

We replace $ni->getName() with variables which will hold the html code for the image or the link text:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$linkTextActive = $ni->getName();
$linkTextInactive = $ni->getName();
 
$picOn = $_c->getAttribute('pic_on');
$picOff = $_c->getAttribute('pic_off');
 
if ($picOn) {
  $linkTextActive = '<img src="' . $picOn->getURL() . '" alt="' . $linkTextActive . '"/>';
}
if ($picOff) {
  $linkTextInactive = '<img src="' . $picOff->getURL() . '" alt="' . $linkTextInactive . '"/>';
}
 
if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $linkTextInactive . '</a>');
}
  • Line 1,2: The new variables
  • Line 4,5: Get the attribute values – the image
  • Line 7-12: Checks if the attribute has a value and replaces the link text

Now you can add an autonav block, set all the properties and after you’ve added the block, click on it again an hit “Set Custom Template”. If you create our custom template in the correct folder, you should now be able to select it.

If everything worked you should now have a top navigation like this:

example

19 Comments

19 Responses to 'Image Navigation Items'

Subscribe to comments with RSS or TrackBack to 'Image Navigation Items'.

  1. Bryan Lewis said,

    on December 14th, 2009 at 21:32:57

    This would be a terrific block to have! Is there a way to create a autonav picture block instead of having to manually do this every time?

  2. Remo Laubacher said,

    on December 14th, 2009 at 21:37:43

    Thanks Bryan! It might be possible to create an installer which creates the attributes and adds a new custom template… Will look into that later.

  3. Bryan Lewis said,

    on December 17th, 2009 at 00:03:22

    Thanks for the reply Remo keep the great articles coming! And thanks for all the great contribution!

  4. Bryan Lewis said,

    on December 30th, 2009 at 16:32:18

    Remo, I’m trying to accomplish this and its working for the most part but the pic_on is on no matter what page I’m on or weather I’m hovering over it or not. I’m using pic_off for my handle and am not seeing it at all. Any more tips?

  5. Remo Laubacher said,

    on December 30th, 2009 at 16:44:59

    Well, there is no hover effect. Wanted to make it as simple as possible. But the active picture should change depending on the page you are..
    Got a link?

  6. Paul Napier said,

    on December 31st, 2009 at 21:41:29

    Bryan,

    Can you give me a sample of how your image_navigation.php file looks please. I have followed the tutorial but cannot get any part to work. Some instruction of how much code to replace from line 55 would be good.

  7. Remo Laubacher said,

    on December 31st, 2009 at 22:00:50

    Paul, you have to replace all 10 lines starting at line 55 with the 23 lines in the second codeblock. That’s it!

  8. DianaV said,

    on January 27th, 2010 at 05:08:11

    I am having exactly the same problem as Bryan Lewis on DECEMBER 30TH. I have only 5 menu links on my site where home is the first. As I navigate to the other pages, homes remains as pic-on, it does to change to pic_off. All the other links work well.

    Any thoughts?

  9. Remo Laubacher said,

    on January 27th, 2010 at 19:44:55

    You might want to try to replace $linkTextActive with $linkTextInactive in line 19 but this would also affect multi level sites. The top level wouldn’t be active if you navigate to a child page..

    Home is the parent of all pages in my template and therefore always active. Don’t use “home” ;-)

    1. Home
    1.1 News
    1.1.1 News Entry #1

    If you’re on 1.1.1, 1.1 should be active as well, shouldn’t it? But 1 is also the parent of 1.1 and therefore active as well…

    You can try to exclude home using some checks, but there’s no general solution, it depends on your site structure.

  10. DianaV said,

    on January 27th, 2010 at 22:48:37

    Hi Remo!

    Thanks so much for responding! The solution works perfectly since this particular website is not intended to be multi-level.site. But I do get what you say and it makes a lot of sense.

    Actually, I thought about removing the link home and just have the logo linking to it, but I was debating that thought as many users still feel lost when they do not see this link.

    Once again. Thank you! :)

  11. Dominic Soito said,

    on April 30th, 2010 at 18:06:06

    Is there any way to allow people to use sub domains from server X on server Y?

  12. VortexSurfer said,

    on June 18th, 2010 at 11:23:52

    working just wonderful …

    …but what is the trick to get a hover-effect also?

    tried already tons of variations but didn’t get it working.

  13. Remo Laubacher said,

    on June 18th, 2010 at 11:44:33

    You can easily add something like this:

    onmouseover=”this.src=’< ?php echo $picOn?>‘”

    do the same with onmouseout and you already have a partially working hover effect. Please note, if you do it this way, it won’t preload the images, you might have a short lag when hovering the image.

  14. VortexSurfer said,

    on June 19th, 2010 at 22:49:19

    thanks. it works now.

    actually i added a third pic for the hover-status and added/modified your code from above like this:

    $picHover = $_c-&gt;getAttribute('nav_img_hover');

    and

    if ($picOff) {
  $linkTextInactive = 'getURL().'" onmouseover=src="'.$picHover-&gt;getURL().'" src="' . $picOff-&gt;getURL() . '" alt="' . $linkTextInactive . '"/&gt;';
}
  15. VortexSurfer said,

    on June 19th, 2010 at 22:59:14

    sorry. with mouseout also i looks like this then:

    if ($picOff) {
 $linkTextInactive = '<img onmouseout=src="'.$picOff->getURL().'" onmouseover=src="'.$picHover->getURL().'" src="' . $picOff->getURL() . '" alt="' . $linkTextInactive . '"/>';
}
  16. VortexSurfer said,

    on June 19th, 2010 at 23:03:19

    ??? it modiefied my copy/paste-entry of the code here automatically!??

    …. ach remo spricht ja auch deutsch …

    irgendwie veränder sich der code den ich in meinen kommentar-eintrag reinkopiert habe automatisch!? ist das normal?

  17. Remo Laubacher said,

    on June 20th, 2010 at 08:31:22

    Ja, irgendwie macht Wordpress bei mir diese Codes raus. Wenn man es mit <pre lang=”javascript”>…</pre> umschliesst, wird es sogar bunt..

  18. Rik said,

    on August 18th, 2010 at 13:13:43

    How can i get this lag out of the hover? isn’t there a way to preload al the images like the hover images??

  19. Remo Laubacher said,

    on August 20th, 2010 at 15:10:34

    You have to preload the images. This can be done if you’re using a hidden image or some javascript:

    var im = new Image();
im.src = "bla.png";

Leave a Reply