Zum Inhalt springen

Problem mit Menütext und Bildern beim Wrapping

Erstellt am 29. Dezember 2007 · 2 Antworten · letzte Antwort am 1. Januar 2008

Tags: Frage

Adrenalize ·

Ein Freund und ich arbeiten im Rahmen eines Studienprojekts an der Umsetzung eines Touchscreenterminals mit Typo3 als CMS. Obwohl das Ganze für uns Neuland war, sind wir mittlerweile recht hat. ein Problem bereit uns allerdings schon seit einiger Zeit Kopfschmerzen.

Und zwar haben wir Menüseiten, auf denen in der Mitte in zwei Reihen Buttons erscheinen sollen, die der Benutzer klicken kann. Auf den Buttons sind die Seitentiel der nachfolgenden Unterseiten, sowie teilweise noch ein kleines Logo der Seite, zu der der Button führt.

Unser TS code sieht folgendermaßen aus:

# Buttonmenu
list.mymenu = HMENU
list.mymenu.special = directory
list.mymenu.special.value.data = page:uid
# First level menu-object, textual
list.mymenu.1 = TMENU
list.mymenu.1.NO {
# Normal state properties
  noBlur = 1
  allWrap = |
  ATagBeforeWrap = 1
  ATagParams= |*| class="buttonleft" onfocus="this.blur()"| || class="buttonright" onfocus="this.blur()"| |*|
  linkWrap = <div class="buttontext">|</div>
  stdWrap.htmlSpecialChars = 1
  stdWrap.prepend = IMAGE
  stdWrap.prepend.file.width= 55
  stdWrap.prepend.file.height = 55
  stdWrap.prepend.file = fileadmin/templates/images/clear.gif
  stdWrap.prepend.file {
  import.field = media
  import = fileadmin/user_upload/buttonlogos/
  import.listNum = 0
  width= 55
  height=55
  }
  stdWrap.prepend.wrap = <span class="icon">|</span> 
}

"Buttonleft" und "Buttonright" sind dabei Klassen für den href. Die rechten buttons sind mir float:right neben den linken plaziert, daher brauchen wir die 2 Klassen.
Das Problem ist, dass damit das Bild aus dem Buttonlogos-Ordner innerhalb von dem LinkWrap mit der Klasse "buttontext" landet, es soll aber außerhalb stehen, damit ich mit der Klasse "icon" das Bild und mit "Buttontext" den Menütext separat ausrichten kann. Das kleine Logo soll nämlich ganz oben links auf dem Button stehen, der Text hingegen möglichst in der Mitte des Buttons.

Nochmal als Beispiel im HTML:
Was ich habe ist das.

<a href="index.php?id=11" onfocus="this.blur()" class="buttonleft"><div class="buttontext"><img src="typo3temp/pics/76a3335e56.png" width="55" height="55" border="0" alt="" title="" />Maier-Leibniz-Lab (MLL)</div></a>

Was ich möchte ist das:

<a href="index.php?id=11" onfocus="this.blur()" class="buttonleft"><img src="typo3temp/pics/76a3335e56.png" width="55" height="55" border="0" alt="" title="" /><div class="buttontext">Maier-Leibniz-Lab (MLL)</div></a>

Geht das irgendwie mit Typoscript? Falls ja, wie? Ich vermute mal unser Menücode ist alles andere als perfekt, ich bin also sehr dankbar für jegliche Hinweise, die das aufräumen des Codes und/oder die Lösung unseres Problems betreffen. :o

Adrenalize ·

Ich hab etwas rumgebastelt, und meine momentane Lösung wäre schon deutlich näher an dem, was ich will. Hat allerdings noch eine Macke.

# Buttonmenu
list.mymenu = HMENU
list.mymenu.special = directory
list.mymenu.special.value.data = page:uid
# First level menu-object, textual
list.mymenu.1 = TMENU
list.mymenu.1.NO {
# Normal state properties
  noBlur = 1
  allWrap = |*|<span class="buttonleft" onfocus="this.blur()">|</span> ||<span class="buttonright" onfocus="this.blur()">|</span> |*|
  ATagBeforeWrap = 1
  linkWrap = <div class="buttontext">|</div>
  stdWrap.htmlSpecialChars = 1
  beforeImg.import = fileadmin/user_upload/buttonlogos/
  beforeImg.import.field = media
  beforeImg.import.listNum = 0
  beforeImg.width = 55
  beforeImg.height = 55
  beforeImgTagParams = class="icon"
  beforeImgLink = 1
  }

Der Span mit der Klasse "buttonleft"/"buttonright", der meinen eigenen Button erzeugt (per background-image im css) liegt außerhalb des a-tags und ist somit nicht verlinkt. Das macht zwar keine so großen Probleme, weil der div-container "buttontext" ca 90% des Buttons abdeckt, trotzdem wäre es natürlich super, wenn das äußerste Element das a-Tag mit dem Link sein könnte.
Aber dazu müsste ich den Linktext einzeln wrappen können, davor noch das variable Bild rein und dann erst den a-tag.
Ich google und lese die Referenz hoch und runter, aber finde nichts, wie sowas gehen könnte. o.O

Adrenalize ·

Wäre es möglich, den Link auf jedes Menuelement per Typolink außen herum zu setzen? Mit list.mymenu1.NO.doNotLinkIt=1 kann ich ja erreichen, dass er innen keine Links setzt.
Was ich dann bräuchte, wäre die uid des aktuellen TMENUITEMs.

Ich habe dann
list.mymenu.1.typolink.parameter = page:uid
listmymenu.1.typolink.linkWrap = |
versucht, ging aber (natürlich?) nicht.