---
title: "Media-Bild gecroppt als background-image Typo3 6.x"
url: "https://www.typo3.net/d/114276-media-bild-gecroppt-als-background-image-typo3-6x"
source: "typo3.net"
tags: ["TYPO3","Menüs","Bilder","Frage","TYPO3 6"]
created: "2013-03-20"
last_reply: "2013-03-26"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

# Media-Bild gecroppt als background-image Typo3 6.x

TYPO3 › Menüs · 4 Antworten · gestartet 2013-03-20

## Eröffnungsbeitrag

**cardshark** · 2013-03-20 · [Beitrag #1](https://www.typo3.net/d/114276-media-bild-gecroppt-als-background-image-typo3-6x/1)

hallo leute,
leider bin ich in typoscript nicht besonders fit, da ich nur selten dazu komme es einzusetzen.
folgenden html-code möchte ich genierieren:

```html
<li class="[alias oder titel]" 
style="background-image:url([medienbild der jeweilgen seite])">
<a href="[typolink]"><strong>[title]</strong>[subtitle]</a>
</li>
```

ich hab schon sehr viele einträge angesehen - aber igendwie läuft es einfach nicht.

sazu kommt die schwierigkeit, dass das bild aus dem Meidenfeld auf **175x129px gecroppt** werden soll - und das ganze in **Typo 3 6.x**

folgendes script funktioniert zumindest schon mal

```typoscript
    1{
      noBlur =1
      ACT = 1
      wrap= <ul>|</ul>      
      NO{  
        before.dataWrap = <li class="{field:title}">
        after.dataWrap = </li>
        ##in link hinein
        ATagBeforeWrap = 1
        stdWrap.dataWrap = <strong>|</strong>{field:subtitle}
        ####in link hinein ende
        ATagTitle.field = abstract // description // title
      }
```

alles andere hat aber leider nichts gebracht..

DANKE IM VORAUS!
LG
hannes

## Antworten

### [#2](https://www.typo3.net/d/114276-media-bild-gecroppt-als-background-image-typo3-6x/2) · Norman2k · 2013-03-20

> **cardshark schrieb:**
>
> ... folgendes script funktioniert zumindest schon mal
> alles andere hat aber leider nichts gebracht...

Was genau funktioniert jetzt schon mit diesem Script und was genau nicht?

### [#3](https://www.typo3.net/d/114276-media-bild-gecroppt-als-background-image-typo3-6x/3) · cardshark · 2013-03-20

hallo Norman2k,
also das mit den **gecroppten Bildern aus den Medienupload als style="background-image...) funktioniert nicht** (siehe original html).
in der zwischenzeit habe ich noch herausgefunden, dass in typo3 v6 statt alias wohl nav_title benutzt werden muss.
dieser code wird bis jetzt erzeugt:

```html
<li class="almnachrichten">
<a title="Lorem Ipsum" href="index.php?id=2">
<strong>Almnachrichten</strong>
Hier findest du Almnachrichten. Lorem Ipsum und so weiter
</a>
</li>
```

lg

### [#4](https://www.typo3.net/d/114276-media-bild-gecroppt-als-background-image-typo3-6x/4) · cardshark · 2013-03-21

Hier mal ein TypoScript das aus verschiedenen Snippets zusammengepfuscht ist, bei dem das auslesen des Bildes aus dem Media-feld leider überhaupt nicht klappt. Natürlich habe ich auch viele andere Sachen probiert, die aber genauso wenig zum Erfolg geführt haben.

```typoscript
  subparts.Nav1=HMENU

  subparts.Nav1.entryLevel = 0
  subparts.Nav1{
    1 = TMENU
    1{
      NO{ 
	    before.dataWrap = <li class="{field:nav_title}"
	    before.stdWrap.cObject = COA
	    before.stdWrap.cObject.10 = TEXT
	    before.stdWrap.cObject.10.value = style="background-image: url(
	    before.stdWrap.cObject.20 = IMG_RESOURCE
	    before.stdWrap.cObject.20{
			
			#stdWrap.wrap =  style="background-image:url(|)">
			 file { 
				import =  uploads/media/
				import.data = levelmedia:-1, slide
				treatIdAsReference = 1
				import.listNum = 0
                //Bildgrösse festlegen und croppen
				width=4175c
				height=129c
			}
		}
		 before.stdWrap.cObject.30=TEXT
		 before.stdWrap.cObject.30=);">
		
        after.dataWrap = </li>
        ##in link hinein
        ATagBeforeWrap = 1
        stdWrap.dataWrap = <strong>|</strong>{field:subtitle}
        ####in link hinein ende
        ATagTitle.field = abstract // description // title
      } 
    }
  }
```

Vielleicht gibts hier ja eine einfache Lösung.
Wie gesagt: der HTML-Code aus dem ersten Posting soll erzeugt werden:

```html
<li class="[alias oder titel]" 
style="background-image:url([medienbild der jeweilgen seite])">
<a href="[typolink]"><strong>[title]</strong>[subtitle]</a>
</li>
```

Danke.

### [#5](https://www.typo3.net/d/114276-media-bild-gecroppt-als-background-image-typo3-6x/5) · cardshark · 2013-03-26

Habs nun geschafft.

```typoscript
subparts.Nav1=HMENU
  subparts.Nav1.entryLevel = 0
  subparts.Nav1{
    1 = TMENU
    1{
      noBlur =1
      NO{  
      before.dataWrap = <li class="{field:alias}"
    before.cObject=COA
    before.cObject {
    20 = IMG_RESOURCE
    20.file.import = uploads/media/
    20.file.import.field = media
    20.file.import.listNum = 0
    20.stdWrap.noTrimWrap = | style="background-image: url(/hube/timthumb.php?src=../|&w=175&h=129)">|
    20.stdWrap.if.isTrue.field = media
    }  
    after.dataWrap = </li>
        ATagBeforeWrap = 1
        stdWrap.dataWrap = <strong>|</strong>{field:subtitle}
        #ATagTitle.field = abstract // description // title
      }   
    }
  }
```

wie im code zu lesen, verwende ich das php script [timthumb.php](https://code.google.com/p/timthumb/).
Zur Verwendung muss es nur auf den Server kopiert werden. Es erstellt sogar einen eigenen Bildcache. Auf der angegebenen Webiste wird die Funktionsweise auch besten erklärt.
Beste Grüße
Hannes

Ps.: Obwohl alles perfekt funktioniert bin ich für andere Lösungsvorschläge offen ;)

---

Quelle: „Media-Bild gecroppt als background-image Typo3 6.x“, typo3.net, https://www.typo3.net/d/114276-media-bild-gecroppt-als-background-image-typo3-6x
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.