Zum Inhalt springen

Breadcrumb Trenner als Image

Erstellt am 2. Februar 2015 · 5 Antworten · letzte Antwort am 3. Februar 2015

Tags: Frage

wildtrix ·

Hallo Leute,

wie kann ich an einem Breadcrumb anstatt dem Trenner (Pipe| oder >) ein Image (Beispiel ein Pfeil) einfügen!?

Vielen Dank für eure Hilfe.
Gruß
Wildi

Chrissli ·

Das hängt normalerweise davon ab, wie du deinen Breadcrumb erstellst. I.d.R. ist das z.b. ein Menü vom Typ Rootline, entsprechend kannst du zwischen die Einträge per Wrap oder COA reinbauen was immer du willst

wildtrix ·

Hallo,

also mein breadcrumb sieht so aus (gegoogelt und funktionsfähig).

lib.breadcrumb = COA
lib.breadcrumb {
10 = HMENU
10 {
 special = rootline
 special.range = 1
 # "not in menu pages" should show up in the breadcrumbs menu
 includeNotInMenu = 1
 1 = TMENU
     # no unneccessary scripting.
     1.noBlur = 1
     # Current item should be unlinked
     1.CUR = 1
     1.target = _self
     1.wrap = <div class="breadcrumb"> | </div>
     1.NO {
         stdWrap.field = title
         ATagTitle.field = nav_title // title
         linkWrap = ||&nbsp; &gt;&gt; &nbsp;|
         }
     # Current menu item is unlinked
     1.CUR {
         stdWrap.field = title
         linkWrap = ||&nbsp; &gt;&gt; &nbsp;|
         doNotLinkIt = 1
         }
    }
}

so und anstatt &gt&gt würde ich eine Bildatei dazwischensetzen.
an den Versuchen bin ich leider gescheitert.

Gruß
Wildi

Chrissli ·

So als Beispiel:

1.NO {
    doNotLinkIt = 1
    stdWrap.cObject = COA
    stdWrap.cObject {
        10 = TEXT
        10.field = title
        10.typolink.parameter.field = uid
        10.typolink.ATagTitle.field = nav_title // title

        20 = FILES
        20 {
            references {
                table = tt_content
                uid.data = field:uid
                fieldName = image
            }
         
            renderObj = IMAGE
            renderObj.file.import.data = file:current:uid
        }
    }
}

Das müsstest du natürlich entsprechend an deine Gegebenheiten anpassen, siehe hierzu auch TSref.
Wenn du allerdings nur ein Pfeilchen o.ä. dazwischen setzen möchtest, dann empfehle ich dir anstelle der &gt; ein span / div / etc. zu setzen und per CSS ein background-image zu definieren.

wildtrix ·

hallo,

eigentlich soll es wirklich nur als Pfeilchen laufen. aber als div stellt er das Pfeilchen kreuz und quer. das war auch grund als Anfänger nachzufragen.

Gruß
Wildi

Chrissli ·

Vermutlich weil DIV von Haus aus CSS "display: block". Entweder per float oder mit display: inline-block. Und overflow beachten. Im zweifelsfall mal schauen wie das bei anderen Seiten so ist. Mit Firebug für Firefox und ähnlichen Produkten kann man auch ganz einfach die hinterlegten CSS-Regeln der reweiligen Elemente einsehen.