CodeBlog.ch

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?

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.

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

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?

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?

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.

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

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?

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.

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!

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

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.

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.

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->getAttribute('nav_img_hover');

and

if ($picOff) {
  $linkTextInactive = 'getURL().'" onmouseover=src="'.$picHover->getURL().'" src="' . $picOff->getURL() . '" alt="' . $linkTextInactive . '"/>';
}

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 . '"/>';
}

??? 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?

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

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

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";

Thanks a lot Remo

Hallo,

Vielen Dank für die sehr gute Beschreibung!
Ich habe nur noch ein Problem bei der Formatierung. Leider gelingt es mir nicht die “Aufzählungszeichen” & Formatierungen zu entfernen.

Gibts hier vielleicht noch eine einfach Lösung?

Beste Grüße.

Das ist nicht wirklich ein Problem das mit diesem Template zu tun hat, sondern lediglich ein CSS Problem. Das entsprechende LI element hat wohl kein “list-style-type: none;” weswegen das Standard-Aufzählungszeichen angezeigt wird. Einfach mal die CSS Selektoren prüfen oder gleich einen neuen einfügen..

Holy moly, this worked perfectly. Thank you so much! I was going through various methods to accomplish this same exact thing and I spent hours upon hours trying to get one of them to work. I nearly gave up, but found your tutorial.

As for the “home” link showing up as “active”, a lazy way to fix that is to uncheck the “show in nav” option in the site map properties just for the “home” page. Now that it’s not there, make a new external link that just links to the home page. Position it so that it’s by itself, and doesn’t contain the pages inside of it (like the one you just hid).

Yes, but can you set properties on external links? I don’t think so – this limits the options with this approach?

Yeah, I think you’re correct.

Any way to bypass that or use this if you have external links in your navigation?

I don’t recommend to use external links but there are some options to add a redirection to a “normal” page (can’t find it in the concrete5.org forums right now) but you can also add a check on your own. The home page always has cID = 1 which you can easily check and add a different behavior for it.. A little hacky but I can’t see a nice solution for this at the moment.

I did that and it worked perfectly. Thanks.

Was the question before in regards to assigning an image to an external (non-concrete5 site) link? Sorry but I don’t understand how to do this with no option for a custom attribute associated with the link. Thanks for the clarification.

No that wasn’t the question, he thought it might be an option but it isn’t because as you said, you can’t assign properties to external links. You’d have to use a normal page in combination with a custom attribute and some code to check an event like on_start to redirect to the actual page. You’d basically have to rebuild the functionality behind “external links”. No easy was as far as I can see!

Ok, thanks!
Also, another problem I have is that the sub-levels are appearing beneath the main level images. Perhaps this was addressed above as well but I don’t understand why or how it can be fixed. Thanks again! (see site gospelriver.mysitecreations.com/messages/)

To get by, I’m going to create another navigation with just the sublevel in the body, but I’m still interested if there is an alternative way in the main navigation…

This seems to be a CSS issue, I think there are plenty of solutions to this. First one that popped into my mind: Try to add this CSS rule:

.verticalmenu li {display: inline; }

Not sure if that works well, it’s just theory… If it doesn’t work – try playing with Firebug and add some styles to the elements in the navigation.

Works great! Thanks a million.

Here’s my solution to add an external link that opens in a new window:
Create a text attribute and assign the full URL of the external page in the page’s properties.
Then use the following code:

$linkTextActive = $ni->getName();
$linkTextInactive = $ni->getName();

$picOn = $_c->getAttribute(‘pic_on’);
$picOff = $_c->getAttribute(‘pic_off’);
//$picHover = $_c->getAttribute(‘nav_img_hover’);
$external_link = $_c->getAttribute(‘external_link’);

if ($picOn) {
$linkTextActive = ‘getURL() . ‘” alt=”‘ . $linkTextActive . ‘”/>’;

}

if ($picOff) {
$linkTextInactive = ‘getURL().’” onmouseover=src=”‘.$picOn->getURL().’” src=”‘ . $picOff->getURL() . ‘” alt=”‘ . $linkTextInactive . ‘”/>’;
}

if ($c->getCollectionID() == $_c->getCollectionID()) {
echo(‘
‘ . $linkTextActive . ‘‘);
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) {
echo(‘
‘ . $linkTextInactive . ‘‘); //was linkTextActive
} else {
if (is_null($external_link)){
echo(‘
‘ . $linkTextInactive . ‘‘);
}
else {
echo(‘
‘ . $linkTextInactive . ‘‘);
}
}

Hi Remo,

I’ve done everything in the tutorial but the template does not show up in custom template. I’ve create the folders properly and the code is exactly the same! Do i need more then one file in the template folder or just the image_nav.php??

Thanks

No, you just have to have this file /blocks/autonav/templates/image_navigation.php but make sure you don’t use
/concrete/blocks/autonav/templates/image_navigation.php!

Beside that there’s nothing else to do!

Hi Remo,
I found putting the code in etc the easy bit, after reading through others problems I sorted one of mine. However I still show the bullet points which I dont want is there a line of code I have to change / delete. If not how can I not show them.
I look forward for your reply.
Toturial is a great help.

Alan.

Hi Alan,
is looks like a CSS issue. Try adding a rule like this to main.css or any other css file included in your site:
.nav li { list-style-type:none; }
Remo