Zum einen ist Anfang des Jahres Netbeans 7.1 erschienen, welches in der PHP-Version Verbesserungen für die Entwicklung mit sich bringt und aktuelle Standards wie CSS3 und HTML5 unterstützt: Screencast

Zum anderen hat Daniel Franek seit Ende des letzten Jahres ein Netbeans-Plugin zur Verfügung gestellt mit dem Netbeans auch TypoScript versteht.
Unterstützt werden in der aktuellen Version Syntax-Highleighting, Autocomplete, Code- und Datei-Templates. Mit von der Partie sind sind die Macher von „SweeTS“ – die Agentur familie redlich :systeme. Aktueller Stand auf GitHub.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Hier möchte ich euch gerne mit den häufigst gebrauchten Snippets Abhilfe verschaffen.

Das wichtigste zuerst: sämtliche Konfigurationen der Dateiliste sind per TypoScript im Setup-Teil des Templates vorzunehmen und finden im tt_content.uploads.20 Bereich statt. Dank des mittlerweile standardmäßig vorhandenen TypoScript Editor im Backend sind zwar schon viele Einstellungen per “Suggest Drop-Down” zu erahnen, aber halt doch nicht immer so durchsichtig.

Sinnvolle Dateigrößen-Bezeichnungen einpflegen:

tt_content.uploads.20.itemRendering.30.bytes.labels = Byte | KB | MB | GB

Dateiendung (*.pdf, *.doc, etc.) verstecken:

tt_content.uploads.20.stripFileExtensionFromLinkText = 1

Thumbnail-Generierung beeinflussen:

tt_content.uploads.20.linkProc.iconCObject.file.maxH = 100 #maximale Höhe der Thumbnails
tt_content.uploads.20.linkProc.iconCObject.file.maxW = 100 # maximale Breite der Thumbnails
# etc.

Bestimmen welches Frame eines GIFs bzw. welche Seite eines PDFs angezeigt werden soll:

tt_content.uploads.20.linkProc.iconCObject.file.maxH = 100 #maximale Höhe der Thumbnails
tt_content.uploads.20.linkProc.iconCObject.file.frame = 2 # zweite Seite eines PDFs als Thumbnail generieren

Viel Spaß beim Experimentieren!

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Immer mehr und mehr internetfähige Endgeräte gelangen auf dem Markt und werden mehr und mehr auch zum Surfen im Internet genutzt. Aktuell werden täglich 700.000 Smartphones mit Android aktiviert wie Andy Rubin gestern auf Twitter verkündete. Und auch Peter-Paul Koch schrieb in seinem Blogbeitrag “IE market share”, dass jetzt schon weltweit mehr Websites über mobile Endgeräte angesurft werden, als über IE6 und IE7 zusammen.

Aber Responsive Webdesign ist nicht einfach nur das Anpassen der Styles für mobile Endgeräte, Responsive Webdesign ist eher eine Konzept, eine Herangehensweise an die Gestaltung für den Nutzer – dem Nutzer in jeder Situation das beste Erlebnis mit der Website geben. Auf die Grundlagen zu Responsive Webdesign möchte ich an dieser Stelle auch nicht weiter eingehen, das haben andere Kollegen bereits gut zusammengefasst.

Zugrunde liegt eine Technik die mit CSS3 in modernen Browser implementiert ist, die @media Query-Regeln. Die @media-Regeln sind ja bereits mit CSS2 eingeführt worden und wurden bisher zum Unterscheiden von Ausgabegeräten benutzt, z.B. <link rel="stylesheet" href="css/screen.css" media="screen"> für Bildschirme und z.B. <link rel="stylesheet" href="css/print.css" media="print"> für die Druckausgabe. In CSS3 können nun mit @media-Queries die Endgerät-Eigenschaften abgefragt werden, z.B. Bildschirmgröße oder Auflösung. Auch hier möchte ich nicht zu sehr ins Detail gehen, das hat Michael Jendrischyk in seinen Slides zu Media Queries bereits excellent gemacht. Aktuell nutze ich folgende @media Query-Regeln für meine Projekte:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
 
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
 
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
 
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
 
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
 
/* highres devices */
@media screen and (-moz-min-device-pixel-ratio:1.5),
	screen and (-o-min-device-pixel-ratio:3/2),
	screen and (-webkit-min-device-pixel-ratio:1.5),
	screen and (min-device-pixel-ratio:1.5){}

Responsive TYPO3

Um Responsive Layouts (Flexible Layouts) nun in TYPO3 zu verwenden bedarf es einigen Anpassungen an der Ausgabe von CSS-Styled-Content. Für die kommende TYPO3 Version 4.7 wurden ja bereits umfängliche Änderungen an der Frontend-Ausgabe angekündigt, die zudem der Barrierefreiheit dienen. Hier wurden auch die “Problemfälle” eliminiert, die mit der Ausgabe von Bildern im Responsive Layout zu meistern sind. So müssen u.A. die festen Breiten, die über das style-Attribut in den Wrappern eingebunden sind entfernt werden. Das Layout sollte optimalerweise flexibel angelegt sein, also keine Pixelwerte. Folgende Typoscript-Snippets müssen ins Typoscript-Setup Template eingetragen werden:

tt_content.image.20 {
  imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap"> | </div>
  imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn"> | </div>
}

Auch beim Rendering selbst muss das style-Attribut entfernt werden.

tt_content.image.20 {
  rendering {
    dl {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" > | </dl>
    }
    ul {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"><ul> | </ul></div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"><ul> | </ul></div>
      oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###"> | </li>
    }
    div {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###"> | </div>
    }
    simple {
      imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap csc-textpic-single-image"> | </div>
    }
  }
}

Optional kann man auf das HTML5 Markup für Bilder mit Bildunterschrift umstellen.

tt_content.image.20 {
  renderMethod = figure
  rendering {
    figure {
      imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
      imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
      noRowsStdWrap.wrap = 
      oneImageStdWrap.dataWrap = <figure class="csc-textpic-image"> | </figure>
      imgTagStdWrap.wrap =   |  
      editIconsStdWrap.wrap = <div> | </div>
      caption.wrap = <figcaption> | </figcaption>
      caption.required = 1
    }
  }
}

Das wichtigste ist allerdings, dass zusätzlich Anpassungen am CSS getätigt werden. Für flexible Bilder muss folgende Regel zugewiesen werden:

img, embed, object, video {
  max-width: 100%;
  height: auto;
  width: auto;
}

Die Anweisung legt fest, dass Bilder (sowie embed-, object, und video-Tags) eine max. Breite von 100% haben, also so groß wie die CSC-Konstante styles.content.imgtext.maxW her gibt. Zudem müssen die Höhe und Breite auf auto gesetzt werden.
Desweiteren müssen einige CSS-Styles von css_styled_content mit dem eigenen Stylesheet überschrieben werden:

DIV.csc-textpic-above DIV.csc-textpic-imagewrap,
DIV.csc-textpic-below DIV.csc-textpic-imagewrap,
DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI,
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
	float: none;
}

Cross-Browser-Kompatibilität

Da es sich um eine Technik für die modernen Webentwicklung handelt, wird es nicht verwundern, dass @media-Queries nicht im IE8 oder IE7 funktionieren. Meiner Meinung nach, ist es zudem fraglich, ob sie das sollten. Wer diese Browser trotzdem mit @media Queries unterstützen muss, dem hilft respond.js. Die Library ist mittlerweile auch in modernizr integriert.

Links

CSS3 & Responsive Web – mein Vortrag beim MMT28 (Slides & Video)
mediaqueri.es – tolle @media Queries Galerie
Responsive Webdesign Testing

Die aufgeführten Änderungen für die Frontend-Ausgabe mit CSS Styled Content sind nur ein paar Grundlagen und hat keine Anspruch auf Vollständigkeit. Wenn ihr Ergänzungen habt, schreibt gern eure Meinung in den Kommentaren dazu.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

