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

  • Averlon Averlon
    Padawan
    0 x
    48 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
  • Julian.Hofmann Julian.Ho...
    Flash Gordon
    0 x
    2836 Beiträge
    105 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

  • Averlon Averlon
    Padawan
    0 x
    48 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. }
    28. enable = 1
    29. typolink.parameter < plugin.tx_cal_controller.view.week.weekViewPid
    30. }
    31. }

    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
    29 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