CodeBlog.ch

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.

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:

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