Blogix

Mit den Sub-Templates von TemplaVoilà ist es möglich Layouts für spezielle Ansichten (z.B. Druckversion) festzulegen. Hierfür legt man im Modul TemplaVoilà ein neues “TemplaVoilà Template Object” an und wählt für “Make this a sub-template of” das Template aus, für das die spezielle Ansicht gültig sein soll. Für “Select a type of rendering” wählt man die gewünschte spezielle Ansicht aus. Vordefiniert ist neben der Standardansicht “Default output” nur eine Druckversion “Printer friendly”. Das ist z.B. dann nicht ausreichend, wenn auf einer Webseite auch PopUps für Hilfetexte benötigt werden.

Um nun eine PopUp-Ansicht erstellen zu können, muss zuerst ein neuer “type of rendering” definiert werden. Hierfür fügt man in der “TSconfig” der Rootpage (im Page-Modul das Kontextmenü der Rootpage öffnen und “Edit page properties” auswählen; Registerkarte “Options” anklicken) eine neue Zeile ein:

TCEFORM.tx_templavoila_tmplobj.rendertype.addItems.popup = PopUp

“PopUp” ist die Bezeichnung, die in “Select a type of rendering” angezeigt wird, “popup” ist die ID, mit welcher der “type of rendering” mit TypoScript im “Setup” angesprochen werden kann. Nach dem Speichern kann im Sub-Template der soeben erstellte “type of rendering” ausgewählt werden.

Nun muss noch die Ansicht formatiert werden. Hierfür legt man mittels TypoScript im “Setup” (im Template-Modul “Setup” der Rootpage bearbeiten) einen neuen Seiten-Typ fest:

popup = PAGE
popup < page
popup {
	typeNum = 123
	10 = USER
	10 {
		childTemplate = popup
		userFunc = tx_templavoila_pi1->main_page
	}
}

