[Frage] TMENU mit background-Image TYPO3-Version: 6.2.7

  • Snob1337 Snob1337
    TYPO3-Anwärter
    0 x
    6 Beiträge
    0 Hilfreiche Beiträge
    01. 04. 2015, 10:04

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

    1. lib.mainnav = HMENU
    2. lib.mainnav {
    3.  
    4. wrap = <ul class="navigationList">|</ul>
    5. /*
    6.   1 = TMENU
    7.   1 {
    8.   expAll = 1
    9.   noBlur = 1
    10.  
    11.   NO = 1
    12.  
    13.  
    14.   NO.allWrap = <li>|</li>
    15.  
    16.  
    17.   NO.stdWrap.htmlSpecialChars = 1
    18.  
    19.   CUR = 1
    20.   CUR.allWrap = <li class="active">|</li>
    21.   CUR.stdWrap.htmlSpecialChars = 1
    22.   }
    23.   */
    24. 1 = TMENU
    25. 1 {
    26. NO = 1
    27. NO {
    28. allWrap.cObject = COA
    29. allWrap.cObject {
    30. 10.stdWrap.wrap = <li style="background-image: url('|')">
    31. 10.file {
    32. import = uploads/media/
    33. import.field = media
    34. import.listNum = 1
    35. }
    36. }
    37. linkWrap= |</li>
    38. }
    39. }
    40. }

    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

    1. <nav class="hlist">
    2. <ul class="navigationList">
    3. <a href="index.php?id=6">Home</a>
    4. <a href="index.php?id=8">Inhaltselemente</a>
    5. <a href="index.php?id=9">Kontaktseite</a>
    6. </ul>
    7. </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 :D

    Ich komme aus der ASP.NET - Welt. Da wäre so ein Menü ein kinderspiel :D
    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

  • Hilfreichster Beitrag

  • Julian.Hofmann Julian.Ho...
    Flash Gordon
    1 x
    2886 Beiträge
    107 Hilfreiche Beiträge
    02. 04. 2015, 09:27 - Hilfreichster Beitrag

    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: "[url=http://blog.undkonsorten.com/typo3-tmenu-wrap-wrapitemandsub-allwrapallstdwrap-linkwrap]Wrap-Dschungel[/url]").
    (Der stdWrap hat eine Sonderstellung und tut nicht nur Strings um den Inhalt packen)

    [b]Kommen wir zu Deinem konkreten Problem:[/b]

    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: [url=https://jweiland.net/typo3/typoscript/bild-aus-den-seiteneigenschaften-auslesen-ab-typo3-60.html]Bild aus den Seiteneigenschaften auslesen ab TYPO3 6.0[/url]

    Viele Grüße
    Julian


  • 1
  • Julian.Hofmann Julian.Ho...
    Flash Gordon
    1 x
    2886 Beiträge
    107 Hilfreiche Beiträge
    02. 04. 2015, 09:27

    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: "[url=http://blog.undkonsorten.com/typo3-tmenu-wrap-wrapitemandsub-allwrapallstdwrap-linkwrap]Wrap-Dschungel[/url]").
    (Der stdWrap hat eine Sonderstellung und tut nicht nur Strings um den Inhalt packen)

    [b]Kommen wir zu Deinem konkreten Problem:[/b]

    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: [url=https://jweiland.net/typo3/typoscript/bild-aus-den-seiteneigenschaften-auslesen-ab-typo3-60.html]Bild aus den Seiteneigenschaften auslesen ab TYPO3 6.0[/url]

    Viele Grüße
    Julian

  • Snob1337 Snob1337
    TYPO3-Anwärter
    0 x
    6 Beiträge
    0 Hilfreiche Beiträge
    02. 04. 2015, 11:06

    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: [url]http://typo3.p253584.mittwaldserver.info/index.php?id=6[/url]
    (Ich weiß, die Seite ansich ist erschreckend :D 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...

    1. 10.stdWrap.wrap= <li style="background-image: url('|')">
    2. 10.file {
    3. import.data = levelmedia:-1, slide
    4. treatIdAsReference = 1
    5. import.listNum = 0
    6. }

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

  • Julian.Hofmann Julian.Ho...
    Flash Gordon
    1 x
    2886 Beiträge
    107 Hilfreiche Beiträge
    02. 04. 2015, 13:18

    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 [url=http://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Files/Index.html]FILES[/url]-Objektes:

    1. 10 = FILES
    2. 10 {
    3. references {
    4. table = pages
    5. uid.field = uid
    6. fieldName = media
    7. }
    8. renderObj = IMG_RESOURCE
    9. renderObj {
    10. file.import.data = file:current:uid
    11. file.treatIdAsReference = 1
    12. stdWrap.wrap= <li style="background-image: url('|')">
    13. }
    14. }

  • Snob1337 Snob1337
    TYPO3-Anwärter
    0 x
    6 Beiträge
    0 Hilfreiche Beiträge
    02. 04. 2015, 14:19

    Mensch, du scheinst deine Sache ja zu beherrschen :) es funktioniert einwandfrei :D :D

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

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

  • rheingau360 rheingau3...
    Sternenflotten-Admiral
    0 x
    151 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2015, 16:31

    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

  • rheingau360 rheingau3...
    Sternenflotten-Admiral
    0 x
    151 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2015, 16:32

    1. 10 = HMENU
    2. 10 {
    3.  
    4. entryLevel = 3
    5.  
    6. wrap = <ul class="navigationList">|</ul>
    7.  
    8. 1 = TMENU
    9. 1 {
    10.  
    11. NO = 1
    12. NO {
    13. allWrap.cObject = COA
    14. allWrap.cObject {
    15.  
    16. 10 = FILES
    17. 10 {
    18. references {
    19. table = pages
    20. uid.field = uid
    21. fieldName = media
    22. }
    23.  
    24. renderObj = IMG_RESOURCE
    25. renderObj {
    26. file.import.data = file:current:uid
    27. file.treatIdAsReference = 1
    28. stdWrap.wrap = <li style="background-image: url('|')">
    29. }
    30. }
    31. }
    32. linkWrap = |</li>
    33. }
    34. }
    35. }

  • Chrissli Chrissli
    Jedi-General
    0 x
    1015 Beiträge
    28 Hilfreiche Beiträge
    20. 05. 2015, 17:55

    Evtl. nach 10 = FILES im COA von allWrap 2 weitere Objekte vom Typ TEXT anlegen?

    1. 1 = TMENU
    2. 1 {
    3.  
    4. NO = 1
    5. NO {
    6. allWrap.cObject = COA
    7. allWrap.cObject {
    8.  
    9. 10 = FILES
    10. 10 {
    11. references {
    12. table = pages
    13. uid.field = uid
    14. fieldName = media
    15. }
    16.  
    17. renderObj = IMG_RESOURCE
    18. renderObj {
    19. file.import.data = file:current:uid
    20. file.treatIdAsReference = 1
    21. stdWrap.wrap = <li style="background-image: url('|')">
    22. }
    23. }
    24. 11 = TEXT
    25. 11.field = title
    26. 12 = TEXT
    27. 12.field = subtitle
    28. }
    29. linkWrap = |</li>
    30. }
    31. }
    32. }

    God's in his heaven, all's right with the world

  • 1