Wasserzeichen mit dem File Abstraction Layer (FAL) – DCE, FILES und GIFBUILDER

Viele von euch kennen Sicherlich den GIF-Builder, der es dem Programmierer ermöglicht ein TEXT oder IMAGE Overlay über ein Bild zu legen. Ein bisschen problematisch, aber durchaus praktisch, ist die Kombination zwischen FILES Object und dem GIFBUILDER. Mit dieser Kombination können wir bspw. mit der TYPO3-Extension DCE (Dynamic Content Elements) ein Wasserzeichen über Bilder legen.

Zuerst legen wir in unserem TYPO3-System in einer .ts Datei ein neues typoscriptObject an. In unserem Fall nennen wir es lib.watermark

Folgender Code ist für unsere Zwecke notwendig:

##WASSERZEICHEN GENERATOR IN COMBINATION MIT DCE##

lib.watermark = COA
lib.watermark {

	#Das Basis Bild(FAL)
	#Vorsicht!!! Das FILES Object wird vor TYPO3 6.0 nicht unterstüzt
	10 = FILES 
	10 {
		
        #An dieser Stelle wird die Query gebildet
        #Wir suchen den Datensatz "image" in der Tabelle "tt_content" 
        #wo die uid des Datensatzes
        #der uid unseres Contentelements ("co") entspricht.
                
        references {
			table = tt_content
			uid.field = co
			fieldName = image
	    }

        # das Renderobject erstellt aus dem Datensatz 
        # die Informationen ein Objekt
			
	    renderObj = COA
	    renderObj {
		# Im renderObj des FILES-Objects befinden sich in file:current
        # die Metainformation des FAL welche wir nutzen wollen um das Wasserzeichenbild
        # zu erstellen. Jedoch gehen diese Informationen im GIFBUILDER im renderObj
        # verloren und können dort nicht angesprochen werden. Darum legen 
        # wir die uid als temporäre Varibale im Register an.	
		10 = LOAD_REGISTER
		10 {
		   param = TEXT
		   param.data = file:current:uid
		}
		
		#Ein Image wird angelegt
		20 = IMAGE
		20 {
				#Die Quelle des Bildes wird die Datei sein die uns der
				#GIFBUILDER generiert
				file = GIFBUILDER
				file {
                                  
                # Format und Größe definieren
				XY = 200,200
				format = png
			
					#Das erste Element des GIFBUILDERS ist das Bild, welches wir
					#im FAL generiert haben und dessen uid wir in das Register geladen haben
					10 = IMAGE
					10 {
						file {
							#Die Uid wird aus dem Register als 
							#Quelle des Bildes angegeben
							import.data = register:param
							treatIdAsReference = 1
						}
					}	
					
					#Das zweite Element ist in diesem Fall ein Textoverlay
					#Der Wert wird der value aus dem 
					#Zukünftigen DCE Feld "copyright" welches im Fluid
					#an dieses Typoscript-Object übergeben werden soll.
				
					20 = TEXT
					20 {
						text.data = field:copyright
						fontSize = 15
						fontColor= #FFFFFF
						offset = 5,195
					}						
		        }
		    }
		}	
    }			
}

Jetzt legen wir ein neues DCE an.

Dafür definieren im Reiter „Allgemein“ zunächst ein Feld für den File Abstraction Layer vom Typ „inline“ – so wie man es auch tt_content Element wie Text mit Bild kennt. In unserem Fall werden hier natürlich Bilder hochgeladen bzw. aus der Dateiliste ausgewählt. Wir haben hierbei die Tabelle sowie das TCA von sys_file_reference um ein Feld „copyright“ erweitert, sodass jedem Bild ein Input Feld für das Copyright hinzugefügt wird, welches später als Wasserzeichen über das Bild gelegt werden soll.

Alternativ dazu könnte man im DCE auch ein zusätzliches Feld fürs Copyright bzw. Wasserzeichen hinzufügen, allerdings würde dies nur ein Bild abdecken und nicht beliebig viele, da man Texte und Bilder nicht mehr zuordnen kann.

Als nächstes legen wir unter dem Reiter Vorlage das Ausgabetemplate für das Frontend an und fügen folgenden Code ein:

{namespace dce=Tx_Dce_ViewHelpers}

<f:layout name="Default" />

<f:section name="main">
	<div class="teaser_container">	
		<f:for each="{dce:fal(field:'image', contentObject:contentObject)}" as="fileReference">
			<img src="<f:cObject typoscriptObjectPath="lib.watermark" data="{uid:fileReference.uid, copyright:fileReference.referenceProperties.copyright ,co:contentObject.uid }"" />
		</f:for>
	</div>
</f:section>

Wie man sieht wird jedes Bild aus dem FAL Feld nachereinander durchlaufen und die Informationen an das zuvor erstelle Typoscript Objekt lib.watermark übergeben. Dort wird das Bild nun mit dem GIFBUILDER erstellt und das Feld copyright als Wasserzeichen über das Bild gelegt. Zurückgegeben wird die URL zum Bild, welche wir einfach in ein <img>-Tag einfügen können.

Das Typoscript-Objekt erwartet die folgenden Parameter:

„fileReference.uid“ -> Die uid der fileReference ,

„contentObject.uid“ -> Die uid des Contentobjects in dem der FAL enthalten ist ,

„fileReference.referenceProperties.copyright“ -> Das Feld für das Wasserzeichen aus der File Reference

Und fertig ist das Wasserzeichenbild!

4 Kommentare

  • How would you implement this for all media content elements in TYPO3 without DCE?

  • Hello,

    I already tried to realize this with css_styled_content and failed. The tt_content typoscript is very complex but I’m looking forward to try an implementation with TYPO3 7.6s fluid_styled_content when I have some time.

  • I’ve been asking on the #typo3-cms channel on Slack about how to do this as well and I’ve got some hints but the TS is a bit over my head until I get at least one working example that I can play with and modify. Please post back here if you find a fluid_styled_content TYPO3 7.6 solution for watermarking tt_content and news (not tt_news) articles.

  • Hi,

    kannst mir noch sagen wie ich das DCE Element genau anlegen muss? funktioniert bei mir igendwie nicht ganz.

    Vielen Dank!

    Lukas

Schreibe einen Kommentar zu Charles Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.