Für “childTemplate” muss die zuvor angegebene ID angegeben werden. Mit “typeNum” legt man die Type-ID fest über die die spezielle Ansicht im Browser aufgerufen werden kann (z.B.: http://www.blogix.net/page?type=123). Damit nicht alle Einstellungen für die Page “popup” erneut festgelegt werden müssen, können diese mit “popup < page” übernommen werden.

Damit sich z.B. Thumbnails perfekt in das bestehende Design einer Seite integrieren, kann es nötig sein dieses auf ein quadratisches Format zuzuschneiden. Das Originalbild soll dabei so skaliert werden, dass die kürzere Seite des Bildes der Seitenlänge des Thumbnails entspricht. Die überstehenden Ränder der längeren Seite des zentriert positionierten Bildes sollen abgeschnitten werden. Mit der IMAGE-Funktionalität von TYPO3 lässt sich diese Anforderung mit relativ wenig Aufwand bewerkstelligen – dafür ist lediglich folgendes TypoScript nötig:

thumbnail = IMAGE
thumbnail {
	file = fileadmin/user_upload/image.jpg
	file.width = 100c
	file.height = 100c
}

In einer eigenen Extension würde der PHP-Code wie folgt aussehen:

$thumbnail = array();
$thumbnail['file'] = 'fileadmin/user_upload/image.jpg';
$thumbnail['file.']['width'] = '100c';
$thumbnail['file.']['height'] = '100c';
$thumbnail = $this->cObj->IMAGE($thumbnail);

In manchen Fällen kann es notwendig sein, dass man in TypoScript eine eigene Funktion für eine Condition benötigt. So könnte man z.B. dem Benutzer bei einer aufrechten HTTPS-Verbindung das Trust-Logo einblenden, damit dieser auf einen Blick weiß, dass er über eine gesicherte Verbindung auf die Seite zugreift.

Zuerst muss die Funktion implementiert werden, hierfür legt man z.B. die Datei “fileadmin/media/scripts/isHttps.php” mit folgendem Inhalt an:

function user_isHttps() {
	if ($_SERVER['HTTPS']) {
		return true;
	}
	return false;
}

Wichtig ist, dass die Funktion mit dem Prefix “user_” beginnt.

Die soeben erstellte Datei muss nun in TypoScript mit der folgenden Zeile eingebunden werden:

includeLibs.userFunc = fileadmin/media/scripts/isHttps.php

Nun kann die Funktion in einer Condition wie folgt verwendet werden:

[userFunc =  user_isHttps]
	temp.obj = TEXT
	temp.obj.value = die Ausgabe
[global]

Auch die Übergabe eines Parameters ist möglich (z.B. “[userFunc = user_Function('Parameter')]“) - die Funktion muss diesen dann natürlich auch erwarten (z.B. “function user_Function($parameter) {“).

In der Standardkonfiguration von TYPO3 werden externe Links mit target=”_blank” versehen, entsprechen somit nicht mehr dem XHTML 1.0 Strict-Standard und überschreiben die Browser-Voreinstellungen des Benutzers. Anstelle von XHTML 1.0 Strict könnte man den DOCTYPE wechseln, z.B. XHTML 1.0 Transitional verwenden. Meine Meinung ist allerdings, dass man als Webentwickler nicht in die bevorzugten Einstellungen der Benutzer eingreifen sollte und deshalb sollte man unter anderem target=”_blank” nicht verwenden. In TYPO3 sind zahlreiche Einstellungen mittels TypoScript vorzunehmen, um (alle) target=”_blank” aus den Links zu entfernen. Folgende Einstellungen sind hierfür erforderlich und müssen in das “CONSTANTS”-Feld des Templates der Root-Page eingefügt werden:

PAGE_TARGET =
content.pageFrameObj =
styles.content {
	links {
		extTarget =
		target =
	}
	loginform.target =
	mailform.target =
	searchresult {
		resultTarget =
		target =
	}
}

Um einzelnen Inhaltselementen (Content Elements) ein unterschiedliches Aussehen verpassen zu können gibt es in TYPO3 die Eigenschaft “Rahmen” (“Border” im englischen Backend ). Diese können mit ein paar Zeilen TypoScript einfach hinzugefügt werden. Zuerst muss in der “TSconfig” (Web > Seite; “Seiteneigenschaften bearbeiten”; Registerkarte “Optionen”) der Hauptseite (Rootpage) der neue Rahmen definiert werden:

TCEFORM.tt_content.section_frame {
  removeItems = 1,5,6,10,11,12,20,21
  addItems {
    100 = Roter Teaser
    110 = Blauer Teaser
  }
}

Standardmäßig vorhandene Rahmen werden mit “removeItems” entfernt, neue mit “addItems” hinzugefügt – in diesem Fall werden ein “Roter Teaser” mit der ID 100 und ein “Blauer Teaser” mit der ID 110. Es empfiehlt sich IDs über 100 zu verwenden, damit es zu keinen Überschneidungen mit den vordefinierten Rahmen kommt, sollten diese auch verwendet/benötigt werden.

Als nächstes muss im “Setup” (Web > Template; “Setup bearbeiten”) der Hauptseite das nötige HTML mittels TypoScript hinzugefügt werden, damit das Inhaltselement mit dem ausgewählten “Rahmen” dargestellt werden kann:

tt_content.stdWrap.innerWrap.cObject = CASE
tt_content.stdWrap.innerWrap.cObject {
  key.field = section_frame

  100 = TEXT
  100.value = <div class="teaser-red"> | </div>

  110 = TEXT
  110.value = <div class="teaser-blue"> | </div>
}

Im CSS, das bereits eingebunden sein sollte, kann nun das Aussehen der beiden Teaser festgelegt werden:

div.teaser-red {
  border: 1px solid #ff0000;
  color: #ff0000;
}
div.teaser-blue {
  border: 1px solid #0000ff;
  color: #0000ff;
}