Hi,
ich würde gerne mittels TS einen Text auf einem Bild darstellen.
Ist sicherlich eine einfache übung.
Ich habe mal probiert:
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
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
Hi Julian,
eigentlich egal. CSS wäre vielleicht sogar angenehmer.
In der zwischenzeit habe ich es mit GIFBUILDER geschafft.
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.
Probiere mal sowas:
/* 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.
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>
}
.imagecont {
position:relative /*damit position absolute in childen funzt*/
}
.imagecont .text {
position:absolute;
bottom: 3px;
right:3px;
}