• Forum
• TYPO3 CMS: TypoScript
• Anfängerfragen
• TS Text auf Grafik

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

• Averlon
  Padawan

  0 x

  49	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  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:

  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

  Gruß
  Kallewirsch

  TYPO3: 9.5.0

• 1

• Julian.Ho...
  Neo

  0 x

  3216	Beiträge
  151	Hilfreiche Beiträge

  • Facebook
  • Twitter

  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
  Padawan

  0 x

  49	Beiträge
  0	Hilfreiche Beiträge

  • Facebook
  • Twitter

  12. 04. 2016, 07:38

  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.

  Gruß
  Kallewirsch

  TYPO3: 9.5.0

• seebold
  T3PO

  0 x

  32	Beiträge
  1	Hilfreiche Beiträge

  • Facebook
  • Twitter

  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.
  

  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;
  }

• 1

• Zurück