1. Backend-Layout anlegen

Als erstes im System-Ordner, den man bei “Allgemeine Datensatzsammlung” der Root-Seite angegeben hat, einen neuen Datensatz vom Typ “Backend-Layout” anlegen. Man vergibt einen Titel (z. B. Startseite oder Unterseite) und  öffnet über “Konfiguration” den sog. “Grid wizard”. Dort lässt sich dann ein Backend-Layout zusammen klicken, das in meinem Fall auch die Ausgabe im Frontend widerspiegelt.

Die einzelnen Bereiche lassen sich noch benennen und mit Spaltennummern (colPos) versehen.

2. Backend-Layout auswählen

Nach dem Speichern, kann dieses Backend-Layout bereits in den Seiteneigenschaften einer Seite ausgewählt werden. Dazu einfach den Reiter “Erscheinungsbild” anklicken.

Man kann das Backend-Layout für die aktuelle Seite und für deren Unterseiten einstellen. Nach der Auswahl zeigt das Backend direkt die vorher getroffene Konfiguration an – und zwar in korrekter Spalten- und Zeilen-Aufteilung.

Somit wäre das Backend schon mal fertig konfiguriert. Bei Bedarf kann man sich natürlich noch weitere Backend-Layouts bzw. Seiten-Templates anlegen.

3. Die Verknüpfung mit dem Frontend

Um die angelegten Backend-Layouts mit der Ausgabe zu verknüpfen, benötigt man nur folgendes Typoscript Setup:

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
	file.stdWrap.cObject = CASE
	file.stdWrap.cObject {
		# slide the template
		key.data = levelfield:-1, backend_layout_next_level, slide
		key.override.field = backend_layout
		# default template file
		default = TEXT
		default.value = fileadmin/templates/index.html
		# template file for backend-layout with ID 2
		2 = TEXT
		2.value = fileadmin/templates/subpage.html
	}
}

Im obigen Beispiel wird abhängig vom gewählten Backend-Layout, eine entsprechendes Template-Datei verwendet. Ich habe ein Standard-Template (default) angegeben und ein Template für das Backend-Layout mit der ID 2. Bei weiteren vorhanden Backend-Layouts, kann diese Liste natürlich erweitert werden. Dazu nur die korrekte ID benutzen.

4. Inhalte für die Ausgabe im Template bereitstellen

Wer von Templavoila kommt, dürfte z. B. die Navigation immer per “TypoScript Object Path” eingebunden haben. Die gute Nachricht: diese können beibehalten und direkt im Template aufgerufen werden. Aber wie kommt man an die Inhaltsbereiche? Mit Templavoila wurden diese als “Content Elements” gemapped. Jetzt benötigt man hier ein wenig Typoscript. (Ich gehe davon aus, dass CSS Styled Content benutzt wird.)

lib.field_content < styles.content.get
lib.field_content.select.where = colPos = 2

Hier auf die korrekte Angabe der colPos achten. Je nach Anzahl der Inhaltsbereiche, muss diese Anweisung natürlich “vervielfältigt” werden.

5. Die Template-Datei

Die Template-Datei, die im “fileadmin” liegt, beinhaltet dann vom Prinzip nur noch den Inhalt des <body> Bereichs. Den Rest baut TYPO3 ja automatisch drum herum. Das HTML-Template könnte dann z. B. so aussehen:

<div id=”header”>
<f:cObject typoscriptObjectPath=”lib.field_navmain” />
</div>
<div id=”content”>
<f:cObject typoscriptObjectPath=”lib.field_content” />
</div>

In diesem Beispiel benutze ich nur den <f:cObject> View-Helper von Fluid, um direkt auf die im Typoscript angelegten Content-Objekte zuzugreifen. Fluid aber auch Fluidtemplate bieten natürlich noch viele weitere Möglichkeiten, mit denen man sein Template anreichern kann.

Und hier sind wir schon am Ende. Mehr ist nicht nötig.

Fazit

Im Vergleich zu Templavoila bin ich mit dieser Template-Methode um einiges schneller, da das aufwändige Mapping wegfällt. Und das Anlegen der extra Backend-Layouts für Templavoila-Templates spart man sich dadurch auch.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Im folgenden Tutorial werden wir kaum Angaben im Plugin vom Formhandler machen. Alles was wir benötigen sind 4 Dateien und eine Zeile TypoScript. Vor- und zugleich Nachteil von Formhandler ist, dass jegliche Konfiguration in Dateien ausgelagert werden muss/sollte, was dann aber wiederum den Vorteil hat, dass diese Konfiguration sehr schnell auf ein anderes System portieren kann. Nach der Einbindung der TypoScriptzeile erscheint im Plugin ein neuer Eintrag in der Selectbox für “Vordefinierte Formulare”. Einfach auswählen. Fertig.

Ich werde hier nicht auf jede einzelne Option von Formhandler eingehen, das würde den Rahmen sprengen. Wenn es Euch interessiert, dann könnt Ihr die Webseite von Formhandler oder auch mein erstes Tutorial lesen, dass ich auf meiner Webseite präsentiere: Stefans TYPO3-Seite.

Ablauf der Anmeldung

Wir erstellen eine Seite mit einem Formular auf dem sich die beiden Felder name und email befinden. Nach dem Absenden werden die eingetragenen Daten zunächst validiert (Tx_Formhandler_Validator_Default) und bei Erfolg in die Tabelle tt_address abgespeichert (Finisher_DB). Hier setze ich die Spalte hidden per default auf 1, damit der User nicht sofort aktiv ist. Natürlich wäre auch eine Speicherung in fe_users möglich, aber dann müssten wir dem Datensatz noch eine Gruppe, einen Benutzernamen und ein Passwort zuordnen. Zu viel für meinen Geschmack. Nach der Speicherung wird aus den gesammelten Daten ein AuthCode erstellt (Finisher_GenerateAuthCode) und per Mail an der User und als Info auch an den Admin geschickt (Tx_Formhandler_Finisher_Mail). Klickt der User den Link mit dem enthaltenen AuthCode an, wird der PreProcessor aktiv (PreProcessor_LoadGetPost) und läd sich die benötigten Daten aus der URL in den Speicher. An Hand dieser Daten kann der AuthCode-Validator aktiv werden (PreProcessor_ValidateAuthCode). Dieser überprüft, ob der AuthCode gültig ist und setzt den Datensatz bei einer erfolgreichen Überprüfung automatisch auf visible (hidden=0). Außerdem können hier je nach Gültigkeit Page-UIDs angegeben werden auf die weitergeleitet wird.

newsletter.ts

plugin.Tx_Formhandler.settings.predef.newsletter {
	# Common configuration
	name = Newsletterregistrierung
	addErrorAnchors = 1
	templateFile = fileadmin/templates/formhandler/newsletter.html
	langFile.1 = fileadmin/templates/formhandler/newsletter.xml
	cssFile.1 = fileadmin/templates/formhandler/newsletter.css
	formValuesPrefix = formhandler
 
	requiredSign = TEXT
	requiredSign.value = *
	requiredSign.wrap = <span style="color: #DF9707;">|</span>
 
	isErrorMarker.default = class="errorField"
 
	# HTML wrapping by validation error
	errorListTemplate {
		totalWrap = <div class="error"><ul>|</ul></div>
		singleWrap = <li>|</li>
	}
 
	#PreProcessors
	preProcessors {
		1.class = PreProcessor_LoadGetPost
		2.class = PreProcessor_ValidateAuthCode
		2.config {
			redirectPage = 234
			errorRedirectPage = 235
			hiddenField = hidden
		}
	}
 
	# Validators configuration
	validators {
		1 {
			class = Tx_Formhandler_Validator_Default
			config {
				fieldConf {
					name {
						errorCheck.1 = required
					}
					email {
						errorCheck.1 = required
						errorCheck.2 = email
					}
				}
			}
		}
	}
 
	# Finishers configuration
	finishers {
		1.class = Finisher_DB
		1.config {
			table = tt_address
			key = uid
			fields {
				email.mapping = email
				name.mapping = name
				pid.ifIsEmpty = 57
				hidden.ifIsEmpty = 1
				module_sys_dmail_html.ifIsEmpty = 1
			}
		}
		2.class = Finisher_GenerateAuthCode
		2.config {
			table = tt_address
		}
		3.class = Tx_Formhandler_Finisher_Mail
		3.config {
			limitMailsToUser = 5
			admin {
				to_email = AdminEmailAdresse
				to_name = DeinNamw
				subject = Neue Newsletterregistrierung auf [webseite]
				sender_email = webmaster@xxx
				sender_name = Webmaster
				htmlEmailAsAttachment = 0
			}
			user {
				to_email = email
				to_name = name
				subject = Dein Anliegen von [webseite]
				sender_email = webmaster@xxx
				sender_name = Webmaster
				replyto_email = DeineEmailAdresse
				replyto_name = TEXT
				replyto_name.value = Deine Name
				htmlEmailAsAttachment = 0
		 	}
		}
		4.class = Finisher_Redirect
		4.config {
			redirectPage = 233
		}
	}
}

