[gelöst]Images in der Navigation einbinden?

[Adana]

Hallo Leute!

Ich möchte in meiner Hauptnavigation den einzelnen Menüpunkten Bilder zuweisen. Diese Option wird ja auch im Admin-/Portaleditor angeboten.
Leider werden die Grafiken in der Navigation aber nicht angezeigt.
Ich vermute jetzt mal, daß man dazu erst noch das entsprechende Navitemplate anpassen muß. Das habe ich versucht, aber ohne Erfolg. Möglicherweise habe ich die richtige Syntax nicht getroffen?

Code: Alles auswählen

<level_1_active>
<li><a href="%%href%%" target="%%target%%" class="active">%%text%%<img src="%%image%%></a>%%level2%%</li>
</level_1_active>

funktioniert genau so wenig wie:

Code: Alles auswählen

<level_1_active>
<li><a href="%%href%%" target="%%target%%" class="active">%%text%%<img src="%%image_src%%></a>%%level2%%</li>
</level_1_active>

Einfacher wäre es sicherlich über die css-Datei einfach eine Hintergrundgrafik zuzuweisen, doch ich möchte schon gerne unterschiedliche Grafiken für die einzelne Menüpunkte verwenden...

Ich wäre dankbar, wenn mir da jemand den entscheidenden Hinweis liefern könnte.

Gruß,

Adana

[mschatz]

Sers,

2 tipps:
Fertigen Quellcode ansehen, da erkennt man syntax.
Img_src variable mit echten Bildpfad ersetzen

Mfg

Michael

Mobil

[Adana]

Hallo Michael!

Herzlichen Dank für Deine Antwort!

So, das Quelltext anschauen hat schon geholfen, aber letztendlich war es mal wieder der Cache. Nachdem ich den geleert hatte, wurden auch die Grafiken angezeigt.

Nun habe ich dazu aber noch eine Frage. ist es möglich die Grafiken auch einfach nur als Hintergrund darzustellen und den Text darüber?
Derzeit ist es so, daß ich nur die Grafiken als Link habe, die Texte mußte ich heraus nehmen und zwar aus dem Grunde, weil er mir die eingebundenen Grafiken als Link einbindet.
Würde ich nun Text und Grafik verwenden, dann schreibt er mir den Link zweimal hintereinander.

Optimal wäre es, wenn man im Portaleditor, bei der Bearbeitung der einzelnen Menüpunkte auch direkt eine Hintergrundgrafik auswählen könnte. Derzeit kann man ja nur ein Bild als Alternative zum Textlink wählen (welche aber auch nur angezeigt wird, wenn man das in dem Navi-Template ändert).

Vielleicht kann man da ja im "Hintergrund" des Systems etwas modifizieren?

Gruß Adana

[threeB]

Moin,
willst Du für jeden Eintrag eine eigene Hintergrund Grafik? Oder bekommen alle den selben Hintergrund?

Beim letzteren würde ich dies in der css Datei definieren.

Beim ersteren würde ich es mit inline css und dem %%image_src%% versuchen damit könnte man dann vermutlich für jeden Eintrag eine Eigene Hintergrundgrafik im Admin Berreich definieren.

Code: Alles auswählen

<level_1_active>
<li style="background-image:url(%%image_src%%)"><a href="%%href%%" target="%%target%%" class="active">%%text%%</a>%%level2%%</li>
</level_1_active>
</level_1_active>

Nur so als schnelle Idee selber nicht getestet.

[Adana]

Moin threeB!

Es geht mir wirklich um jeweils eine eigenen Bilddatei pro menüpunkt, als zweiteres.

Die Lösung eine Grafik für alle über css ist mir bekannt.

Ok, ich habe Deine Idee mal ausprobiert. Leider funzt es nur mit dem image, nicht mit dem image_src. Wenn ich es aber mit dem image-Platzhalter mache, dann bekomme ich volgenden Quelltext ausgegeben:

Code: Alles auswählen

<ul>
<li style="background-image:url(<a href="http://www.galaxydinner.org/galaxy/index.php?page=index" target="_self" ><img src="http://www.galaxydinner.org/galaxy/portal/pics/upload/schalter/switch-1.png" border="0" alt="Base"/></a>)"><a href="http://www.galaxydinner.org/galaxy/index.php?page=index" target="_self" class="active">Base</a></li>

<li style="background-image:url(<a href="#" target="_self" ><img src="http://www.galaxydinner.org/galaxy/portal/pics/upload/schalter/switch-3.png" border="0" alt="Logbuch"/></a>)"><a href="#" target="_self">Logbuch</a></li>

<li style="background-image:url(<a href="#" target="_self" ><img src="http://www.galaxydinner.org/galaxy/portal/pics/upload/schalter/switch-2.png" border="0" alt="Crew"/></a>)"><a href="#" target="_self">Crew</a></li>

<li style="background-image:url(<a href="#" target="_self" ><img src="http://www.galaxydinner.org/galaxy/portal/pics/upload/schalter/switch-2.png" border="0" alt="Spezies"/></a>)"><a href="#" target="_self">Spezies</a></li>

