Suche
Teilen
startseite » forum

[Frage] TS Text auf Grafik TYPO3-Version: -

  • Averlon Averlon
    Padawan
    0 x
    49 Beiträge
    0 Hilfreiche Beiträge
    10. 04. 2016, 16:39

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

    Ist sicherlich eine einfache übung.

    Ich habe mal probiert:

    1. lib.av_cal_year = COA
    2. lib.av_cal_year {
    3. 	10 = IMAGE
    4. 	10.file = {$plugin.tx_cal_controller.view.imagePath}/calendar-icon_bg.png
    5.  
    6. 	20 = TEXT
    7. 	20.value = 2016
    8. 	20.stdWrap.dataWrap = <div>|</div>
    9. }

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

    Kann mir da bitte jemand helfen.

    Danke
    Karl-Heinz

    Gruß
    Kallewirsch

    TYPO3: 9.5.0

  • 1
  • 0 x
    3270 Beiträge
    157 Hilfreiche Beiträge
    11. 04. 2016, 08:58

    Hallo Karl-Heinz.

    Willst Du das ganze als [b]ein[/b] Bild haben? D.h. soll der Text im Bild in die oberste Schicht? => https://docs.typo3.org/typo3cms/TyposcriptReference/Gifbuilder/Gifbuilder/Index.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

    Kleiner Hinweis:
    das Forum hier ist leider nicht mehr so frequentiert :-(
    Für schnellere Hilfe und mehr Leser, guck mal
    - auf stackoverflow ( https://stackoverflow.com/questions/tagged/typo3 )
    - oder in die slack-Channels ( https://typo3.org/community/meet/chat-slack )

  • Averlon Averlon
    Padawan
    0 x
    49 Beiträge
    0 Hilfreiche Beiträge
    12. 04. 2016, 07:38

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

    In der zwischenzeit habe ich es mit GIFBUILDER geschafft.

    1. lib.av_cal_week = IMAGE
    2. lib.av_cal_week {
    3. 	file = GIFBUILDER
    4. 	file {
    5. # hier wird das ganze bild in der ganzen größe gebaut. Das ursprungsbild ist ca. 200x200px
    6.   	XY = [10.w],[10.h]
    7.   	format = png
    8. #  	maxWidth = 35
    9. #  	maxHeight = 35
    10.  
    11.   	10 = IMAGE
    12.   	10.file = fileadmin/images/av_calendar.png
    13.   	#10.file.width = 30
    14.  
    15.   	20 = TEXT
    16.   	20.text.data = LLL:EXT:cal/Resources/Private/Language/locallang.xml:l_week
    17.   	20.fontColor = #ff8700
    18.   	20.align = c,c
    19. # hier wird ein text positioniert. Die größe muss ausprobiert werden wie sie in das originalbild passt.
    20.   	20.offset = 0+[10.w]-[20.w]/2,0+[10.h]+[20.h]/2
    21.   	20.fontSize = 72
    22. #  	20.fontFile = typo3/sysext/core/Resources/Private/Font/nimbus.ttf
    23.  
    24. # jetzt wird das ergebnis auf x-px skaliert (seitengleich)
    25.   	30 = SCALE
    26.   	30.width = 30
    27. 	}
    30. 		enable = 1
    31. 		typolink.parameter < plugin.tx_cal_controller.view.week.weekViewPid
    32. 	}
    33. }

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

    Gruß
    Kallewirsch

    TYPO3: 9.5.0

  • seebold seebold
    T3PO
    0 x
    32 Beiträge
    1 Hilfreiche Beiträge
    13. 04. 2016, 21:56

    Probiere mal sowas:

    [code]/* 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>
    }

    [/code]

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

    1. lib.av_cal_year = COA
    2. lib.av_cal_year {
    3.         wrap = <div class="imagecont">|</div>
    4.  
    5. 	10 = IMAGE
    6. 	10.file = {$plugin.tx_cal_controller.view.imagePath}/calendar-icon_bg.png}
    7.         10.wrap = <div class="bild">|</div>
    8.  
    9. 	20 = TEXT
    10. 	20.value = 2016
    11. 	20.stdWrap.dataWrap = <div class="text">|</div>
    12. }

    1. .imagecont {
    2.   position:relative /*damit position absolute in childen funzt*/
    3. }
    4. .imagecont .text {
    5.   position:absolute;
    6.   bottom: 3px;
    7.   right:3px;
    8. }

  • 1
Präsentiert von