newsletter.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
	<data type="array">
		<languageKey index="default" type="array">
			<label index="name">Name</label>
			<label index="email">E-Mail</label>
			<label index="submit">Send</label>
			<label index="is_error">One or more errors occoured while filling the form!</label>
			<label index="error_name_required">Enter your name!</label>
			<label index="error_email_required">Enter your E-mail address!</label>
			<label index="error_email_email">E-mail address must be valid syntax!</label>
			<label index="required_fields">Fields marked with * are required!</label>
		</languageKey>
		<languageKey index="de" type="array">
			<label index="name">Name</label>
			<label index="email">E-Mail</label>
			<label index="submit">Absenden</label>
			<label index="is_error">Beim Absenden des Formulars sind ein paar Fehler aufgetreten:!</label>
			<label index="error_name_required">Bitte gib Deinen Namen an!</label>
			<label index="error_email_required">Bitte gib Deine E-Mail-Adresse an!</label>
			<label index="error_email_email">Die eingetragene E-Mail-Adresse ist ungültig!</label>
			<label index="required_fields">Felder mit * sind Pflichtfelder!</label>
		</languageKey>
	</data>
</T3locallang>

newsletter.html

<!-- ###TEMPLATE_FORM1### begin -->
<div id="formhandler_newsletter_form">
	###ERROR###
	<form method="post" action="###REL_URL###">
		<p>###LLL:required_fields###</p>
		<input type="hidden" name="formhandler[submitted]" value="1" />
		<dl>
			<dt><label for="name">###LLL:name### ###required_name###</label></dt>
			<dd><input type="text" ###is_error_name### name="formhandler[name]" id="name" value="###value_name###"/></dd>
		</dl>
		<dl>
			<dt><label for="email">###LLL:email### ###required_email###</label></dt>
			<dd><input type="text" ###is_error_email### name="formhandler[email]" id="email" value="###value_email###"/></dd>
		</dl>
		<dl>
			<dd><input type="submit" value="###LLL:submit###" ###submit_nextStep###/></dd>
		</dl>
	</form>
</div>
<!-- ###TEMPLATE_FORM1### end -->
 
<!-- ###TEMPLATE_EMAIL_USER_PLAIN### begin -->
Hallo ###value_name###,
 
Du hast Dich soeben für meinen Newsletter auf [webseite] angemeldet.
Bitte klicke auf den folgenden Link, um die Registrierung abzuschließen:
 
###value_authCodeUrl###
<!-- ###TEMPLATE_EMAIL_USER_PLAIN### end -->
 
<!-- ###TEMPLATE_EMAIL_USER_HTML### begin -->
<p>Hallo ###value_name###</p>
<p>Du hast Dich soeben für meinen Newsletter auf [webseite] angemeldet.<br />
Bitte klicke auf den folgenden Link, um die Registrierung abzuschließen:</p>
<p><a href="###value_authCodeUrl###" target="_blank">Newsletteranmeldung bestätigen</a></p>
<!-- ###TEMPLATE_EMAIL_USER_HTML### end -->
 
<!-- ###TEMPLATE_EMAIL_ADMIN_PLAIN### begin -->
Hallo Admin,
 
Soeben hat sich ###value_name### (###value_email###) für den Newsletter auf [webseite] angemeldet.
 
Dein Server
<!-- ###TEMPLATE_EMAIL_ADMIN_PLAIN### end -->
 
<!-- ###TEMPLATE_EMAIL_ADMIN_HTML### begin -->
<p>Hallo Admin,</p>
<p>Soeben hat sich ###value_name### (###value_email###) für den Newsletter auf [webseite] angemeldet</p>
<p>Dein Server</p>
<!-- ###TEMPLATE_EMAIL_ADMIN_HTML### end -->
 
<!-- ###TEMPLATE_SUBMITTEDOK### begin -->
<table>
  <tr>
    <td>###LLL:name###</td>
    <td>###value_name###</td>
  </tr>
  <tr>
    <td>###LLL:email###</td>
    <td>###value_email###</td>
  </tr>
</table>
<!-- ###TEMPLATE_SUBMITTEDOK### end -->

newsletter.css

#formhandler_newsletter_form {
	width: 100%;
}
 
#formhandler_newsletter_form .error ul {
	margin: 0;
}
 
.errorField {
	background-color: #FF0000;
}

Die eine Zeile TypoScript

<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templates/formhandler/newsletter.ts">

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Also habe ich nach einer Möglichkeit gesucht, die Icons zu verändern, ohne den TYPO3 Core dafür ändern zu müssen, um so die Updatefähigkeit von TYPO3 zu erhalten. Per TypoScript lässt sich das Ziel erreichen.

Zunächst habe ich in fileadmin einen eigenen Ordner “fileadmin/filelist/icons” erstellt und dort meine eigenen Icons abgelegt. Alle Dateien haben als Dateinamen die entsprechende Dateiendung, also z.B. pdf.png, xls.png, xlsx.png, mov.png und so weiter.

TYPO3 4.6

Für TYPO3 4.6 gibt es eine recht einfache Möglichkeit, das Problem zu lösen: Für stdWrap wurde die neue Eigenschaft “replacement” eingeführt. Dadurch lassen sich Zeichenketten leicht ersetzen. Auch Reguläre Ausdrücke (RegEx) sind möglich.

tt_content.uploads.20.itemRendering.10 {
	stdWrap {
		replacement {
			10.search = typo3/sysext/cms/tslib/media/fileicons
			10.replace = fileadmin/filelist/icons
 
			20.search = .gif
			20.replace = .png
		}
 
		HTMLparser = 1
		HTMLparser {
			allowTags = a,img
			tags.img.fixAttrib.width.set = 32
			tags.img.fixAttrib.height.set = 32		}
	}
}

In meinem Codebeispiel wird zum einen der Pfad, der von der von CSS Styled Content mitgelieferten UserFunc stammt, durch meinen eigenen Pfad ersetzt, zum anderen ändere ich die Dateiendung von .gif auf .png ab. Über den HTML Parser ändere ich die ursprünglich generierten Größenangaben auf 32 Pixel. Um das Code Beispiel auf eigene Projekte anzuwenden, muss also nur der Pfad, die Dateiendung und die Größe der Icons angepasst werden. Der zweite Screenshot zeigt die Veränderung.

TYPO3 4.5 und älter

In TPYO3 4.5 und älteren Versionen ist die Änderung wesentlich komplizierter, da hier nicht auf stdWrap.replacement zurückgegriffen werden kann. Aber auch hier gibt es eine Lösung:

