Monatsarchiv Dezember 2011

TemplaVoila Backend Layout

Geschrieben von in TYPO3 am

Um im TemplataVoila für definierte Content Bereiche ein Layout in Backend zu definieren, gibt es zwei Möglichkeit. Die erste ist, das Layout im XML im DataStructure-Datensatz zu hinterlegen. Die zweite ist eine separate HTML-Datei, die die Layout-Information fürs Backend enthält. Variante eins ist dann sinnvoll, wenn jedes Data Structure nur einmal verwendet wird, außerdem spart man sich Dateien. Variante zwei ist dann sinnvoll, wenn die gleiche Data Structure mit unterschiedlichen Template Objects verwendet werden soll. In beiden Fällen muss man beachten, dass sich nur Inhaltscontainer layouten lassen (was schade ist).
Layout innerhalb der Data Structure:

<meta type="array">
	<langDisable>1</langDisable>
	<beLayout><![CDATA[
		<table border="0" cellpadding="2" cellspacing="2" width="100%">
			<tr>
				<td valign="top" width="65%">###field_column1###</td>
				<td valign="top" width="35%">###field_column2###</td>
			</tr>
		</table>
	]]></beLayout>
</meta>

Im Tag meta wird ein Tag beLayout definiert (Schreibweise beachten) und darin mit old school HTML (also Tabellen) das Layout im Backend definiert.
Layout innerhalb einer separaten Datei:

<table border="0" cellpadding="2" cellspacing="2" width="100%">
	<tr>
		<td valign="top" width="64%">###field_column1###</td>
		<td valign="top" width="34%">###field_column2###</td>
	</tr>
</table>

Es reicht aus, wenn die Datei nur das Layout enthält – keine zusätzlichen Tags. Dann speichert man es in eine HTML-Datei und wählt diese Datei im Feld BE Layout Template File im Template Object aus.

Tags:

Geschrieben in TYPO3 | Kommentare deaktiviert für TemplaVoila Backend Layout

Image Load Event in IE

Geschrieben von in javascript am

In einer kleinen Animation mit jQuery sollen bestimmte Aktionen ausgeführt werden, wenn Bilder geladen sind. Dazu habe ich ein Image Load Event verwendet:

$image1 = $('<img />').attr('src', circle1Img).attr('width', 250).attr('height', 250).
load( function() {
	$('#animation .circle-1 .image').html('');
	$('#animation .circle-1 .image').append($(this));
});

Das hat auch wunderbar funktioniert, außer im IE8 (vermutlich auch IE7), wobei sich der IE8 im Legacy Mode korrekt verhält. Wie meine Recherche ergab, wird das Load Event vorzeitig gefeuert, weil das Bild aus dem Browser-Cache geladen wird. Das ist aber nur im IE so (wen wundest es eigentlich noch). Ein Lösung fand ich im Blog von David Walsh. Damit es auch im IE funktioniert, muss das src-Attribut erst gesetzt werden, wenn das Load Event definiert ist:

$image1 = $('<img />').attr('src', circle1Img).attr('width', 250).attr('height', 250).
load( function() {
	$('#animation .circle-1 .image').html('');
	$('#animation .circle-1 .image').append($(this));
});
$image1.attr('src', circle1Static);

Das Problem tritt natürlich nicht auf, wenn man die Bilder nicht aus dem Cache lädt:

var circle1Img = 'fileadmin/templates/img/animcircle_01.gif?' + Math.floor(Math.random()*10000);

Geschrieben in javascript | Kommentare deaktiviert für Image Load Event in IE

Überschriften im RTE umbenennen

Geschrieben von in TYPO3 am

Die Überschriften in TYPO3 umzubenennen, so dass die Bezeichnungen für den Redakteur sprechender sind, ist recht einfach. Dazu braucht man folgenden Schnipsel im User oder Page-TS Config:

TCEFORM.tt_content.header_layout {
	altLabels.1 = H1: groß und blau
	altLabels.2 = H2: groß und schwarz
	altLabels.3 = H3: mittel und blau
	altLabels.4 = H4: mittel und grau
}

Natürlich wäre es schön, wenn die Überschriften im RTE auch die entsprechenden Bezeichnungen hätten, dazu einfach folgendes in die RTE Konfiguration rein und schon klappts (allerdings seit TYPO3 4.3).

RTE.default {
...
	buttons.formatblock.items {
		h1.label = H1: groß und blau
		h2.label = H2: groß und schwarz
		h3.label = H3: mittel und blau
		h4.label = H4: mittel und grau
	}
...

Tags: ,

Geschrieben in TYPO3 | Kommentare deaktiviert für Überschriften im RTE umbenennen