---
title: "TS Text auf Grafik"
url: "https://www.typo3.net/d/122300-ts-text-auf-grafik"
source: "typo3.net"
tags: ["TYPO3","TypoScript","Bilder","Frage"]
created: "2016-04-10"
last_reply: "2016-04-13"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# TS Text auf Grafik

TYPO3 › TypoScript · 3 Antworten · gestartet 2016-04-10

## Eröffnungsbeitrag

**Averlon** · 2016-04-10 · [Beitrag #1](https://www.typo3.net/d/122300-ts-text-auf-grafik/1)

Hi,
ich würde gerne mittels TS einen Text auf einem Bild darstellen.

Ist sicherlich eine einfache übung.

Ich habe mal probiert:

```typoscript
lib.av_cal_year = COA
lib.av_cal_year {
	10 = IMAGE
	10.file = {$plugin.tx_cal_controller.view.imagePath}/calendar-icon_bg.png
	
	20 = TEXT
	20.value = 2016
	20.stdWrap.dataWrap = <div>|</div>
}
```

Hat aber den text unter der grafik dargestellt, nicht auf der grafik.

Kann mir da bitte jemand helfen.

Danke
Karl-Heinz

## Antworten

### [#2](https://www.typo3.net/d/122300-ts-text-auf-grafik/2) · Julian.​Hofmann · 2016-04-11

Hallo Karl-Heinz.

Willst Du das ganze als **ein** Bild haben? D.h. soll der Text im Bild in die oberste Schicht? => <https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Gifbuilder/Properties.html>
Soll der Text als (HTML-)Text da sein, d.h. nur in der Darstelluhg über das Bild gelegt werden? => CSS Positionierung

Viele Grüße
Julian

### [#3](https://www.typo3.net/d/122300-ts-text-auf-grafik/3) · Averlon · 2016-04-12

Hi Julian,
eigentlich egal. CSS wäre vielleicht sogar angenehmer.

In der zwischenzeit habe ich es mit GIFBUILDER geschafft.

```typoscript
lib.av_cal_week = IMAGE
lib.av_cal_week {
	file = GIFBUILDER
	file {
# hier wird das ganze bild in der ganzen größe gebaut. Das ursprungsbild ist ca. 200x200px
  	XY = [10.w],[10.h]
  	format = png
#  	maxWidth = 35
#  	maxHeight = 35
  	
  	10 = IMAGE
  	10.file = fileadmin/images/av_calendar.png
  	#10.file.width = 30
  	
  	20 = TEXT
  	20.text.data = LLL:EXT:cal/Resources/Private/Language/locallang.xml:l_week
  	20.fontColor = #ff8700
  	20.align = c,c
# hier wird ein text positioniert. Die größe muss ausprobiert werden wie sie in das originalbild passt.
  	20.offset = 0+[10.w]-[20.w]/2,0+[10.h]+[20.h]/2
  	20.fontSize = 72
#  	20.fontFile = typo3/sysext/core/Resources/Private/Font/nimbus.ttf
  	
# jetzt wird das ergebnis auf x-px skaliert (seitengleich)
  	30 = SCALE
  	30.width = 30
	}
	imageLinkWrap = 1
	imageLinkWrap {
		enable = 1
		typolink.parameter < plugin.tx_cal_controller.view.week.weekViewPid
	}
}
```

Aber ein css-beispiel würde mich auch interessieren. Man lernt ja nie aus.

### [#4](https://www.typo3.net/d/122300-ts-text-auf-grafik/4) · seebold · 2016-04-13

Probiere mal sowas:

```typoscript
/* Wrap wird zerschossen, wenn ich als TYPOSCRIPT formatiere :-(  */

lib.av_cal_year = COA
lib.av_cal_year {
	10 = IMAGE
	10.file = {$plugin.tx_cal_controller.view.imagePath}/calendar-icon_bg.png}
        10.wrap = <div style="width:300px; height:250px; background-image:url(|);">
 
	20 = TEXT
	20.value = 2016
	20.stdWrap.dataWrap = |</div>
}
```

Man kann sicher auch height und width dynamisch über file.width resp file.height einfügen.
Hier eine Variante mit Absoluter Positionierung im CSS.

```typoscript
lib.av_cal_year = COA
lib.av_cal_year {
        wrap = <div class="imagecont">|</div>

	10 = IMAGE
	10.file = {$plugin.tx_cal_controller.view.imagePath}/calendar-icon_bg.png}
        10.wrap = <div class="bild">|</div>
 
	20 = TEXT
	20.value = 2016
	20.stdWrap.dataWrap = <div class="text">|</div>
}
```

```css
.imagecont {
  position:relative /*damit position absolute in childen funzt*/
}
.imagecont .text {
  position:absolute;
  bottom: 3px;
  right:3px;
}
```

---

Quelle: „TS Text auf Grafik“, typo3.net, https://www.typo3.net/d/122300-ts-text-auf-grafik
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.