tt_content.uploads.20.itemRendering.10 >
tt_content.uploads.20.itemRendering.10 = IMAGE
tt_content.uploads.20.itemRendering.10 {
	file {
		import = fileadmin/filelist/icons/
		import {
			data = register:fileExtension
			wrap = |.png
		}
 
		width = 32
		height = 32
	}
 
	stdWrap.ifEmpty.cObject = IMAGE
	stdWrap.ifEmpty.cObject {
		file = fileadmin/filelist/icons/default.png
		file.width = 32
		file.height = 32
	}
 
	stdWrap {
		typolink {
			parameter.stdWrap {
				wrap = uploads/media/
				data = register:linkedLabel
				HTMLparser = 1
				HTMLparser.allowTags =
			}
		}
 
		wrap = [td class="csc-uploads-icon"]|[/td]
	}
 
	if.isPositive.field = layout
}

Als erstes muss die ursprüngliche Programmierung von CSS Styled Content zurückgesetzt werden. Danach wird das Icon komplett neu aufgebaut. Über file.import wird das passende Icon zur Dateiendung gerendert. Falls es für die gewünschte Dateiendung kein Icon im angegebenen Ordner geben sollte, wird mit stdWrap.ifEmpty.cObject ein Default Icon gerendert. Als letztes wird das Icon noch auf die eigentliche Datei verlinkt. Über den HTML Parser wird etwas getrickst und der eigentlich komplette HTML Code aus der UserFunc, bestehend aus a Tag und img Tag gelöscht, so dass nur der eigentliche Dateiname übrig bleibt. Der td Wrap am Schluss gehört natürlich in spitze Klammern. Der Code wird hier im Blog aber leider nicht korrekt angezeigt.

Beide TypoScript Schnipsel können in einer Text Datei runtergeladen werden.

Fazit

Mit TypoScript lässt sich mal wieder viel erreichen, ohne den TYPO3 Core dafür anfassen oder auch nur eine Zeile PHP Code schreiben zu müssen.

Es gibt bestimmt noch andere, elegantere Wege, die Datei Icons in Dateilisten zu ersetzen. Ich bin auf eure Kommentare gespannt.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Die Google Wetter API ist leider nicht dokumentiert, ist eigentlich auch nur für die Weather-Widgets in iGoogle gedacht. Die Standard-API liefert zudem nicht unbedingt hübsche Icons. Vorteil ist allerdings, dass Sie eine Wetter-Vorhersage über mehrere Tage liefert. Glücklicherweise ist es nicht so schwer die Wetter-Vorhersage auf der eigenen TYPO3-Website anzuzeigen und dazu eigene Symbole zu verwenden.

Man kann natürlich extra eine kleine TYPO3-Extension schreiben, ist aber unnötig, da ja keine Daten (in der Datenbank) gespeichert werden müssen. Es genügt, wenn man eine sogenannte User-Function schreibt und diese per Marker in die Website einfügt. Unsere User-Function ist auch schon so vorbereitet, dass man eigene Wetter-Icon verwenden und die Location einfach im TYPOscript editieren kann, aber dazu später mehr.

Schritt 1: Marker in HTML-Template einfügen

An die Stelle wo später das Wetter-Modul ausgegeben werden soll, wird ein Marker im Template angelegt, z.B.:

<div>###WETTER###</div>

Schritt 2: Marker im TYPOscript enbinden

In dem Tutorial verwenden wir ein klassisches TYPO3 Marker-Template und fügen den Marker im page-Objekt hinzu, in meinem Fall:

page.10 = TEMPLATE
page.10 {
  ...
  marks {
    WETTER < lib.weather
    ...
  }
}

Schritt 3: Die PHP User-Funktion für die Google-Wetter API Abfrage

Zwingend notwendig für das Einbinden einer eigenen PHP-Datei über eine User-Function in TYPO3 sind folgende 3 Punkte:

•    Dateiname beginnt mit “user_”
•    Die PHP-Datei enthält eine Klasse die mit “user_” beginnt
•    die PHP-Funktion übergibt mit “return” die Inhalte an TYPO3

Schritt 4: User-Function in TYPO3 einbinden

Die User-Function wird jetzt in TYPO3 eingebunden und über die Variablen konfiguriert

/**
* lib.weather
* @description:    wetter ausgabe in html
*/
includeLibs.weather = fileadmin/scripts/user_weather.php
 
lib.weather = USER
lib.weather {
  userFunc = user_weather->get
  poi = Hamburg
  path = /fileadmin/templates/img/wetter-icons/
  png = 1
}

Im cObject USER können wie schon erwähnt Variablen definiert werden. Für die Location, für den das Wetter über die Weather-API abgerufen werden soll, füllt man die Variable “poi” mit dem Ort, in unserem Fall “Hamburg”. Zudem kann man in “path” den Pfad zu den eigenen Wetter-Symbolen angeben. Ist die Variable nicht gefüllt, werden die Standard Wetter-Symbole von Google verwendet.

Folgende Wetter-Zustände kennt die Google Wetter API (Quelle: www.web-spirit.de):

chance_of_rain
sunny
mostly_sunny
partly_cloudy
mostly_cloudy
chance_of_storm
showers
rain
chance_of_snow
cloudy
mist
storm
thunderstorm
chance_of_tstorm
sleet
snow
icy
dust
fog
smoke
haze
flurries

Wir haben unsere eigenen Wetter-Icons als PNG-Grafiken mit Alpha-Transparenz abgespeichert. In diesem Fall muss die Variable “png” auf 1 gesetzt werden, weil dann die Wetter-Dateiendungen von GIF auf PNG in der user_weather.php umgeschrieben wird.

Ein schönes Wetter-Icon Set findet man bei graphicriver.net.

Demo-Screenshot

Nachdem das fertige Wetter-Modul mit CSS gestaltet wurde, sieht es so aus:

Download

PHP-Datei als TXT-Version zum Download: user_weather.php.txt

Hinweis

Da es keine offizielle Google API ist, ist es nicht sicher wie lange die API noch zur Verfügung steht und ob die Verwendung für die eigene Website erlaubt ist. Bisher sind im Web dazu weder positive noch negative Meinungen zu finden. Wer dazu mehr weiß, kann gerne einen Kommentar posten. Habt ihr die Google Weather API schon in Projekten eingesetzt? Wer Verbesserungsvorschläge für die PHP-Userfunc hat, bitte kommentieren! Ich hatte dabei Unterstützung von Anja, danke dafür!

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Das TypoScript trennt dann mit dem “substring” den alten Pfad ab und setzt mit dem “innerWrap” einen neuen Pfad vor das Bild. Mit dem HTMLParser werden dann die “height” und “width” Attribute gelöscht, sodass die Größe durch die Datei selbst bestimmt wird. Auch wenn das Auseinanderschneiden des HTML nicht sauber ist, war es die einzig funktionierende Möglichkeiten eigene Icons für verschiedene Datei-Typen bereitzustellen (nur für tt_news).

plugin.tt_news.newsFiles {
  target = _blank
  size.wrap = <span>|</span>
  stdWrap {
    substring = 49
    innerWrap = <img src="fileadmin/images/icons/ |
    HTMLparser = 1
    HTMLparser {
      allowTags = a,img,span
      tags.img.fixAttrib.width.unset = 1
      tags.img.fixAttrib.height.unset = 1
    }
  }
}

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

UserFunction:

<?php
class user_getextimage {
  function main($content,$conf) {
    $url = $conf['url'];
 
    if ( empty($conf['filename']) ) {
      $targetFile = $conf['targetPath'].hash('adler32',$url).".".$conf['fileExt'];
    } else $targetFile = $conf['targetPath'].$conf['filename'].".".$conf['fileExt'];
 
    # Wenn Datei noch nicht zu alt ist gleich zurückliefern anstatt neu laden
    if ( file_exists($targetFile) ) {
      $lastModified = filemtime($targetFile);
      $currentTime  = time();
 
      if ( ($lastModified + $conf['cacheTimeout']) > $currentTime ) return $targetFile;
    }
    // Anfrage ausfuehren und ausgeben
    file_put_contents($targetFile,t3lib_div::getUrl($url));
 
    // PFad liefern
    return $targetFile;
  }
}
?>