<li style="background-image:url(<a href="#" target="_self" ><img src="http://www.galaxydinner.org/galaxy/portal/pics/upload/schalter/switch-3.png" border="0" alt="Technik"/></a>)"><a href="#" target="_self">Technik</a></li>

<li style="background-image:url(<a href="#" target="_self" ><img src="http://www.galaxydinner.org/galaxy/portal/pics/upload/schalter/switch-1.png" border="0" alt="Termine"/></a>)"><a href="#" target="_self">Termine</a></li>

<li style="background-image:url(<a href="#" target="_self" ><img src="http://www.galaxydinner.org/galaxy/portal/pics/upload/schalter/switch-2.png" border="0" alt="Stories"/></a>)"><a href="#" target="_self">Stories</a></li>

<li style="background-image:url(<a href="#" target="_self" ><img src="http://www.galaxydinner.org/galaxy/portal/pics/upload/schalter/switch-2.png" border="0" alt="Links"/></a>)"><a href="#" target="_self">Links</a></li>

<li style="background-image:url(<a href="#" target="_self" ><img src="http://www.galaxydinner.org/galaxy/portal/pics/upload/schalter/switch-1.png" border="0" alt="Ehrentafel"/></a>)"><a href="#" target="_self">Ehrentafel</a></li>
</ul>

Er baut mir also die Grafik als eigenen Link ein, so daß der Text-Link nicht über dem Hintergrundbild liegt, sondern darunter. Das hängt, vermute ich mal, mit der Konfiguration in dem Portal/Admin-Editor zusammen, denn da ist ja auch beschrieben, daß man eine Grafik verwenden kann, die dann anstelle des Textes angezeigt wird...

Oder kann man noch woanders die jeweilige Hintergrundgrafik den einzelnen Menüpunkten als Hintergrundgrafik zuweisen?
Was hat es eigentlich mit den Tags zu tun, die man ja in dem Editor auch anlegen kann. Könnte man damit evtl. jedem Link eine Klasse zuweisen und das ganze dann doch über css regeln?

Bin mal gespannt auf Eure Vorschläge!

Gruß,

Adana

[mschatz]

Servus Adana,

ich habe jetzt mal nachgeschaut und glaube, es kommt aus der Datei /portal/elemente/class_element_image.php, (bei mir gibts noch eine class_element_bild.php?). Wo genau trägst du das Bild ein? Anbei mal ein Bild wo man ein Bild offensichtlich hinterlegen kann (Admin-Backend).

Mfg

[Adana]

Hi Mschatz!

Ja, genau den Dialog im Admin-Backend meine ich. Und ich trage die Grafik in der entsprechenden Zeile, Bild: , ein.

Ich habe mir die Datei /portal/elemente/class_element_image.php auch mal angeschaut. ich denke auch, daß die Verlinkungs-Geschichte aus dieser Datei heraus so generiert wird.
Allerdings habe ich diese andere Datei, die class_element_bild.php bei mir nicht gefunden. hast Du die tatsächlich? Und wie schaut die dann aus?

Gruß,

Adana

[threeB]

Ok, ich habe Deine Idee mal ausprobiert. Leider funzt es nur mit dem image, nicht mit dem image_src. Wenn ich es aber mit dem image-Platzhalter mache, dann bekomme ich volgenden Quelltext ausgegeben:

Er baut mir also die Grafik als eigenen Link ein, so daß der Text-Link nicht über dem Hintergrundbild liegt, sondern darunter. Das hängt, vermute ich mal, mit der Konfiguration in dem Portal/Admin-Editor zusammen, denn da ist ja auch beschrieben, daß man eine Grafik verwenden kann, die dann anstelle des Textes angezeigt wird...

Moin,
wenn Du %%image%% einbindest ist es klar das Kajona Dir dann den Code für ein komplettes Bild einfügt. Deswegen %%image_src%% welches nur den Pfad vom Bild einfügt.

Ich habe das mal ausprobiert und es funktioniert der angehängte Code für das navigations template bei einer imgrunden frischen Kajona 3.4.2 Installation. Ich musste noch _webpath_ einfügen um eine vollständige Addresse zu erhalten. Dann erhielt ich das im Admin Bereich eingestellte Bild, als Hintergrund des Listenelements.

Code: Alles auswählen

<level_1_active>
<li style="background-image:url(_webpath_%%image_src%%)">%%link%% &middot;</li>
</level_1_active>

[Adana]

Jahuuu!!

Jetzt funzt es! Herforragend! threeB, ich danke Dir! Nun geht es an den Feinschliff!

Gruß,

Adana

[threeB]

Gern geschehen.

[ATLAS]

Insgesamt eine komplizierte Lösung. Für die Zukunft sollte es möglich gemacht werden, jeder Neuanlage im Backend, in diesem Fall den einzelnen Navigationspunkten, eine Klasse mitgeben zu können. Nur so ist das Updatesicher, bedienfreundlich und ausschließlich über CSS zu anzusteuern. So kann das an vielen Stellen gemacht werden und würde die individuelle Gestaltung jeder einzelnen Seite, wenn man es denn braucht, erleichtern.