Hi hier mal die Beschreibung erweitert mit deinen Anregungen zur verbesserung:
Das Navtemplate entstand durch ver. Anregungen aus dem Forum - speziell aus diesem Topic:
http://forum.redaxo.de/ftopic2115.html& ... ion+bilder
Das Template ist im Einsatz bei:
http://haussonne.de/index.php
-> diese Webseite ist noch im Aufbau also kein Anspruch auf 100%igkeit. Zusehen ist das ganze schon unter "Portrait".
Es werden pro Menüpunkt 2 Bilder erstellt - ein Link und ein Aktiv Bild - wer interesse daran hat - kann natürlich das ganze erweitern - einen Hover-Effekt via java ließ ich bewusst aus.
Installation:
Für Redaxo installationen ab v3.2 muss die grafikerstellende Funktion ins Template includiert werden. Die Funktion ist unter dem "Template" als "Template/CSS" zu finden -> den Code sollte man nicht als CSS sondern als Template abspeichern und im "default" Template entsprechend includen.
1. Man sollte ein Ordner mit dem Namen "ttf" ins Verzeichnis "/redaxo/include/" erstellen in welchen die eintsprechende ttf-Datei abgelegt werden sollte.
2. Im Ordner "/pics/" noch einen Ordner "navi" erstellen - in diesen werden von Script die Nav-Bilder gelegt.
3a. Für Redaxo Installationen ab v3.2 im Seitentemplate die Funktion includen.
3b. Das Navigations Template einbinden.
Code: Alles auswählen
<?php
// Grafikerstellende Funktion includen
include $REX['INCLUDE_PATH']."/generated/templates/13.template";
// Navigationstemplate includen
$navTemplateId = "11";
include $REX['INCLUDE_PATH']."/generated/templates/$navTemplateId.template";
?>
"13" und "11" durch die korrekten IDs der Templates ersetzen.
4. Die Navigations Ebenen im Seitentemplate einbinden. Dazu diesen Code an der Stelle wo die Navigation erscheinen soll hinkopieren.
"$nav1" dann jeweils deklarieren.
5. Entsprechende Anpassungen vor nehmen. Höhe des Pics, Schriftgröße und Ausrichtung sind von der ttf-Schrift abhängig. Hier heißt es Ausprobieren - nach jedem Test die Bilder im Ordner "/pics/navi/" löschen, da das Script vorhanden Bilddateien nicht überschreibt.
*Extra: Den Code des Navigationstemplates hab ich etwas modifiziert - was das sog. Austesten für ein Ausrichten und Größenanpassung erleichtern sollte.
Code: Alles auswählen
<?php
// EXPLODE PATH
$PATH = explode("|",$this->getValue("path").$this->getValue("article_id")."|");
// GET CURRENTS
$path1 = $PATH[1];
$path2 = $PATH[2];
$path3 = $PATH[3];
/* START 1st level categories */
$nav .= '<!-- start 1st nav -->';
foreach (OOCategory::getRootCategories() as $lev1) {
/* create image 1st level // pic */
$name1 = ereg_replace("([^_A-Za-z0-9\.-])","","$lev1->getName()");
$text1 = $lev1->getName();
$bgcolor1 = "dummy";
$textcolor1 = "black";
$picname1 = $lev1->getId().".gif";
$thisfont1 = $REX[INCLUDE_PATH]."/ttf/schrift.ttf";
$fontsize1 = "13";
$pic_height1 = "25";
$to_align1 = "20";
$left_padding1 = "1";
$how_many_words1 = "100";
createImage($text1,$thisfont1,$REX[INCLUDE_PATH]."/../../pics/navi/$picname1", $fontsize1, $how_many_words1, $pic_height1, "exact", $to_align1, $bgcolor1, $textcolor1, $left_padding1);
/* create image 1st level // pic_2 */
$name12 = ereg_replace("([^_A-Za-z0-9\.-])","","$lev1->getName()");
$text12 = $lev1->getName();
$bgcolor12 = "grey";
$textcolor12 = "white";
$picname12 = $lev1->getId()."_2.gif";
$thisfont12 = $REX[INCLUDE_PATH]."/ttf/schrift.ttf";
$fontsize12 = "13";
$pic_height12 = "25";
$to_align12 = "20";
$left_padding12 = "1";
$how_many_words12 = "100";
createImage($text12,$thisfont12,$REX[INCLUDE_PATH]."/../../pics/navi/$picname12", $fontsize12, $how_many_words12, $pic_height12,"exact", $to_align12, $bgcolor12, $textcolor12, $left_padding12);
if ($lev1->isOnline(true)):
if ($lev1->getId() == $path1) {
$nav .= '<a href="'.$lev1->getUrl().'"><img src="pics/navi/'.$picname12.'" title="'.$text1.'" alt="'.$text1.'" /></a>';
}
// 2nd level - no active link
else {
$nav .= '<a href="'.$lev1->getUrl().'"><img src="pics/navi/'.$picname1.'" title="'.$text1.'" alt="'.$text1.'" /></a>';
}
// 1st level had categories? -> go on
$lev1Size = sizeof($lev1->getChildren());
if ($lev1->getId() == $path1) {
if ($lev1Size != "0") {
$nav2 .= '<!-- start 2st nav -->';
// START 2nd level categories
foreach ($lev1->getChildren() as $lev2):
if ($lev2->isOnline(true)) {
/* create image 2st level // pic */
$name2 = ereg_replace("([^_A-Za-z0-9\.-])","","$lev2->getName()");
$text2 = $lev2->getName();
$bgcolor2 = "dummy";
$textcolor2 = "black";
$picname2 = $lev2->getId().".gif";
$thisfont2 = $REX[INCLUDE_PATH]."/ttf/schrift.ttf";
$fontsize2 = "13";
$pic_height2 = "25";
$to_align2 = "20";
$left_padding2 = "1";
$how_many_words2 = "100";
createImage($text2,$thisfont2,$REX[INCLUDE_PATH]."/../../pics/navi/$picname2", $fontsize2, $how_many_words2, $pic_height2, "exact", $to_align2, $bgcolor2, $textcolor2, $left_padding2);
/* create image 2st level // pic_2 */
$name22 = ereg_replace("([^_A-Za-z0-9\.-])","","$lev2->getName()");
$text22 = $lev2->getName();
$bgcolor22 = "dummy";
$textcolor22 = "blue2";
$picname22 = $lev2->getId()."_2.gif";
$thisfont22 = $REX[INCLUDE_PATH]."/ttf/schrift.ttf";
$fontsize22 = "13";
$pic_height22 = "25";
$to_align22 = "20";
$left_padding22 = "1";
$how_many_words22 = "100";
createImage($text22,$thisfont22,$REX[INCLUDE_PATH]."/../../pics/navi/$picname22", $fontsize22, $how_many_words22, $pic_height22, "exact", $to_align22, $bgcolor22, $textcolor22, $left_padding22);
// 2nd level - active link
if ($lev2->getId() == $path2) {
$nav2 .= '<a href="'.$lev2->getUrl().'"><img src="pics/navi/'.$picname22.'" title="'.$text2.'" alt="'.$text2.'" class="active" /></a>';
}
// 2nd level - no active link
else {
$nav2 .= '<a href="'.$lev2->getUrl().'"><img src="pics/navi/'.$picname2.'" title="'.$text2.'" alt="'.$text2.'" /></a>';
}
// 2nd level had categories? -> go on
$lev2Size = sizeof($lev2->getChildren());
if ($lev2->getId() == $path2) {
if ($lev2Size != "0") {
$nav3 .= '<!-- start 3st nav -->';
// START 3rd level categories
foreach ($lev2->getChildren() as $lev3):
if ($lev3->isOnline(true)) {
/* create image 3st level // pic */
$name3 = ereg_replace("([^_A-Za-z0-9\.-])","","$lev3->getName()");
$text3 = $lev3->getName();
$bgcolor3 = "dummy";
$textcolor3 = "black";
$picname3 = $lev3->getId().".gif";
$thisfont3 = $REX[INCLUDE_PATH]."/ttf/schrift.ttf";
$fontsize3 = "13";
$pic_height3 = "25";
$to_align3 = "20";
$left_padding3 = "1";
$how_many_words3 = "100";
createImage($text3,$thisfont3,$REX[INCLUDE_PATH]."/../../pics/navi/$picname3", $fontsize3, $how_many_words3, $pic_height3, "exact", $to_align3, $bgcolor3, $textcolor3, $left_padding3);
/* create image 3st level // pic_2 */
$name32 = ereg_replace("([^_A-Za-z0-9\.-])","","$lev3->getName()");
$text32 = $lev3->getName();
$bgcolor32 = "dummy";
$textcolor32 = "blue2";
$picname32 = $lev3->getId()."_2.gif";
$thisfont32 = $REX[INCLUDE_PATH]."/ttf/schrift.ttf";
$fontsize32 = "13";
$pic_height32 = "25";
$to_align32 = "20";
$left_padding32 = "1";
$how_many_words32 = "100";
createImage($text32,$thisfont32,$REX[INCLUDE_PATH]."/../../pics/navi/$picname32", $fontsize32, $how_many_words32, $pic_height32, "exact", $to_align32, $bgcolor32, $textcolor32, $left_padding32);
// 3rd level - active link
if ($lev3->getId() == $path3) {
$nav3 .= '<a href="'.$lev3->getUrl().'"><img src="pics/navi/'.$picname32.'" title="'.$text3.'" alt="'.$text3.'" class="active" /></a>';
}
// 3rd level - no active link
else {
$nav3 .= '<a href="'.$lev3->getUrl().'"><img src="pics/navi/'.$picname3.'" title="'.$text3.'" alt="'.$text3.'" /></a>';
}
}
endforeach;
// END 3rd level categories
$nav3 .= '<!-- ende 3st nav -->';
} // END by if ($lev2Size != "0"):
}
$nav2 .= '';
}
endforeach;
// END 2nd level categories
$nav2 .= '<!-- ende 2st nav -->';
} // END by if ($lev1Size != "0"):
}
$nav .= '';
endif; // END by if ($lev1->isOnline())
}
$nav .= '<!-- ende 1st nav -->';
// END 1st level categories
// print $nav;
// print $nav2;
// print $nav3;
?>
Bearbeite folgende Variablen:
$bgcolor = Hintergrundfarbe des Menüpunktes "black, orange, dummy, etc..." -> siehe Funktion -> hier können Farben angegeben werden
Achtung(!) soll ein transparenter Hintergrund genutzt werden muss man darauf achten, dass in der Funktion "dummy" mit der korrekten Transparenzfarbe versehen wird z.B. "black" bei dunklen Hintergründen etc.
$textcolor = Textfarbe (black, blue, etc...)
$thisfont = definiert die Schriftart (xyz.ttf)
$fontsize = definiert die Schriftgröße
$pic_height = definiert die Höhe der Menüpunkte
$to_align = diese Punkt ist etwas speziell - er dient zur Ausrichtung des Textes - dabei wird die Grundlinie ausgerichtet nicht die Unterlänge(!) die Ausrichtung erfolgt von oben nach unten. (gibt man "10" an wird die Grundlinie auf der y-Achse in einer Höhe von 10px angesetzt)
$left_padding = Textabstand zum linken Rand im Bild
$how_many_words = Wieviele Wörter in einer Reihe geschreiben werden
[ externes Bild ]
lg
Joachim
![[ externes Bild ]](http://pixelworks.info/files/fontnav1.gif){kind=link}