Setup:

plugin.tx_tsselect_pi1.objList.imageTest.title = Image Test
plugin.tx_tsselect_pi1.objList.imageTest.cObject = IMAGE
plugin.tx_tsselect_pi1.objList.imageTest.cObject {
  file.import.stdWrap.cObject = USER
  file.import.stdWrap.cObject {
    includeLibs = fileadmin/user_getextimage/user_getextimage.class.php
    userFunc   = user_getExtImage->main
 
    url          = http://lorempixel.com/450/350/
 
    targetPath   = fileadmin/user_getextimage/
    fileExt      = jpg
    filename     = extImage
    cacheTimeout = 300
  }
 
  file.maxW = 150
  file.maxH = 150
 
  imageLinkWrap = 1
  imageLinkWrap.enable = 1
  imageLinkWrap.typolink {
    parameter.cObject < plugin.tx_tsselect_pi1.objList.imageTest.cObject.file.import.stdWrap.cObject
    ATagParams = class="lightbox" rel="lightbox[galerie]"
  }
 
  wrap = |<br />Source from: http://lorempixel.com/
}

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Variablen

Man definiert einen Wert, welcher dann an entsprechender Stelle im Code immer wieder eingefügt werden kann.

$black:       #222222;
$blue:        #083672;
$white:       #fff;
$arrow_white: url('../img/arrow_white.png');
$arrow_blue:  url('../img/arrow_blue.png');
body {
  font-family: Arial, Verdana, sans-serif;
  font-size:   0.8em;
  color:       $black;
  text-align:  center;
  background:  $white;
}
 
a {
  display: block;
  background: $blue $arrow_white no-repeat 205px 13px;
}

Nesting

Mit dieser Methode kann man sich super viel Schreibarbeit ersparen. Es werden einfach die Elemente ineinander verschachtelt.

nav {
  position: relative; 
  padding: 0 0  0 240px;
  width: 710px;
 
  li {
    display: inline;
    float: left;
 
    a {
     display: block; 
     float: left;
     margin: 0 10px 0 0;
     font-size: 0.85em;
     }
 
   } /* li */
 
 } /* nav */

Mixins

Mit dieser Methode ist es möglich mehrere CSS-Definitionen einzufügen. Sehr hilfreich z.B. bei den CSS3 Definitionen, die für jeden Browser speziell definiert werden müssen.
Definition Mixin

@mixin verlaufZweiFarben($hauptfarbe, $farbe1) { 
  background: $hauptfarbe; /* Old browsers */
  background: -moz-linear-gradient(top, $hauptfarbe 0%, $farbe1 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$hauptfarbe), color-stop(100%,$farbe1)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* IE10+ */
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='$hauptfarbe', endColorstr='$farbe1',GradientType=0 )"; /* IE6-9 */
  background: linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* W3C */
}

Integration Mixin

article { 
  @include verlaufZweiFarben;
}

Selector Inheritance

Mit dieser Methode ist es möglich Stile zu kopieren, ohne die CSS Eigenschaften zu duplizieren.

.infobox { 
  border: 1px solid #000;
  background: #dddddd;
  color: #000;
  width: 100px;
}

Hier werden jetzt alle Styles, die bereits in “.infobox” definiert wurden integriert.

.teaser { 
  @extend .infobox;
  font-size: 1em;
}

Funktionen

$color: #777777;
#content {
  background:-color: darken($color,20%);
  color: lighten($color,50%);
}
 
Definition als CSS
#content {
  background-color: #444444;
  color: #f6f6f6;
}

Weitere Informationen sind auf der offiziellen SASS Homepage zu finden unter sass-lang.com. Für alle, die die Firebug Extension für den Firefox nutzen, gibt es zudem die Erweiterung FireSass.

SASS in TYPO3

Die Extension sassify unterstützt die Integration von SASS in TYPO3. Einfach herunter laden, installieren, Include static Template einbinden und Ts Code definieren. z.B.:

plugin.tx_sassify_plugin {  
  debugInfo = 0
  showExceptions = 1
  cache = 0
  stylesheets {    
    10 = reset.scss
    10 {
      filenameWrap.wrap = fileadmin/templates/scss/|    
      media = screen    
    }
    20 = screen.scss
    20 {
      filenameWrap.wrap = fileadmin/templates/scss/|    
      media = screen    
    }
    50 = print.scss
    50 {
      filenameWrap.wrap = fileadmin/templates/scss/|    
      media = print    
    }
 
  }
}

Seitenspezifische CSS können einfach mittels Conditions definiert werden

[PIDinRootline = 2]
  plugin.tx_sassify_plugin.stylesheets.21 = home.scss
  plugin.tx_sassify_plugin.stylesheets.21.filenameWrap.wrap = fileadmin/templates/scss/|
[end]

Wer von euch auf den Geschmack gekommen ist und SASS ausprobieren möchte, kann auch ganz einfach seine bisherigen css Dateien umbenennen in .scss und die neuen Sachen Stück für Stück integrieren. Man kann klein anfangen – z.B. erst einmal nur die Farben als Variablen definieren und sich dann allmählich weiter entwickeln. Ich habe mich super schnell dran gewöhnt und mag SASS absolut nicht mehr missen.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Achtung: Aufgrund der Benutzung von “expandList” wird TYPO3 4.6 für dieses Beispiel benötigt.

Konstanten:

# Konfiguration
tsContentBrowser.maxPerPage    = 2
tsContentBrowser.pidInList     = 42
tsContentBrowser.table         = tt_content
tsContentBrowser.where         = colPos=0
tsContentBrowser.languageField = sys_language_uid
tsContentBrowser.prePages      = 3

Setup:

