Hi liebe Community 🙂
ich habe ein Problem... Ich versuche seit Tagen in mein Menü ein Hintergrundbild einzubinden.
Leider komme ich auf keinen grünen Zweig 🙁
das ist mein Menü:
lib.mainnav = HMENU
lib.mainnav {
wrap = <ul class="navigationList">|</ul>
/*
1 = TMENU
1 {
expAll = 1
noBlur = 1
NO = 1
NO.allWrap = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1
CUR = 1
CUR.allWrap = <li class="active">|</li>
CUR.stdWrap.htmlSpecialChars = 1
}
*/
1 = TMENU
1 {
NO = 1
NO {
allWrap.cObject = COA
allWrap.cObject {
10 = IMG_RESOURCE
10.stdWrap.wrap = <li style="background-image: url('|')">
10.file {
import = uploads/media/
import.field = media
import.listNum = 1
}
}
linkWrap= |</li>
}
}
}
der auskommentierte Teil funktioniert soweit wunderbar. Nur jetzt würde ich gerne das bei der Seite hinterlegte Bild als kleines Hintergrundbild meines li-Tags haben.
Bin schon mehrfach auf IMG_RESSOURCE gestoßen. Aber sobald ich diesen Teil mit dem allWrap.cObject = COA einbinde, wird nur noch mein link ausgegeben... ohne <li> - Tag
<nav class="hlist">
<ul class="navigationList">
<a href="index.php?id=6">Home</a>
<a href="index.php?id=8">Inhaltselemente</a>
<a href="index.php?id=9">Kontaktseite</a>
</ul>
</nav>
Des Weiteren bin ich auch auf "treatIdAsReference = 1" gestoßen. dies wird wohl seit Typo3 6 benötigt um die Ressourcen einer Seite anzusprechen.
Was mich an der ganzen Sache am meisten verwirrt, sind die allWraps und stdWraps und linkWraps...
BTW: mein derzeitiger Code mit dem cObject stammt aus einem Forum... wurde dort als Lösung markiert. Alle haben sich gefreut weil es funktioniert hat... naja, alle bis auf mich 😃
Ich komme aus der ASP.NET - Welt. Da wäre so ein Menü ein kinderspiel 😃
Aber mein Chef will ja unbedingt mit Typo3 arbeiten :/
Also, würde mich mega freuen wenn mir einer sagen kann, was ich falsch mache 🙂
Viele Grüße,
Marc
Hallo Marc.
Die Wraps sind Fluch und Segen zugleich. Anfangs verwirren sie sehr stark, nach und nach lernt man ihre Stärken aber kennen und merkt welch tolles Werkzeug sie eigentlich sind :-)
Die Wraps haben alle das gleiche Prinzip: sie bestehen aus einem String, der einen Trenner (Pipe-Symbol) enthält. An der Stelle des Trenners wird der aktuelle Inhalt des TypoScript-Objektes eingesetzt. Ansonsten unterschiedens ich die Wraps hauptsächlich durch ihren Ausführungszeitpunkt/die Reihenfolge der Anwendung (siehe hierzu auch einen Blogbeitrag: "Wrap-Dschungel").
(Der stdWrap hat eine Sonderstellung und tut nicht nur Strings um den Inhalt packen)
Kommen wir zu Deinem konkreten Problem:
Der Forumsbeitrag ist schon etwas älter gewesen, stimmt's?
Der Schnipsel sollte nämlich so auch funktionieren - aber nur in älteren TYPO3-Installationen (vor Version 6.0). Mit 6.0 wurde der File Abstraction layer (FAL) eingeführt. Seitdem stehen in der Spalte "media" keine Dateinamen mehr (die der Schnipsel zusammen mit dem Pfad kombiniert), sondern sind die Bilder per Datenbankrelation verbunden => der Zugriff funktioniert anders.
Eine recht einfache Variante der Einbindung des Media-Feldes beschreiben die Kollegen von jweiland: Bild aus den Seiteneigenschaften auslesen ab TYPO3 6.0
Viele Grüße
Julian
Vielen Dank für deine Antwort... Dank des Links zum "Wrap-Dschungel" bin ich schon ein ganzes stückchen weiter 🙂
Nun sieht das ganze wie folgt aus: http://typo3.p253584.mittwaldserver.info/index.php?id=6
(Ich weiß, die Seite ansich ist erschreckend 😃 sind auch nur ein paar Typo-Tests 😉 )
jetzt lädt er mir zumindest das Bild ... nur leider immer das selbe. Wie komme ich nun an die Seiten-Ressource der jeweiligen Seite des Links?
die Maus welche zu sehen ist, ist nur bei der "Home" Seite hinterlegt. Die anderen beiden Seiten haben ein anderes Bild hinterlegt. Ich vermute, dass dieser Code...
10 = IMG_RESOURCE
10.stdWrap.wrap= <li style="background-image: url('|')">
10.file {
import.data = levelmedia:-1, slide
treatIdAsReference = 1
import.listNum = 0
}
...nur die Ressourcen der aktuell geladenen Seite darstellt.
Wie komme ich nun über mein TS an die Ressourcen der anderen Seite um entsprechend die anderen Bilder darzustellen?
Danke im Voraus 🙂
Viele Grüße,
Marc
Hui, sorry. levelmedia bezieht sich auf die aktuell aufgerufene Seite (bzw. deren Pfad nach oben). Da hab ich nicht genug aufgepasst/mitgedacht :-/
Was ans Ziel führen sollte, um die Datenbankrelation aufgelöst zu bekommen, ist die Verwendung des FILES-Objektes:
10 = FILES
10 {
references {
table = pages
uid.field = uid
fieldName = media
}
maxItems = 1
renderObj = IMG_RESOURCE
renderObj {
file.import.data = file:current:uid
file.treatIdAsReference = 1
stdWrap.wrap= <li style="background-image: url('|')">
}
}
Mensch, du scheinst deine Sache ja zu beherrschen 🙂 es funktioniert einwandfrei 😃 😃
muchas Gracias #love#
Nun werde ich mal versuchen das ganze Bild zu verlinken 🙂
Momentan wird ja der Link innerhalb des <li>-Tags geschrieben... Aber das sollte ja nicht sooo schwierig sein... hoffe ich 😃
ansonsten weiß ich ja, an wen ich mich ruhigen Gewissens wenden kann 😉
Nochmal vielen Dank für deine Mühe... wenn du mal Fragen im Bereich .NET hast, sag bescheid 😃
Hi zusammen,
soweit erst mal cool (es funktioniert), DANKE.
Ich habe das gerade in mein Projekt übernommen, in dem ich ein Kachelmenü (je ein LI-Element mit Hintergrundbild + TITLE + SUBTITLE) bauen möchte.
Irgendwie habe ich einen Knoten im Kopf und schaffe es nicht, das Menü so zu wrappen, dass TITLE + SUBTITLE innerhalb des Listenelements stehen.
Julian, hast du da noch einen Tipp zu? Jeder andere natürlich auch gern :-)
Liebe Grüße,
Kai
10 = HMENU
10 {
entryLevel = 3
wrap = <ul class="navigationList">|</ul>
1 = TMENU
1 {
NO = 1
NO {
allWrap.cObject = COA
allWrap.cObject {
10 = FILES
10 {
references {
table = pages
uid.field = uid
fieldName = media
}
renderObj = IMG_RESOURCE
renderObj {
file.import.data = file:current:uid
file.treatIdAsReference = 1
stdWrap.wrap = <li style="background-image: url('|')">
}
}
}
linkWrap = |</li>
}
}
}
Evtl. nach 10 = FILES im COA von allWrap 2 weitere Objekte vom Typ TEXT anlegen?
1 = TMENU
1 {
NO = 1
NO {
allWrap.cObject = COA
allWrap.cObject {
10 = FILES
10 {
references {
table = pages
uid.field = uid
fieldName = media
}
renderObj = IMG_RESOURCE
renderObj {
file.import.data = file:current:uid
file.treatIdAsReference = 1
stdWrap.wrap = <li style="background-image: url('|')">
}
}
11 = TEXT
11.field = title
12 = TEXT
12.field = subtitle
}
linkWrap = |</li>
}
}
}