CodeBlog.ch

Bilder in der Navigation

Concrete5 Navigation mit Bildern – der autonav Block erlaubt es sehr einfach und schnell eine hierarchische Seitenstruktur zur Navigation einzufügen. Sollen jedoch nicht Text-Links, sondern Bilder angeklickt werden, braucht es etwas mehr Arbeit.

In diesem Tutorial werde ich ein “Custom Template” für den autonav Block erstellen, welches ein Attribut von einer Seite ausliest um ein Bild anstelle des Textes anzuzeigen.

Seiten Attribute

Mit Concrete5 können verschiedene Attribute einer Seite hinzugefügt werden. Damit kann man Meta-Tags, Notizen, Tags, Thumbnails oder eben auch Bilder für die Navigation verwalten. Als erstes müssen wir zwei neue Attribute erstellen. Eines wo wir das Bild auswählen können, wenn die Seite inaktiv ist und eines wenn die Seite aktiv ist.

1_page_attribute

Die roten Stellen sind entscheidend:

  • Typ muss “Image/File” sein
  • Das “Handle” ist wichtig, wir benötigen es später im Template
  • Der Name ist nur informativ

Bilder zuweisen

Wir haben nun zwei neue Attribute. Wie auf diesem Screenshot gezeigt, können wir dort Bilder zuweisen:

2_set_pictures

  • In der “Sitemap” die gewünschte Seite suchen und “Properties” auswählen
  • Unter “Custom Fields” können wir nun die beiden Felder für diese Seite aktivieren
  • Nun die beiden Bilder für die Navigation auswählen

Das Gleiche bitte nun für alle Seiten machen wo kein Text sondern ein Bild in der Navigation erscheinen soll. Dies ist übrigens etwas das auch ein End-User machen kann. Dank den Seiten-Attributen kann ein End-User sogar Navigationselemente mit grafischem Text selber hinzufügen.

Custom Template für den Autonav Block

Wer mit dem Stichwort “Custom Template” nichts anfangen kann, sollte vermutlich zuerst dieses Tutorial durchlesen: http://www.codeblog.ch/de/2009/03/concrete5-templates/.

Um ein neues Custom Template für den Autonav Block anzulegen, können wir ganz einfach von dieser Datei /concrete/blocks/autonav/view.php eine Kopie hier ablegen: /blocks/autonav/templates/image_navigation.php. Die Verzeichnisse autonav und templates müssen vermutlich zuerst erstellt werden.

In Zeile 55 sollte dieser Code zu finden sein. Je nach Concrete5 Version kann sich das natürlich ändern.

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>');
}

Mit etwas HTML und PHP Kenntnissen erkennen wir bereits wo der Link-Text ausgegeben wird. $ni->getName(). Dies ist auch die Stelle wo wir nun ein Bild, falls vorhanden, ausgeben wollen.

Wir ersetzen $ni->getName() also mit Variablen und prüfen vorgängig ob das Seiten-Attribut einen Wert hat und weisen anschliessend ein img-Tag zu.

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: Die neuen Variablen
  • Line 4,5: Attribut-Wert auslesen
  • Line 7-12: Prüft ob das Attribut einen Wert hat und generiert das img-Tag

Jetzt kann ein autonav Block eingefügt werden, alle Einstellungen vornehmen und nachdem der Block hinzugefügt wurde, erneut anklicken und “Set Custom Template” wählen. Hier sollte nun unser neues Custom Template erscheinen.

Wenn alles funktioniert hat, sollte nun eine Navigation mit Bildern erscheinen:

example



63 Comments

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?

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.

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! 🙂

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;';
}

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?

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

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.

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

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.

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

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, having a little problem, I follow the instructions to the letter but get this

Parse error: syntax error, unexpected T_VARIABLE in /home/couk13/public_html/website.com/blocks/autonav/view.php on line 70

I am using concrete 5.5 if that has an effect on it

Ta

Hi Remo,

Just when I thought I’d got things sorted with another site (thank you) C5 goes and updates things.

It appears that adding custom attributes to create image-on and image-off are not available anymore am I missing something.

Cheers,
Alan.

Hey Alan, attributes are still supported and I’m rather confident that they will always be supported as lots of add-ons use these attributes.
I’m not a tablet right now, a bit tricky to take a screenshot but please have a lock again and let me know if you cannot find it and I’ll take a screenshot for you.

Remo,

Please forget my last post, yes they are there but I just had to create the custom attributes, not sure why C5 removed that as a standard feature?.

Anyhow your are a legend in my book, great tutorial and code.
All worked first time fantasticly.

Thanks,
Again.

Alan.

Hi Remo,

OK i’ve got my buttons working and images etc.
Questions are:

My home page button doesn’t swap images as the others when other pages are selected, so it appears on all the time. They are all set-up the same way?

As the other site I created which works great, the home page is the parent. Looking a the sitemap of both the sites should the other pages be subpages to the home?

Is it possible to space the images out and position them centrally on the page? (I achieved this on a previous site by only having the images as text and making the size of the actual image wide enough to look like the images were spaced out)

For comparing:

The site I have the issue with is:
http://www.rootsearthworksandlandscaping.co.uk

The site I did before is:
http://www.mcinallyphotography.co.uk

Regrads,
Alan.

That’s because home is the top element and therefore always has the nav-path-selected class. You probably have to come up with your own template for this. Shouldn’t be too difficult, just check for the cID which is always 1 for the home page and add an exception for it

Remo,

“Shouldn’t be too difficult”? That’s a matter of opinion.

The other site I did with the older version of C5 worked beautifully and I haven’t done anything different this time.

I’m still new to the whole web development thing so I ask what is “cID”

Any additional help with this would be great.

Regards,
Alan.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *



CodeBlog.ch, 2024. Theme Material for Coders