# In Extension ts_select bekannt machen als Content Element (Dropdown)
plugin.tx_tsselect_pi1.objList.tsContentBrowser.title   = Content Browser
plugin.tx_tsselect_pi1.objList.tsContentBrowser.cObject = COA_INT
plugin.tx_tsselect_pi1.objList.tsContentBrowser.cObject {
 
  # Werte berechnen und merken im Register
  5 = LOAD_REGISTER
  5 {
    # EintrÀge insgesamt zÀhlen
    counter.cObject = CONTENT
    counter.cObject {
      table = {$tsContentBrowser.table}
      wrap = |
 
      select {
        languageField = {$tsContentBrowser.languageField}
        pidInList     = {$tsContentBrowser.pidInList}
        where         = {$tsContentBrowser.where}
        selectFields  = COUNT(*) AS counter
      }
 
      renderObj       = TEXT
      renderObj.field = counter
      renderObj.wrap  = |
    }
 
    # Aktuelle Position
    curPage.cObject = TEXT
    curPage.cObject {
      data = GP:page
      wrap = |
 
      override = 1
      override.if.value = 1
      override.if.isLessThan.data = GP:page
    }
 
    # Max Seitenzahlen
    maxPages.cObject = TEXT
    maxPages.cObject {
      stdWrap.dataWrap = ({register:counter}/{$tsContentBrowser.maxPerPage})+0.5
      prioriCalc = intval
    }
 
    # Vorherige Seite
    prePage.cObject = COA
    prePage.cObject {
      # Nur anzeigen wenn größer als 1
      10 = TEXT
      10.stdWrap.dataWrap = {register:curPage}-1
      10.prioriCalc = intval
      10.if.value = 0
      10.if.isGreaterThan.cObject = TEXT
      10.if.isGreaterThan.cObject {
        stdWrap.dataWrap = {register:curPage}-1
        prioriCalc = intval
      }
 
      # Nur anzeigen wenn kleiner als 1
      20 = TEXT
      20.value = 1
      20.if.value = 1
      20.if.isLessThan.cObject = TEXT
      20.if.isLessThan.cObject {
        stdWrap.dataWrap = {register:curPage}-1
        prioriCalc = intval
      }
    }
 
    # NÀchste Seite
    nxtPage.cObject = COA
    nxtPage.cObject {
      # Nur anzeigen wenn kleiner als maxPages
      10 = TEXT
      10.stdWrap.dataWrap = {register:curPage}+1
      10.prioriCalc = intval
      10.if.value.stdWrap.dataWrap = {register:maxPages}+1
      10.if.value.prioriCalc = intval
      10.if.isLessThan.cObject = TEXT
      10.if.isLessThan.cObject {
        stdWrap.dataWrap = {register:curPage}+1
        prioriCalc = intval
      }
 
      # Nur anzeigen wenn kleiner als maxPages
      20 = TEXT
      20.data = register:maxPages
      20.wrap = |
      20.if.value.data = register:maxPages
      20.if.isGreaterThan.cObject = TEXT
      20.if.isGreaterThan.cObject {
        stdWrap.dataWrap = {register:curPage}+1
        prioriCalc = intval
      }
    }
 
    # Aktuelle Position errechnen
    curPos.cObject = TEXT
    curPos.cObject {
      stdWrap.dataWrap = ({register:curPage}-1)*{$tsContentBrowser.maxPerPage}
      prioriCalc = intval
    }
 
    forwPos.cObject = TEXT
    forwPos.cObject {
      stdWrap.dataWrap = {register:curPage}+{$tsContentBrowser.prePages}
      prioriCalc = intval
    }
 
    backPos.cObject = TEXT
    backPos.cObject {
      stdWrap.dataWrap = {register:curPage}-{$tsContentBrowser.prePages}
      prioriCalc = intval
    }
  } # END Register
 
 
 
  # EintrÀge gesamt anzeigen
  10 = TEXT
  10.value = Einträge gesamt.
  10.dataWrap = {register:counter}&nbsp;|<br />
 
  # Pagebrowser
  20 = COA
  20 {
    # Erste Seite
    10 = TEXT
    10 {
      value = First
      innerWrap = &lt;&lt;&nbsp;|
 
      typolink.parameter {
        data = TSFE:id
 
        if.value = 1
        if.isGreaterThan.data = register:curPage
      }
 
      typolink.additionalParams = &page=1
    }
 
    # Platzhalter
    15 = TEXT
    15.value = &nbsp;
 
    # ZurÃŒck link machen
    20 = TEXT
    20 {
      value = Prev
      innerWrap = &lt;&nbsp;|
 
      typolink.parameter {
        data = TSFE:id
 
        if.value = 1
        if.isGreaterThan.data = register:curPage
      }
 
      typolink.additionalParams.cObject = COA
      typolink.additionalParams.cObject {
        10 = TEXT
        10.value = &page=
 
        20 = TEXT
        20.data = register:prePage
      }
    }
 
    # Platzhalter
    25 = TEXT
    25.value = &nbsp;  
 
    # Seitenlinks machen
    30 = COA
    30 {
      10 = TEXT
      10.value = ...
      10.noTrimWrap = || |
      10.if.value = 1
      10.if.isGreaterThan.data = register:backPos
 
      20 = TEXT
      20.stdWrap.cObject = TEXT
      20.stdWrap.cObject.stdWrap.cObject = COA
      20.stdWrap.cObject.stdWrap.cObject {
        10 = TEXT
        10.insertData = 1
        10.value = {register:backPos}-
        10.override = 1-
        10.override.if.value = 1
        10.override.if.isLessThan.data = register:backPos
 
        20 = TEXT
        20.insertData = 1
        20.value = {register:forwPos}
        20.override.data = register:maxPages
        20.override.if.value.data = register:maxPages
        20.override.if.isGreaterThan.data = register:forwPos
      }
      20.stdWrap.cObject.expandList = 1
      20.split {
        token = ,
        cObjNum = 1
        1 {
          10 = TEXT
          10 {
            current = 1
            noTrimWrap = || |
 
            typolink.parameter {
              data = TSFE:id
 
              if.value.data = register:curPage
              if.equals.current = 1
              if.negate = 1
            }
 
            typolink.additionalParams.cObject = COA
            typolink.additionalParams.cObject {
              10 = TEXT
              10.value = &page=
 
              20 = TEXT
              20.current = 1
              20.wrap = |
            }
          }
        }
 
        2 < .1
        2.noTrimWrap = | | |
      }
 
      30 = TEXT
      30.value = ...
      30.noTrimWrap = || |
      30.if.value.data = register:maxPages
      30.if.isLessThan.data = register:forwPos
    }
 
    # Weiter Link
    40 < .20
    40.value = Next
    40.innerWrap = |&nbsp;&gt;
    40.typolink.additionalParams.cObject.20.data = register:nxtPage
    40.typolink.parameter.if >
    40.typolink.parameter.if.value.data = register:maxPages
    40.typolink.parameter.if.isLessThan.data = register:curPage
 
    # Platzhalter
    45 < .15
 
    # Letzte Seite
    50 = TEXT
    50 {
      value = Last
      innerWrap = |&nbsp;&gt;&gt;
 
      typolink.parameter {
        data = TSFE:id
 
        if.value.data = register:maxPages
        if.isLessThan.data = register:curPage
      }
 
      typolink.additionalParams.cObject = TEXT
      typolink.additionalParams.cObject {
        value = &page=
        dataWrap = |{register:maxPages}
      }
    }
  }
 
  # Platzhalter
  25 = TEXT
  25.value = <p>Seite {register:curPage} von {register:maxPages}</p>
  25.insertData = 1  
 
 
 
  # Ausgabe des Inhalts
  30 = CONTENT
  30 {
    table = {$tsContentBrowser.table}
    wrap = |
 
    select {
      # SpracheinschrÀnkung auswÀhlen Ìber
      languageField = {$tsContentBrowser.languageField}
 
      # Aus welcher Seite, sonst current
      pidInList = {$tsContentBrowser.pidInList}
 
      # Die beiden haben leider kein stdWrap (lösung: siehe markers)
      begin = ###beginCount###
      max = {$tsContentBrowser.maxPerPage}
 
      # Where und andWhere halt
      where = {$tsContentBrowser.where}
      #andWhere =
 
      # Nur folgende Felder auswÀhlen
      #selectFields = header
 
      # SQL fÃŒr die Sortierung
      #orderBy = RAND()
      orderBy = sorting
 
      # Aber ÃŒber Marker kann man die sortierung beeinflussen
      markers {
        beginCount.data = register:curPos
      }
    }
 
    # Das rendern jedes einzelnen (in diesem fall standard typo3 config ÃŒbernehmen)
    renderObj < tt_content
  }
 
 
 
  # ZurÃŒcksetzen des Registers
  35 = RESTORE_REGISTER
}

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

2. Warum Subparts besser als Marker sind
Wer in der Vergangenheit vor der Wahl stand, Marker oder Subparts zu verwenden, hat sich zu Beginn den Einsatz von Subparts nicht recht vorstellen können. Mit Markern kann man schließlich auch wunderbar Inhalte an einer Stelle im HTML-Template einfügen.
Wer jedoch das HTML-Template möglichst nicht abändern möchte, wird davor zurückschrecken, eingesetzte Dummy-Texte, die einen Inhaltsbereich simulieren sollen, herauszulöschen und durch einen Marker zu ersetzen. Eventuell soll das Template später noch in anderen Systemen Verwendung finden oder man soll es direkt mit dem Browser öffnen können und so eine Vorstellung vom fertigen Layout erhalten. Der Einsatz von Markern eignet sich also nicht für zerstörungsfreies Templating.

3. Blick ins FLUIDTEMPLATE
Was früher die Marker waren, sind in der Zeit von FLUIDTEMPLATE schlicht Variablen. Während man früher einen Marker an den typischen Rauten-Zeichen erkannt hat, zeigt sich eine Variable in Fluid an den geschweiften Klammern.

<!-- Alte Schreibweise -->
<div id="content">
	###CONTENT###
</div>

<!-- Neue Schreibweise -->
<div id="content">
	{CONTENT}
