Template Image bearbeiten

Hallo zusammen,

ich möchte erreichen, das meine Redakteure in den Seiteneigenschaften das Headerbild ändern können. Das habe ich insoweit hinbekommen, alsdass ich TV folgenden Code gegeben habe:

lib.ws_bbimage = IMAGE
lib.ws_bbimage.file.import {
   cObject = TEXT
   cObject.value = fileadmin/bilder/bb/bb_default.jpg
   cObject.override {
      required = 1
      data = levelmedia: 3, slide
      wrap = uploads/media/|
      listNum = 0
   }
}

Was bewirkt, das es ein default-Bild gibt, welches über die Seiteneigenschaften-Media überschrieben werden kann.
Jetzt brauch ich aber für die bessere Optik ein paar Modifikationen am Bild, d.h. ich muss es auf eine feste Breite
zuschneiden, auf eine festes Hintergrundbild legen und eine festes Logobild drüber legen.
Ich hab weiss nicht ob das einfacher in der DS oder im TS geht, daher hab ich einfach erstmal hier rein geschrieben.
Hat jemand sowas schon mal gemacht oder eine Idee ?
Genial wäre natürlich eine komplett eigenständige Extension dafür 😉

Gruss,
Thomas

hi stickybit

Warum in den Seiteneigenschaften?
Ich lasse meine Redakteure das Bild via FCE einpflegen. Diesem kann ich ein Image fixed geben.
Das Hintergrundbild könntest du via Css generieren lassen.

Oder hab ich dich falsch verstanden?

Grüsse demeter

hallo demeter,

Danke für deine Antwort. Jein, also ein einfaches Bild ist kein Thema. Dann ginge es nur darum, das es für die meistens Unterseiten ja kein Bild gibt und das default-Bild genommen wird. Dann wäre ein extra Feld als Seiteninhalt schon fast wieder verwirrend.
Das eigentliche Problem ist, das ich praktisch 3 Bilder habe. Hintergrundbild mit Rahmen (ist etwas größer), das Upload-Bild (muss darin zentriert werden) und ein Logo (ist kleiner, hat eine feste Position und alpha-Transparent) . Diese müssen kombiniert (overlay) werden. CSS wäre denkbar, aber meine Versuche die überlagernden Bilder vernünftig aussehen zu lassen sind gescheitetert. GIF ist extrem pixelig und hat keinen alpha-Wert und PNG scheitert an Microsofts Intoleranz.

In PHP sähe meine Lösung so aus:

$imgLayer1 = imagecreatefrompng('hintergrund.png']);
$imgLayer2 = imagecreatefromjpeg('redakteur_upload.jpg']);
$imgLayer3 = imagecreatefrompng('logo.png');
$imgHeader = imagecreatetruecolor(imagesx($imgLayer1,imagesy($imgLayer1));
imagecopy($imgHeader, $imgLayer1, 00, 0, 0, 0, 820, 145);
imagecopy($imgHeader, $imgLayer2, 20, 0, 0, 0, 780, 145);
imagecopy($imgHeader, $imgLayer3, 40,40, 0, 0, 70, 70);
imagejpeg($imgHeader, 'header.jpg', 100);

Somit kann ich png-Alpha nutzen und erzeuge ein 100% kompatibles header.jpg.

T3 ist so flexibel, da muss es doch eine Lösung geben 😉 Ich werde weiter forschen, und wenn ich meine erste eigene Extension schreiben muss 🙂

So, es ist geschafft 😉

Für alle die es interessiert:

TS:

lib.myHeader = IMG_RESOURCE
lib.myHeader.file = GIFBUILDER
lib.myHeader.format = jpg
lib.myHeader.stdWrap.wrap = background-image:url(|);
lib.myHeader.file {
   XY           = 860,145
   backColor    = #000000
   10           = IMAGE
   10.file.import {
     cObject = TEXT
     cObject.value = fileadmin/default.jpg
     cObject.override {
       required = 1
       data = levelmedia: 3, slide
       wrap = uploads/media/|
       listNum = 0
     }
   }
   10.width     = 840
   10.height    = 145
   10.offset    = 20,0
   20           = IMAGE
   20.file      = fileadmin/header.png
   20.width     = 860
   20.height    = 145
   30           = IMAGE
   30.file      = fileadmin/logo.png
   30.offset    = 40,5
   30.width     = 350
   30.height    = 90
}

Template:

<div class="header" style="background-image:url(default.jpg)">

DS:

<field_header type="array">
	<type>attr</type>
	<tx_templavoila type="array">
		<title>Headerimage</title>
			<sample_data type="array">
				<numindex index="0"></numindex>
			</sample_data>
			<etype>TypoScriptObject</etype>
			<etype_extra type="array">
				<objpath>lib.myHeader</objpath>
			</etype_extra>
			<typoscriptobjpath>lib.myHeader</typoscriptobjpath>
	</tx_templavoila>
	<tceforms type="array">
		<label>Headerimage</label>
	</tceforms>
</field_header>

Am Ende wieder einfacher als ich dachte... 8-)
Viel Spass damit