Zum Inhalt springen

Text auf Grafik rendern

Erstellt am 4. September 2007 · 9 Antworten · letzte Antwort am 29. August 2008

Tags: Frage

cooper ·

Hallo,

ich komm mal wieder nicht voran... Eine Headergrafik soll vom Redakteur im Backend gepflegt werden können. Das hab ich gelöst in dem einfach im Seitentyp "Erweitert" eine Grafik hochgeladen wird und im TypoScript mittels

page.10.marks {
	IMG = COA
	IMG {
	        5 = HTML
	        5.value = style="background:url(      	        
	        10 = IMG_RESOURCE
	        10 {
	                file.maxH = 126
	                file.maxW = 918
	                file.import = uploads/media/     
	                file.import.data = levelmedia: -1,slide
	                file.import.listNum = 0
	                file.import.override.field = media
	        }
	        15 = HTML
	        15.value = ) no-repeat;"
	}
}

ins HTML eingebettet. Nun hätte ich gerne, das auf die Grafik noch der Seitentitel als Text gerendert wird. Irgendwie find ich nicht die Stelle wo ich dazwischen haken muss, damit sich was tut. Hat wer nen Ansatz für mich?

InforMedic ·

Hi,

also mit folgendem Code habe ich mir den Seitentitel als Gif erstellen lassen und im Header anzeigen lassen. Die Angabe XY ist für dich vielleicht von Interesse. Probier doch einfach mal damit rum und schau dir auch das TSREF.pdf unter typo3.org/documentation an =)

file = GIFBUILDER
file {
	XY = 100,15
	backColor = #dcdcdc
	10 = TEXT
	10.text.field = subtitle // title
	10.fontSize = 12
	10.fontFile = fileadmin/fonts/arialbi.ttf
	10.fontColor = #3D7A7A
	10.offset = 15, 15
}

Gruß
Info

cooper ·

Hi,

der von dir beschriebene Weg ist mir bekannt. Nur bekomme ich diese Möglichkeit mit meiner oben erwähnten nicht kombiniert.

Anforderung ist ja, das der Redakteur das Bild im BE hochladen kann und Typo dann den Seitentitel auf das Bild rendert. Das Resultat wird per CSS in den Header eingebunden.

Ich frickel hier mal weiter 😉

InforMedic ·

hmmm, achso.. so das quasi für jedes hochzuladene bild ein copyright entsteht...

glaub da kommst du vielleicht mit gd-lib oder image-bzw. graphicsmagick functions weiter... Hab aber selber noch nie mit Grafikbibliotheken rumgespielt von dem her muss ich passen.. #paralyzed#

cooper ·

Ja genau, im Prinzip ist das so gemeint. Nur das anstatt des Copyright Hinweises der Seitentitel ausgeben werden soll.

greenbanana ·

Versuchs mal so:

///////////////////////////////////////////////////
// headergrafik
///////////////////////////////////////////////////
temp.header_content = IMAGE
temp.header_content {
 	alttext.cObject = TEXT
  	alttext.cObject.value = {page:title}
  	alttext.cObject.insertData = 1
 	file = GIFBUILDER
 	file {
 		XY = [10.w],[10.h]
 		format = jpg
 		quality = 100
 		
 		# HEADER-Grafik-1
 		################################
 		
 		10 = IMAGE
 		10 {
			file = fileadmin/templates/images/main/header/header_home.jpg
			file.import = uploads/media/
			file.import.data = levelmedia: 3, slide
			file.import.listNum = 0
			file.import.override.field = media
			}
 
 		# HEADER-Grafik-2
 		################################
 		
 		20 = IMAGE
 		20.offset = 36,112
 		20 {
			file = fileadmin/templates/images/main/header/header_home.jpg
			file.import = uploads/media/
			file.import.data = levelmedia: 3, slide
			file.import.listNum = 1
			file.import.override.field = media
			}
 		# HEADER-Grafik-3
 		################################
 		
 		20 = IMAGE
 		20.offset = 36,112
 		20 {
			file = fileadmin/templates/images/main/header/header_home.jpg
			file.import = uploads/media/
			file.import.data = levelmedia: 3, slide
			file.import.listNum = 2
			file.import.override.field = media
			}
 		
 		# LOGO auf Home
 		################################
 		
 		30 = TEXT
		30.insertData = 1
                30 {
                  text = {page:title}
                  fontColor = #751741
                  fontFile  =  fileadmin/template/fpm/fonts/Unibody_8-Regular.otf
                  fontSize  = 8
                  antiAlias = 0
                  offset    = 30, 15
                }
 	}
 }
    

page.10.marks.IMG < temp.header_content

Damit hast du auch di möglichkeit noch mehrer Bilder übereinander zu legen... fals du noch ein Logo auf das Headerbild integrieren möchtest... oder was auch immer... ;-)

dorndev ·

Hier mal eine ganz einfache Lösung ganz ohne Gifbuilder.

Das kommt ins Typoscript:

tt_content.image.20.rendering.div.caption.wrap = <span id="copyright">|</span>

Und jenes fürs CSS:

#copyright {background-color:grey;color:white;position:relative;top:-20px;float:right;			filter:alpha(opacity=50);opacity: 0.5;-moz-opacity:0.5}

Ergibt: Für Suchmaschinen zugänglichen Text auf dem Bild. z-index ist aufgrund der Render-Reihenfolge der Image Attribute nicht notwendig (Es sei denn das Bild hat schon einen z-index).

Ein Beispiel könnt Ihr euch hier anschauen: http://www.delmes.de.

Falls Ihr doch mit dem Gifbuilder arbeiten wollt: tt_content.image.20.rendering.div.caption ist was Ihr braucht.

greenbanana ·

Dein Ansatz würde ich aber nicht für ein Copyright-Hinweis verwenden. Schliesslich will man ja dass das Copyright auch bei der Google-Bildersuche erscheint.

Für Text aber sicher eine sehr gute Alternative!