</div>

Ähnlich wie in der Oldschool-Methode lassen sich diese (unter der Verwendung von css_styled_content) über TypoScript zuweisen:

page.10 = FLUIDTEMPLATE
page.10 {
	file = fileadmin/template.html
 
	variables.CONTENT < styles.content.get
}

Hinweis: Um die Verwendung von htmlspecialchars() zu verhindern, kann man einen HTML-ViewHelper einsetzen:

<div id="content">
	<f:format.html parseFuncTSPath="lib.parseFunc">
		{CONTENT}
	</f:format.html>
</div>

Hinweis2: Auf die Verwendung von Templates, Layouts und Partials in Fluid geht Marco ausführlich ein.

4. Subparts in Fluid?
Subparts gibt es in Fluid nicht und so wie es aussieht, wird es leider auch nie welche geben. Dennoch wäre es schön, wenn man den gesetzten Dummy Text nicht entfernen müsste.
Mit einem Trick und unter Verwendung eines cObject-ViewHelpers ist es dennoch möglich, Dummy Texte weiterhin zu erhalten. Man muss den ViewHelper lediglich mit einem öffnenden und einem schließenden Tag schreiben. Der Text dazwischen wird durch das jeweilige TypoScript-Objekt ersetzt.

Verwendung von Subparts beim herkömmlichen Templating:

<!-- Alte Schreibweise -->
<div id="content">
	<!-- ###CONTENT### -->
	<h1>Dalmatiner</h1>
	<p>Der Dalmatiner ist ein mittelgroßer 
	bis großer gut proportionierter, 
	getupfter, kräftiger, lebhafter, 
	sehr auffälliger Hund. Sein ausgeglichener, 
	schlanker Körper besitzt einen starken Rücken 
	mit einer gleichmäßigen geraden Rückenlinie.</p>
	<!-- ###CONTENT### -->
</div>

page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/template.html
 
	subparts.CONTENT < styles.content.get
}

Erhaltung der Dummytexte in Fluid:

<!-- Neue Schreibweise -->
<div id="content">
	<f:cObject typoscriptObjectPath="lib.content">
	<h1>Dalmatiner</h1>
	<p>Der Dalmatiner ist ein mittelgroßer 
	bis großer gut proportionierter, 
	getupfter, kräftiger, lebhafter, 
	sehr auffälliger Hund. Sein ausgeglichener, 
	schlanker Körper besitzt einen starken Rücken 
	mit einer gleichmäßigen geraden Rückenlinie.</p>
	</f:cObject>
</div>

lib.content < styles.content.get

Hinweis: Der direkte Aufruf <f:cObject typoscriptObjectPath=”styles.content.get” /> war mir leider nicht möglich.

5. Links zu Fluid und FLUIDTEMPLATE

• Die offizielle Erklärung des FLUIDTEMPLATE auf typo3.org
• FLUIDTEMPLATE einbinden – gut erklärt von Marco
• Sebastian zeigt auch noch einmal die Verwendung von FLUIDTEMPLATE

Wie immer freue ich mich über jeden Kommentar.

Gruß aus Rosenheim,
Alex Kellner

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Mit der Einstellung mod.web_list.hideTranslation kann man Übersetzungen ausblenden, sofern man die Checkbox “Localization view” nicht aktiviert hat. In dieser werden die Übersetzungen weiterhin angezeigt. Als Wert ist entweder ‘*’ oder eine kommaseparierte Liste der Tabellennamen gültig.

Forge-Ticket: http://forge.typo3.org/issues/23198

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Bei einer Recherche nach einer eleganteren Lösung stößt man irgendwann unweigerlich auf den TYPO3 Bugtracker bzw. den Forge Eintrag „Integrate automatic line breaks in GIFBUILDER“. Dort wird ersichtlich, dass seit TYPO3 4.3.0 u.a. zwei neue Eigenschaften für das TEXT Objekt des GifBuilders zur Verfügung stehen. Die beiden Eigenschaften werden genauer in der TSRef beschrieben.

Die Eigenschaft breakWidth ist vom Typ Integer. Sie definiert die maximale Länge des TEXT Objekts. Überstehende Elemente erzeugen einen automatischen Umbruch. Die Eigenschaft breakSpace ist vom Typ Float. Sie ist ein Wert, der mit der Zeilenhöhe des aktuellen Elements multipliziert wird. Diese Eigenschaft kann man sich bspw. als Zeilenabstand vorstellen, wie man es aus Schreibprogrammen kennt (z.B.  1,5facher Zeilenabstand). breakSpace ist mit dem Wert 1.0 vorbelegt.

Ein Minimalbeispiel sähe wie folgt aus.

temp.renderHeadline = IMAGE
temp.renderHeadline {
 file = GIFBUILDER
 file {
  XY = [10.w]+10, [10.h]+20
  10 = TEXT
  10 {
   text = Das ist ein ganz langer Text, der ganz sicher umbricht.
   backColor = #ffffff
   fontSize = 15
   fontColor = #999999
   offset = 5, 15
   breakWidth = 100
   breakSpace = 1.5
  }
 }
}

Ein Beispiel für die Funktionsweise findet ihr auf der Seite Partisan Vodka.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Schritt 1: Extension anlegen
Mit Hilfe des Extension Kickstarters erstellt man eine neue Extension. Als Extension Key wählt man bspw. generic_lib und füllt alle notwendigen Felder im Bereich „General info“. Hierzu gehören ein Titel (z.B. Generic Library) und eine kurze Beschreibung. Außerdem kann man eine Kategorie angeben (z.B. Miscellaneous), einen Status wählen (z.B. Beta) sowie seinen Namen und eine E-Mail Adresse angeben. Nachdem alle Daten eingetragen und der Button „Update“ geklickt wurde, wechselt man zum Bereich „Static TypoScript code“.
Hier vergibt man für das statische Extension Template bspw. den Titel „Generic Lib“ und fügt den ersten TypoScript Code in die vorgesehen Textfelder einfügen.

Constants
In den Constants werden Pfade definiert, die uid der Root Seite festgelegt und ein Standard Logo sowie der Titel der TYPO3 Website vergeben.

generic_lib {
  pathRoot = fileadmin/templates/
  #relative to pathRoot
  pathImages = images/
  pathCss = css/
  websiteRootUid = 1
  websiteLogo = logo.png
  websiteTitle = Hello World Website
}

Setup
Im Setup erzeugt man eine Bibliothek, die das Logo der Website ausgibt. Das Logo ist verlinkt zur Startseite. Der Link ist absolut, um valides HTML auch bei Verwendung von RealURL zu erzeugen. Ohne die Angabe wäre das href Attribut leer.

#get website logo and wrap it with link to homepage
lib.getLogo = IMAGE
lib.getLogo {
  file = {$generic_lib.pathRoot}{$generic_lib.pathImages}{$generic_lib.websiteLogo}
  altText = Go to homepage of {$generic_lib.websiteTitle}
  altText.lang.de = Zur Startseite von {$generic_lib.websiteTitle}
  stdWrap.typolink.parameter = {$generic_lib.websiteRootUid}
  stdWrap.typolink.forceAbsoluteUrl = 1
}

Nun klickt man auf den Button „View result“ und prüft, welche Dateien erzeugt werden. Die aktuellen Einstellungen sollen genügen und so klickt man auf den Button „Write“, um die Extension im Verzeichnis /typo3conf/ext zu generieren.

Nachdem die Extension erzeugt wurde, kann man sie installieren und den Cache leeren. Um zu prüfen, ob alles geklappt hat, erzeugt man das TypoScript Root Template. Danach wechselt man auf den Reiter „Enthält“. Dort sollte man im Select „Verfügbare Objekte“ einen neuen Eintrag „Generic Lib (generic_lib)“ sehen können. Falls dies so ist, hat man alles richtig gemacht. Man fügt als erstes CSS Styled Content und danach die Generic Lib ein.

