Zum Inhalt springen

Bild als CSS background-image

Erstellt am 8. Dezember 2014 · 3 Antworten · letzte Antwort am 8. Dezember 2014

Tags: Fluid, TYPO3 6.x, Frage

joni ·

Hallo Zusammen
Ich bin beim Layouten der News-Ansichten auf ein Problem gestossen:
Wie setze ich ein Bild (Fal-Media) in meinem Template als CSS background-image?
Das Bild as <img> geht problemlos. Auch mit {mediaElement.originalResource.publicUrl} bekomme ich es in ein div als Hintergrundbild. Doch ich möchte ja nicht den Pfad des Originals, sondern ein "_processed_" Bild, wo ich die Dimensionen angeben kann.

Ich weiss, dass ist mehr ein Fluid-Problem, aber vielleicht hat das ja jem. mit der News-Ext auch schon versucht?

Ich verwende die news (3.0.1).

Vielen Dank für eure Hilfe.

toifel ·

Du kannst dir das komplette {mediaElement} in der Debug-Ansicht ausgeben lassen - so solltest du zumindest das gesuchte Objekt finden... falls es so vorhanden ist, wie du es brauchst:

<f:debug>{mediaElement}</f:debug>
joni ·

Vielen Dank für deine Antwort. Das habe ich auch schon gemacht. Und so bin ich auf {mediaElement.originalResource.publicUrl} gekommen. Aber so wie ich das verstehe, gelange ich so nur an die Originalquelle. Und ich möchte den Pfad des Bildes ausgeben, dass ich vorher noch skaliert/gecropt habe.
Man kann ja ein Bild in Fluid als inline Notation schreiben: {f:image(src:'{mediaElement.uid}', alt:'Text', width:'200px')}, aber so gelange ich auch nur ans Bild und nicht an den Pfad.

Ich habe mir überlegt, das Bild zuerst per Typoscript zu skalieren/croppen und danach mit dem cObject-Viewhelper ({post.viewCount -> f:cObject(typoscriptObjectPath: 'lib.myCounter')}) wieder ins Template zu speisen.
Doch weiss ich nicht genau, wie ich per TS an die Bilder der Newseinträge komme.

Oder was wäre der beste Weg, ein Newsbild als background-image ausgeben zu können?

joni · · Beste Antwort

Nun hats geklappt. Habe einen neuen Viewhelper kennen gelernt: f:uri.image
So sieht das ganze dann aus:
{f:uri.image(src:mediaElement.uid, treatIdAsReference:1, width:200px)}