Schritt 2: Erster Einsatz
Für einen ersten Test soll die Bibliothek „lib.getLogo“ eingebunden werden. Im Setup des TypoScript Root Templates setzt man folgende Konfiguration.

page = PAGE
page {
  typeNum = 0
  10 < lib.getLogo
}

Sobald das Logo im Pfad /fileadmin/templates/images/logo.png vorliegt, wird es auf der Website angezeigt.

Schritt 3: Optimierung und Erweiterung der Bibliothek
IMHO hat der Kickstarter eine überflüssige Verzeichnisebene “generic_lib“ im Verzeichnis „static“ angelegt. Als erstes verschiebt man die beiden Dateien constants.txt und setup.txt von /static/generic_lib/ nach /static. Danach generiert man folgende zusätzliche Verzeichnisse und Dateien.

/static/language/language.ts
/static/navigation/navigation.ts
/static/libs/libs.ts

Die Datei /ext_tables.php ist anzupassen, um die geänderte Verzeichnisstruktur TYPO3 bekannt zu geben. Durch die Änderung ist leider auch das statische Template erneut dem TypoScript Root Template im Backend zuzuordnen.

t3lib_extMgm::addStaticFile($_EXTKEY,'static/', 'Generic Lib');

Es bietet sich an, in die setup.txt allgemein gültige Konfigurationen vorzunehmen. So definiere ich in dieser Datei bereits das Template und das Page Objekt und setze einige stets wiederkehrende config Einstellungen. Der folgende Code zeigt ein Auszug meiner setup.txt Definition.

#set page object
page = PAGE
page {
  typeNum = 0
  #set new page title
  config.noPageTitle = 2
  stylesheet = {$pathRoot}{$pathCss}screen.css
  shortcutIcon = {$pathRoot}{$pathImages}favicon.ico
  headerData {
    10 = TEXT
    10 {
      field = title
      wrap = <title>|&nbsp;&#124; {$websiteTitle}</title>
      htmlSpecialChars = 1
    }
  }
}
 
#general config
config {
  #global variables
  linkVars = L
  disablePrefixComment = 1
  doctype = xhtml_trans
  xmlprologue = none
  xhtml_cleaning = all
  #change title to "Seitentitel - Allgemeiner Titel"
  pageTitleFirst = 1
}

Außerdem inkludiert man am Ende der setup.txt die oben erzeugten zusätzlichen Dateien.

#include language TS
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:generic_lib/static/language/language.ts">
#include navigation TS
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:generic_lib/static/navigation/navigation.ts">
#include additional libs
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:generic_lib/static/libs/libs.ts">

In der language.ts wird eine grundlegende Sprachkonfiguration vorgenommen.

config {
  sys_language_uid = 0
  language = de
  locale_all = de_DE.UTF8
  htmlTag_langKey = de_DE
}

In der navigation.ts speichert man öfters verwendete Navigationsobjekte. In meinem Fall habe ich ein TMENU lib.navigation angelegt mit bis zu 4 Ebenen. Ein weiteres TMENU lib.navigation_open basiert auf der lib.navigation, hat aber die Eingeschaft expAll = 1. So kann ich bspw. ein per CSS gesteuertes ausklappendes Menü abbilden. Weiterhin habe ich einige libs angelegt, die vom Typ „special“ sind. Hier lassen sich hervorragend Menüs einzelner Seiten ausgeben (special = list), Menüs von Unterseiten (special = directory), Sprachmenüs (special = language) oder der Brotkrumenpfad (special = rootline). Flexibilität entsteht durch die Verwendung von Constants, wie das folgende Beispiel zeigt.

#draw navigation with one layer
lib.navigation = HMENU
lib.navigation {
  entryLevel = {$generic_lib.navigationEntryLevel}
  1 = TMENU
  1 {
    wrap = <ul class="lvl1">|</ul>
    NO.linkWrap = <li class="first">|</li> |*| <li>|</li> |*| <li class="last">|</li>
  }
  2 < .1
  2.wrap = <ul class="lvl2">|</ul></li>
}
 
#draw special navigation based on special menu - list
lib.navigation_special = HMENU
lib.navigation_special {
  special = list
  special.value = {$generic_lib.navigationSpecialPidList}
  includeNotInMenu = 1
  1 < lib.navigation.1
}
 
#draw special navigation based on special menu - directory
lib.navigation_special_dir < lib.navigation_special
lib.navigation_special_dir {
  special = directory
  special.value = {$generic_lib.navigationSpecialPidDir}
}

In der libs.ts finden alle sonstigen Bibliotheken Platz. Hier wäre auch das weiter oben erstellte lib.getLogo unterzubringen. Neben dieser Standard Funktion habe ich bspw. eine lib angelegt, die das Feld „media“ einer Seiten ausliest.

#get page media resource
lib.getMainImage = IMAGE
lib.getMainImage {
  file.import = uploads/media/
  file.import.data = levelmedia:-1, slide
  file.import.listNum = 0
}

Das im Schritt 2 erstellte PAGE Objekt könnte man nun wie folgt ändern und erweitern. Dabei ist zu beachten, dass die generic_lib schon das PAGE Objekt erstellt und wir uns dadurch einige Zeilen Konfiguration sparen. Damit die Navigation funktioniert, ist in den Constants noch generic_lib.navigationEntryLevel = 0 zu setzen.

page {
  10 < lib.getLogo
  20 < lib.getMainImage
  30 < lib.navigation
  40 < styles.content.get
}

Noch ein Hinweis. Die automatisch per Kickstarter erzeugte Datei „ChangeLog“ sollte man verwenden, um Änderungen an der Extension zu dokumentieren. Dabei bietet es sich an, in der Datei „ext_emconf.php“ den Wert für die Eigenschaft „version“ zu erhöhen. Weiterhin können in der Datei über den Wert $EM_CONF[$_EXTKEY] [constraints][depends] Abhängigkeiten von anderen Extensions und bspw. der TYPO3 und PHP Version gepflegt werden.

Ich verwende auf unseren TYPO3 Servern globale TYPO3 Sourcen (via symlinks). Dort habe ich die generic_lib im Verzeichnis /typo3/ext abgelegt. Die generic_lib wird als globale Extension in der jeweiligen TYPO3 Instanz installiert. So ist nur eine Version der generic_lib zu pflegen. Sicherlich gibt es hier auch andere Möglichkeiten. Wichtig ist nur, dass man lediglich eine generic_lib pflegen muss

Ausblick und Potential
Die generic_lib stellt erst den Anfang dar. Man könnte nun eine weitere Extension pro Website „theme_PROJEKT“ erstellen und dort projektspezifische TypoScript Konfigurationen einfügen. Im Theme liegen alle benötigten CSS, HTML (sowohl Layout als auch Extension HTML Templates), Images und JavaScript Dateien. Diese Vorgehensweise bringt mehrere Vorteile:

• Es wird kein TypoScript mehr in der Datenbank gespeichert und über das Backend editiert. Man benötigt nur noch zwei Zeilen TypoScript, um das TypoScript des Themes zu inkludieren. Für die Constants <INCLUDE_TYPOSCRIPT: source=”FILE:EXT:theme_PROJEKT/files/ts/constants.ts”> und für das Setup <INCLUDE_TYPOSCRIPT: source=”FILE:EXT:theme_PROJEKT/files/ts/setup.ts”>.
• Dadurch kann man mit seinem Lieblingseditor das TypoScript extern bearbeiten. Ich verwende Notepad++ mit TypoScript Syntax Highlighting. Sehr komfortabel
• Man kann eine Versionskontrolle wie SVN oder git verwenden.

In den TypoScript Dateien verwendet man dann unproblematisch die Konfiguration und Bibliotheken der generic_lib. Durch diese Vorgehensweise ist es möglich, TYPO3 Projekte immer schneller umsetzen zu können.

Dies ist ein Gastbeitrag von Björn Jacob (TRITUM GmbH) für die “Alles muss raus” Aktion.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!