Passend zum Wetter präsentiert sich das neue Backend ganz in grau.

Und weil Bilder mehr als tausend Worte sagen, besteht dieser Beitrag nur noch aus ein paar Screenshots.

Das neue Installations Tool ist sehr schick geworden.

Die Listenansicht sieht sehr aufgeräumt aus.

Die Icons blenden sich nur noch bei Mouseover ein.

Das Bearbeiten von Inhaltselementen ist übersichtlicher.

Die Kiwi Extensions sind auch verfügbar und funktionieren anscheinend ganz gut.

Benutzer lassen sich jetzt vielfältig filtern und sortieren.

Soviel zu ein paar Eindrücken aus dem neuen, schönen Backend. Den Download gibt es auf den offiziellen Downloadseiten. Ich bin gespannt auf eure Meinung.

Aber damit ist jetzt Schluss! Die neue Version legt ihre Container unabhängig von den Rahmen um den Inhalt. Zeitnah im Repository verfügbar. Auf meiner privaten Seite gibt es eine Demonstration und im folgenden Eintrag ein paar technische Erklärungen.

Für Redakteure

Die Funktionsweise für Redakteure ist sehr einfach. Über die Seiteneigenschaften lässt sich bestimmen, ob mehrere Panels gleichzeitig offen sein dürfen.

Jedes Inhaltselement wiederum hat zwei Eigenschaften, Aufklappbar und Offen.

Die erste Option initalisiert den Effekt, die zweite öffnet das Inhaltselement beim laden der Seite. Das wars! Eine Beispiel gibt es auf meiner privaten Seite.

Für Techniker

Der kleinere Teil der Arbeit wird vom mitgelieferten Typoscript übernommen. Über die Eigenschaft tt_content.stdWrap.innerWrap.prepend und append wird ein DIV Container um den Inhalt gelegt (div.ka-panel) und je nach gewählten Eigenschaften die Klasse open oder close hinzugefügt.

In Version 4.3 hat sich dieser Teil grundlegend geändert. Inhaltselemente werden jetzt immer innerhalb eines DIV Containers ausgegeben was ich wesentlich besser finde als die nervigen Links ala <a href="#c123"></a>. Das hat leider zur Folge, dass in älteren Versionen der tt_content.stdWrap.innerWrap nur ausgeführt wird, wenn ein Rahmen ausgewählt wurde. Um das zu verhindern fügt die Extension einen Standardwert hinzu, damit die Eigenschaft aufjedenfall greift. Möglich wird das über die Abfrage der eingestellten TYPO3 Version.

[compatVersion < 4.3]

tt_content.stdWrap.innerWrap.cObject.default = TEXT

tt_content.stdWrap.innerWrap.cObject.default.value = |

[end]

Der größere Teil der Arbeit erfolgt als jQuery Script. Das Kiwi Accordion arbeitet mit jQuery, bringt das Framework aber selbst nicht mit. Ich bin bei der Entwicklung davon ausgegangen, dass es in jedem Projekt integriert ist.

Im Script wird jeder Container mit der Klasse ka-panel untersucht und für die weitere Verwendung angepasst. Dabei wird mit $(':header:first', '.ka-panel') die erste Überschrift gesucht und als Handler benutzt. Alle Elemente nach der Überschrift werden mit einem Container umschlossen (div.ka-content) und bei Klick ein- oder ausgeblendet.

Bei Mauskontakt erhält das Panel zusätzlich die Klasse hover, damit lassen sich dann Pfeile anzeigen oder Farben ändern, je nach Vorgabe.

Wenn bei der Initialisierung etwas nicht funktioniert, gibt die Extension ein paar Hinweise in der Firebug Konsole aus. Ich hoffe das hilft weiter. Ansonsten sei auf die Demo auf meiner Seite verwiesen.

Getestet hab ich die Extension mit TYPO3 Version 4.3, 4.3.1 und 4.2.6. Über weitere Kompatibilitätshinweise, Fragen und Anregungen freue ich mich natürlich sehr.

• Kiwi Accordion im TYPO3 Repository
• Kiwi Accordion 1.6.0
• Demonstration auf paul-lunow.de

Danke für die ganzen Mails und die netten Worte! Frohes rumklappen.

Die Teaser sind entweder Teaserdatensätze (mit Titel, Inhalt, Bild und Link), ganze Seiten oder einzelne Inhaltselemente. Fertig! Auf der Startseite kann der Redakteur jetzt ganz genau bestimmen, auf welche Inhalte die Benutzer aufmerksam gemacht werden sollen und in welcher Reihenfolge.

Die Extension gibts im TYPO3 Repository oder auf GitHub - live im Einsatz bisher auf unserer Firmenpräsenz.

Berechtigung

Es liegt natürlich nahe tt_news einzusetzen. Aber erst sagt der Redakteur mir, ich soll das Datum ausblenden, denn regelmäßige News gibt es  gar nicht. Als nächstes will er die Reihenfolge ändern und ich sage, pass doch einfach das Datum entsprechend der Reihenfolge an. Klar, das geht aber so richtig genial ist das nicht.

Zumal die meisten Hinweise sich auf entsprechende Seiten in der Präsenz beziehen, auf externe Links oder einfach nur einen kurzen Hinweis darstellen. Das geht jetzt eleganter.

Inhalte

Es können verschiedene Inhalte vorgestellt werden. Die Extension bringt eigene Datensätze mit welche Titel, Inhalt, Bild und einen Link aufnehmen. Es können aber auch Seiten oder Seiteninhalte angeteast werden.

Installation

Entweder man holt sich die stabile Version aus dem Repository oder die aktuellste, brandheiße aus meinem ersten Projekt auf GitHub. Ein großartiges Portal!

Die restliche Installation ist alt bekannt und ganz normal. Der Kiwi Teaser bindet standardmäßig jQuery ins Projekt ein um ein paar coole Extras zu ermöglichen.

Konfiguration

Über Typoscript hat man viele Einstellungsmöglichkeiten. Alles natürlich unter plugin.tx_kiwiteaser_pi1 im Template - das schreibe ich jetzt nicht jedesmal mit auf. Die angegebenen Typoscriptschnipsel stellen jeweils die Standardeinstellung dar.

include.css.standard = 1

Mit dieser Anweisung wird ein minimales Stylesheet geladen welches dafür sorgt das die Boxen nebeneinander stehen und einen Abstand zueinander haben.

include.javascript.jquery = 1

Bindet die aktuelle jQuery Version ein. Hat man diese schon im Projekt sollte man diese Eigenschaft unbedingt mit include.javascript.jquery > löschen (auf diese Art kann man jeden include verhindern).

include.javascript.clickbox = 1

Holt mein Plugin Clickbox ins Projekt, welches die komplette Teaserbox klickbar macht und nicht nur den kleinen Link. Mehr zur Clickbox gibts hier.

include.javascript.height = 1

Bindet ein Script ein, welches dafür sorgt das alle Teaserboxen die gleiche Höhe haben. Besonders praktisch wenn man einen Rahmen oder eine Hintergrundfarbe gesetzt hat.

template.file = EXT:kiwi_teaser/res/html/template.html

Der Pfad zum HTML Template. Das Standardtemplate sollte man sich unbedingt angucken und die Klassennamen beibehalten, denn sonst kriegen die oben erwähnten Scripte Schwierigkeiten.

stdWrap

Der StandardWrap ist eine richtig schöne Sache! Damit kann man jeden Inhalt mit Typoscript bearbeiten bevor er ausgegeben wird. Dieser kann auf alle Felder angewendet werden: title, image, link und content. Zum Beispiel:

stdWrap.title.wrap = <b>|</b>

Außerdem kann man für verschiedene Quellen verschiedene Optionen angeben. Seiten kommen aus der Tabelle pages, Seiteninhalte aus tt_content und die Standardinhalte aus tx_kiwiteaser_content. Mit diesem Wissen kann man die Ausgabe je nach Datenbank bestimmen. Möchte man also die Überschriften von Seiten nicht fett sondern kursiv darstellen, reicht folgende Anweisung:

stdWrap.title.pages.wrap = <i>|</i>

Besonders wichtig ist diese Möglichkeit für den Linktext. Dieser wird über die Eigenschaft link.value gesetzt.

stdWrap.link.value = Mehr...

Die Extension setzt den generierten oder angegebenen Wert vor der Verarbeitung in das Feld stdWrap.link.typolink.parameter. Das typolink Objekt lässt sich natürlich trotzdem noch erweitern. Will man alle Teaserlinks in einem neuen Fenster öffnen geht das ganz einfach:

stdWrap.link.typolink.target = _blank

Mapping der Inhalte

Um zu entscheiden, welche Daten aus einem Datensatz den Titel und welche z.B. den Inhalt darstellen, gibt es eine Mappingtabelle im Typoscript. In der Standardkonfiguration wird der Untertitel einer Seite als Inhalt benutzt. Das passiert über folgende Angabe:

tables.pages.content = subtitle

Dabei bezeichnet der Schlüssel das Feld im Teaser und der Wert das Feld in der Zieltabelle. Das lässt sich je nach Anforderung beliebig anpassen. Wenn die Eigenschaft link leer ist, erzeugt die Extension den Link je nach Tabelle automatisch.

Template

Im Template stehen verschiedene Marker zur Verfügung:

• ###TITLE### Ein Beispieltitel
• ###IMAGE### uplodas/media/picture.jpg
• ###CONTENT### Das ist je nach eingabe verschieden.
• ###LINK### <a href="index.php?id=123">Mehr...</a>
• ###CLASS### teaser-first port1

Image beinhaltet den originalen Inhalt aus der Datenbank, also im Idealfall den Pfad zum Bild, sollte also noch mit einem <img> Tag gewrappt oder per Javascript weiter verarbeitet werden.

Link ist ein kompletter <a> Tag - generiert über Typoscript.

Class wird automatisch gesetzt, je nach Position des Teasers steht da first-teaser oder last-teaser drin. Außerdem kriegt jeder Teaser die Klasse portX wobei das X für die aktuelle Position steht. So kann man also den zweiten Teaser gezielt ansprechen:

.tx-kiwiteaser-pi1 .port2 {

  font-size:200%;

}

Alpha

Heute, am 17.12.2009 habe ich die erste Version fertig gestellt und in meinem Projekt eingesetzt. Als nächstes wird sie in Kundenprojekt eingesetzt und die Redakteure darauf losgelassen. Dabei werde ich sicher noch die eine oder andere Erweiterung entwickeln, mit mehreren Updates ist also zu rechnen. Auf dem neusten Stand ist man natürlich bei Twitter.

Ausblick

Der wichtigeste Punkt auf meiner Liste ist die Unterstützung von tt_news. Damit ist es dann auch möglich eine schön ausgearbeitete Nachricht zu teasern. Natürlich muss sich das nicht auf tt_news beschränken, sondern kann im Prinzip jeden beliebigen Datensatz beinhalten!

Darüber hinaus sind die Pläne natürlich groß und die Möglichkeiten auch. Ich denke an jQuery Effekte wie das faden von Inhalten, die Integration vom Kiwi Slider oder das dynamische Anpassen der Inhalte.

Da wird noch einiges passieren!

Fazit

Ich möchte kein zweites tt_news programmieren, hier geht es wirklich nur um das Teasern von eigenen und fremden Inhalten. So bequem und einfach für die Redakteure wie möglich.

Ich hoffe ihr könnt die Extension gut einsetzen - über Ideen, Fragen und Anregungen in den Kommentaren freue ich mich natürlich. Und wenn jemand per GitHub mitarbeiten möchte, ist er hiermit herzlich eingeladen.

Ganz unauffällig sei auch noch auf meine Firma hingewiesen - wenn du die Extension oder ähnliches für dein Projekt brauchst, aber nicht selbst programmieren möchtest oder kannst, dann ist der Kiwi Service ein verantwortungsbewusster und kompetenter Partner!

Wenn dir der Artikel gefällt und du mit uns zusammen mehr solche Lösungen entwickeln möchtest, an das Internet und OpenSource glaubst und einen Job in Berlin suchst, dann bewirb dich bei uns. Wir suchen neue Freunde!

Danke fürs lesen, und fröhliches teasen!

Dieses Tutorial bezieht sich auf TYPO3 Version 4.3, aber ich vermute es funktioniert in allen neueren Versionen. Los gehts!

Vorbereitungen

Eine aktuelle TYPO3 Installation mit benötigten Extensions (RealURL vorallem) und ein paar Domains die alle in das gleiche Verzeichnis zeigen. Das reicht.

Die Seitenstruktur

Direkt unter die Weltkugel kommt die Root Seite. Diese beinhaltet ein grundlegendes Typoscript, dass sich alle Domains teilen. Es lohnt sich ein einfaches Layout aufzubauen und alle benötigten Marker anzulegen, dann kann man später schnell etwas zeigen. Auch tt_news, mailformplus, kiwi_slider oder was auch immer kann man hier schonmal gut Vorkonfigurieren.

Unter Root kriegt jede Domain eine eigene Seite. Die besitzen folgende Eigenschaften:

• Typ: Verweis - auf erste Unterseite
• Im Menü verbergen
• Seitentitel wie die Domain
• Nicht in sprechende URL aufnehmen

Jeder Seite müssen über Liste > Neuer Datensatz > System Records > Domäne die entsprechenden Domains zugewiesen werden. Am besten man legt als erstes die Hauptdomain an, zum Beispiel www.kiwi-service.de - ohne Umleitung.

Ein zweiter Datensatz kriegt dann die Domäne kiwi-service.de mit Umleitung auf www.kiwi-service.de. Die Checkbox Parameter zur Umleitungs-URL übertragen sollte man anschalten und speichern.

Typoscript

Auf der Root Seite lohnt es sich ein fertiges Template aufzubauen. Die wichtigesten Marker, wie Menü, Inhalt und Sidebar empfehle ich als COA Elemente anzulegen, wobei der Hauptinhalt immer auf Ebene 50 eingebunden wird. Damit kann man auf den Unterseiten einfach die Marker erweitern.

Über Konstanten lässt sich sehr viel steuern. Zum Beispiel die Start ID für das Menü. Dazu legt man in den Konstanten einen beliebigen Namen fest:

menu.special.value = 123

Im Typoscript kann man auf diese Eigenschaften dann über die Syntax {$NAME} zugreifen. Vereinfacht könnte das dann so aussehen:

MENU = COA

MENU.50 = TMENU

MENU.50.special.value = {$menu.special.value}

Mit diesem Vorgehen kann dann jede Seite grundlegend über Konstanten steuern. Man sollte es aber nicht übertreiben. Ideal sind die Grundeinstellungen damit man etwas sieht und klicken kann, alle Strukur- und Layoutanpassungen passieren dann gezielt im Extensiontemplate der Seite.

Am wichtigesten ist die Bekanntmachung der BaseURL. Entweder über Konstanten oder direkt im Template:

config.baseURL = http://www.kiwi-service.de

RealURL

Jetzt zum schönsten Teil (leichte Ironie), damit man sich über die netten Domains freuen kann: RealURL. Installiert, ohne automatische Konfiguration ist die wichtigste Aufgabe, für jede Domain die richtige rootpage_id zu setzen.

Um sowenig wie möglich doppelt zu schreiben, legt man dafür als erstes eine Standardkonfiguration an:

$tx_realurl_config = array(

'init' => array(

'enableCHashCache' => true,

'appendMissingSlash' => 'ifNotFile',

'enableUrlDecodeCache' => true,

'enableUrlEncodeCache' => true,

'emptyUrlReturnValue' => '/',

),

'preVars' => array(),

'postVarSets' => array(

'_DEFAULT' => array(),

),

'pagePath' => array(

'type' => 'user',

'userFunc' => 'EXT:realurl/class.tx_realurl_advanced.php:&tx_realurl_advanced->main',

'spaceCharacter' => '_',

'languageGetVar' => 'L',

'expireDays' => 3,

),

);

Die ist für alle gleich und sollte auch Konfigurationen für tt_news und andere Extensions beinhalten. Diese wird jetzt jeder Hauptdomain zugewiesen.

$TYPO3_CONF_VARS['EXTCONF']['realurl'] = array(

  'www.alexandrepeschel.de' => $tx_realurl_config,

  'www.kiwi-service.de' => $tx_realurl_config,

);

Die Aufrufe ohne www kann man vernachlässigen, weil TYPO3 sie weiterleitet. Als nächstes wird für jede Domain die UID der entsprechenden TYPO3 Einstiegsseite angegeben. Damit versteht RealURL dann, welcher Teil des Seitenbaums zu welcher Domain gehört.

$TYPO3_CONF_VARS['EXTCONF']['realurl']['www.kiwi-service.de']['pagePath']['rootpage_id'] = 12;

$TYPO3_CONF_VARS['EXTCONF']['realurl']['www.alexandrepeschel.de']['pagePath']['rootpage_id'] = 34;

Beim rumprobieren sollte man daran denken, dass man mit dem Leeren vom Frontend-Cache nicht den RealURL-Cache löscht! Das passiert über Info > Root Seite > RealURL-Verwaltung. Da sind sehr interessante Informationen drin versteckt!

Fazit

Das war schnell und effektiv! Wer sich das in Aktion ansehen will, geht auf unsere neue Firmenseite www.kiwi-service.de und auf www.alexandrepeschel.de, die Seite meines lieben Kollegen. Im Moment ist das zum Teil im Aufbau und demnächst wird meine persönliche Seite auch dahin umziehen. Aber erst wenn die Seite auf dem neuen Server liegt!

Wenn du Spaß an diesem Tutorial hattest, und Lust hast mit uns noch viel mehr geilen Scheiß zu entwickeln, dann bewirb dich bei uns! Wir suchen Webentwickler mit Ideen und Tatendrang!

Wenn aber das unbedingt nur von einer Lightbox kommt, dann sollte man sich kurz hinsetzen, einen geeigneten Klon aussuchen (hier ist die große Lightbox Matrix) und die Klickvergrößerung von TYPO3 damit ersetzen. Das ist schnell, effektiv und in diesem Beitrag erklärt.

Vorbereitungen

Für mein aktuelles Projekt habe ich mich für den Lightbox Clone TopUp entschieden. Sieht sehr vielversprechend aus. Also welcher Klone auch immer: Daten herunterladen und ins Projekt einbinden. Dazu gehören mind. jQuery und das entsprechende Plugin, in vielen Fällen auch noch eine CSS Datei. Firebug verrät im Script Reiter ob es funktioniert hat.

TopUp benötigt keine CSS Datei, dafür aber einen Bilder- und einen Players-Ordner in dem SWF Dateien gespeichert sind um verschiedene Medien wiederzugeben. Per JavaScript können die Pfade angepasst werden:

TopUp.host = 'http://www.kiwi-service.de/';

TopUp.images_path = 'fileadmin/template/img/topup/';

TopUp.players_path = 'fileadmin/template/flash/';

JavaScript einbinden

Eine Besonderheit bringt TopUp mit: Es lädt dynamisch die benötigten JavaScriptdateien nach. Dafür braucht er den kompletten javascripts/jquery Ordner. Dieser muss im gleichen Ordner liegen wie top_up-min.js.

fileadmin/template/js/top_up-min.js

fileadmin/template/js/jquery/...

Test

Alle benötigten Dateien sind eingebunden und in Firebug sichtbar. Um zu testen ob es funktioniert, füge ich ein Inhaltselement vom Typ HTML ein und schreibe mein eigenes Bild rein. Testbilder sind im Images Ordner vorhanden.

<a href="fileadmin/template/img/topup/photos/1.jpg" class="top_up">

  <img src="fileadmin/template/img/topup/thumbnails/1.jpg">

</a>

Funktioniert, wunderbar! Wenn nicht, dann die eigene Seite mit den Beispielen vergleichen.

Typoscript

Nun muss man TYPO3 noch das hässliche JavaScript PopUp austreiben. Hier mein Konfiguration für Version 4.3

temp.imageLinkWrap = 1

temp.imageLinkWrap {

enable = 1

typolink {

parameter.cObject = IMG_RESOURCE

parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile

parameter.cObject.file.maxW = {$styles.content.imgtext.maxW}

parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
title.field = imagecaption // title

title.split.token.char = 10

title.if.isTrue.field = imagecaption // header

title.split.token.char = 10

title.split.returnKey.data = register : IMAGE_NUM_CURRENT

parameter.cObject = IMG_RESOURCE

parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile

ATagParams = target="_blank"

}

}
tt_content.image.20.1.imageLinkWrap >

tt_content.image.20.1.imageLinkWrap < temp.imageLinkWrap 

Als erstes wird das temporäre Objekt temp.imageLinkWrap erzeugt und konfiguriert. Interessant ist die letzte Angabe ATagParams - darüber gibt man jedem Link die Klasse top_up mit, damit das Plugin sich um die Bilder kümmert.

Anschließend wird die Standardvergrößerung in tt_content.image.20.1.imageLinkWrap überschrieben. Cache leeren und Seite neuladen, fertig!

TopUp Spezialitäten

Dieses TopUp ist wirklich ein schönes Teil. Mit der Funktion addPresets() lassen sich für Links in DOM Bereichen Voreinstellungen treffen. Zum Beispiel alle Bilder die über ein Inhaltselement eingestellt sind, zu einer Gruppe zusammenfassen:

TopUp.addPresets({

".csc-textpic-imagewrap a": {

group: "images"

}

});

Das bedeutet alle TopUp-Links im Div .csc-textpic-imagewrap werden der Gruppe images zugewiesen. Im Overlay gibts dann Vor- und Zurückpfeile.

Fazit

Die Initialisierung und Einstellungen einer Lightbox variieren natürlich. Es gibt aber ein paar schöne und elegante Tools deren Einsatz sich lohnen. Vorallem im Zusammenspiel mit der brand neuen TYPO3 Version 4.3 - ein großartiger Schritt mit schönen Verbesserungen. Unbedingt ansehen. Und TopUp einbinden!

Eine von vielen schönen Kleinigkeiten ist Olis Notziblog auf der rechten Seite. Es handelt sich um ein Widget in dem immer mal wieder, unkompliziert neue Inhalte eingetragen werden sollen. Das Besondere ist, dass ein Inhalt aus einem Bild (der Handschrift) und der Abschrift besteht. Sprich Text mit Bild. Das kommt dem geschulten TYPO3 Ohr natürlich bekannt vor. Und genauso werden die Daten vorgehalten. In Contentelementen.

Dieses Tutorial beschreibt die Einrichtung, Verwaltung und Ausgabe eines Miniblogs, der einfach zu pflegen ist und Informationen ohne große Funktionen zur Verfügung stellt.

Backend

Es wird eine nicht im Menü sichtbare Seite angelegt, dem Redakteur freigegeben und die ID (z.B. 50) notiert. Hier sollte man jetzt testweise einen Inhalt anlegen. Soweit sehr einfach.

Typoscript

Entweder wird ein eigener Marker im Template festgelegt, oder, was ich empfehlen würde, der Marker für die rechte Spalte wird als COA angelegt. COA beschreibt eine Sammlung von Objekten die nacheinander ausgegeben werden. Im ersten Schritt soll schlicht der Inhalt der rechten Spalte aus dem Backend ausgegeben werden:

page.10.marks.RIGHT = COA

page.10.marks.RIGHT.50 = CONTENT

page.10.marks.RIGHT.50 {

  table = tt_content

  select.orderBy = sorting

  select.where = colPos = 2

  select.languageField = sys_language_uid

}

Mit dieser Struktur, die man auch bedenkenlos für die linke und die Hauptspalte benutzen kann, hat man absolute Flexibilität auf den Unterseiten. Olis Blog erscheint nur auf der Startseite. Also wird ein Extensiontemplate angelegt und der Marker RIGHT erweitert:

page.10.marks.RIGHT.40 = PHP_SCRIPT

page.10.marks.RIGHT.40.file = fileadmin/template/scripts/olis_notizblog.php

Vor dem Menü wird dem Marker ein PHP Script hinzugefügt.

PHP Script

Jetzt ist es nicht mehr weit. Hinter oben angegebenen Pfad erstellt man eine Datei. Zwei Dinge muss man beachten:

1. Alle Inhalte die später im Marker erscheinen sollen, müssen in die Variable $content geschrieben werden
2. Auch wenn der Testserver die PHP Kurzschreibweise <? ... ?> unterstützt, sollte man diese nicht mehr verwenden! In PHP 6 soll sie abgeschafft werden und etliche Konfigurationen verbieten sie jetzt schon, was zur Folge hat, dass der Code einfach als Text ausgegeben wird.

Die erste Aufgabe besteht darin, das neuste Element aus der tt_content Tabelle auszulesen. Es muss also nach Zeit sortiert werden und das Element muss auf der richtigen Seite gespeichert werden (ID 50). Das erreicht man über die Abfrage der Spalte PID.

$posts = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows(

  'uid, header, bodytext, image',

  'tt_content',

  'pid = "50" AND deleted = "0" AND hidden = "0"',

  '',

  'sorting ASC',

  1

);

Der äußerst praktische Befehl exec_SELECTgetRows erwartet folgende Parameter: auszulesende Felder, gewünschte Tabelle, WHERE-Bedingung, eventuell Gruppierung, Bedingung zum Sortieren und die Anzahl der erwarteten Ergebnisse.

Das kann man sich natürlich nur schwer merken, aber dafür gibt es zum Glück eine Dokumentation zum nachsehen.

exec_SELECTgetRows liefert im Gegensatz zu exec_SELECTquery keine Datenbankressource zurück, sondern ein Objekt über alle gefundenen Zeilen. In unserem Fall ist das nur eine und es wird auch immer eine bleiben, deshalb kann man immer so an sie herankommen:

$post = $posts[0];

Jetzt ist es nur noch eine Frage der Anforderung und einer testweisen Ausgabe mit print_r($post) um ein Ergebnis zu erhalten:

$content = '<div class="blog">';

$content.= '<h3>'.$post['header'].'</h3>';

$content.= '<p>'.$post['bodytext'].'</p>';

$content.= '</div>';

Fazit

Fertig ist der Lack/Blog! Über dem Hauptmenü erscheint jetzt immer das neuste Element aus der versteckten Seite. Sicher hätte man das ganze auch mit puren Typoscript lösen können, aber meiner Ansicht nach ist diese Lösung flexibler. Eventuell sollen die Inhalte demnächst auf Twitter, Facebook, MySpace und SpiegelOnline erscheinen. Da ist es dann schön ein Script zur Verfügung zu haben, in dem man sich austoben kann.

Bleibt noch zu sagen, hört mehr Hörbücher!!!

Legt der Redakteur eine neue Seite Namens "Zimmerschlacht" an, könnte er anschließend in die Listenansicht wechseln und eine neue News Kategorie anlegen. Aber mach das mal einem DAR (analog zu DAU) klar. Und warum den Mund fusselig reden, wenn das auch automatisch geht?!

Es gibt in TYPO3 eine Möglichkeit mit einem Hook in das Speichern von Datensätzen einzugreifen. Da kann man sich dann austoben. Es funktioniert auch mit DAM Kategorien und jeder anderen vorstellbaren Datenbankanforderung.

Vorbereitung

Wenn der Redakteur in einem bestimmten Zweig des Seitenbaums eine Aktion auslöst (neue Seite erstellen, bearbeiten oder löschen) muss mit einem Script darauf reagiert werden. Dafür legt man an seinem Lieblingsplatz eine Datei an und merkt sich sowohl Pfad und Namen. Mein Vorschlag:

fileadmin/template/hooks/class.tx_createCategories_tcemainprocdm.php

In dieser Datei sucht TYPO3 später eine Klasse deren Namen wir auch selbst bestimmen können.

class tx_createCategories_tcemainprocdm {

}

Hooks verstehen

Hooks sind Funktionen die während der Abarbeitung eines Scripts aufgerufen werden. Meistens erstellt TYPO3 ein Objekt von der übergebenen Klasse und das Script sucht nach einer passenden Funktion mit fest definiertem Namen.

Hooks suchen

Google ist natürlich Anlaufpunkt Nummer eins, aber auch der Quelltext der betreffenden Datei bietet gute Anhaltspunkte. Wie die Vorschläge oben schon deutlich machen geht es mir um class.t3lib_tcemain.php welches sich um sämtliche Datenbankoperationen kümmert. Die Core API bietet einen guten Anlaufpunkt. Nach einigem hin und her weiß man dann, dass man den Hook Namens processDatamap_afterDatabaseOperations braucht.

Hooks registrieren

Über die Datei localconf.php wird das $GLOBALS Array erweitert. Die genauen Bezeichnungen findet man meistens in der Dokumentation oder dem Quelltext. Um auf das verändern von Seiten zu reagieren muss man folgende Zeile hinzufügen:

$GLOBALS["TYPO3_CONF_VARS"]["SC_OPTIONS"]["t3lib/class.t3lib_tcemain.php"]["processDatamapClass"][] = "fileadmin/template/hooks/class.tx_createCategories_tcemainprocdm.php:tx_createCategories_tcemainprocdm";

Der Inhalt dieser Angabe ist in zwei Teile durch ein Doppelpunkt geteilt: Der erste gibt den Pfad zur Datei an, der zweite den Namen der zu initalisierenden Klasse.

Nicht vergessen den Cache zu löschen!!! Sonst ärgert man sich zu tode!

Logik hinzufügen

Bis hierher alles klar? TYPO3 erstellt eine neue Seite, initalisiert anschließend das eben angegebene Objekt und sucht darin die Funktion processDatamap_afterDatabaseOperations und führt sie aus. In dem Script im fileadmin legt man also los und führt aus was man ausführen muss:

class tx_createCategories_tcemainprocdm {

  function processDatamap_afterDatabaseOperations($status, $table, $id, $fieldArray, &$reference) {

  }

}

Spannend sind die Parameter:

• $status gibt an, was der User getan hat. z.B. "new"
• $table sagt, in welcher Tabelle der User es getan hat. z.B. "pages"
• $id beinhaltet die UID des Datensatzes (aber mit Einschränkungen! Siehe unten).
• $fieldArray enthält die neuen Felder. Wenn der Redakteur nur den Titel geändert hat, dann steht hier nur der neue Titel in einem assoziativen Array drin.
• $reference ist ein Objekt und beinhaltet die ggf. schon vorhandenen Inhalte.

Mit diesen Informationen ausgerüstet kann man schon eine ganze Menge erreichen. Mit einem echo kann man sich auch ohne Probleme Daten ausgeben. Die erscheinen dann über dem Formular im Backend. Sieht nicht schön aus, aber man kann etwas lesen.

Die richtige UID erkennen

Das Problem ist, dass bei einem neuen Datensatz im Parameter $id eine temporäre UID gespeichert ist. Irgendwas wie NEW_2352. Also definitiv keine Integer sondern ein String. Der Hook wird aber nach dem Speichern ausgeführt, deshalb muss man sich über $reference die richtige UID besorgen:

if(!is_numeric($id)) {

  $id = $reference->substNEWwithIDs[$id];

}

Das habe ich auch nur in irgendeiner Mailingliste aufgeschnappt. Selbsterklärend ist etwas anderes.

Neue Kategorien anlegen

Zurück zur Anforderung. Wenn ein Redakteur eine neue Seite anlegt, muss eine neue Kategorie angelegt werden. Dafür muss als erstes geprüft werden, ob überhaupt eine Seite angelegt wurde und der Titel geändert wurde:

if($table == 'pages' && $id > 0 && !empty($fieldArray['title']) {

  //hier gehts weiter

}

In dieser Abfrage muss auch noch geklärt werden, ob sich die Seite an der richtigen Stelle befindet. Das kann man über die PID erreichen oder wie in meinem Fall über einen eigenen Seitentyp. Beide Angaben findet man im Array $reference->checkValue_currentRecord.

if($status == 'new')

Endlich mal wieder etwas schönes. Alternativ könnte man auch mit Switch auf die verschiedenen Operationen reagieren. Je nach Vorliebe. Wurde also eine neue Seite an der richtigen Position angelegt, wird nichts weiter getan als eine Zeile in der Tabelle tt_news_cat zu speichern:

$GLOBALS['TYPO3_DB']->exec_INSERTquery(

  'tt_news_cat',

  array(

  [tab]'pid' => 194,

  [tab]'title' => $fieldArray['title'],

  [tab]'shortcut' => $id

  )

);

Seiten und Kategorien umbenennen

Da kommt nochmal das Array $reference->checkValue_currentRecord zum Einsatz. Wird eine Seite aktualisiert steht dort der alte Titel drin und im $fieldArray der neue. Schöne Sache das und nur eine handvoll Zeilen um die entsprechende Kategorie zu identifizieren und umzubenennen:

$GLOBALS['TYPO3_DB']->exec_UPDATEquery(

  'tt_news_cat',

  'title = "'.$reference->checkValue_currentRecord['title'].'"',

  array(

  [tab]'title' => $fieldArray['title']

  )

);

Nach diesen beiden Beispielen sollte das Löschen auch keine Schwierigkeiten mehr bereiten. Der Redakteur wird es gar nicht bemerken, aber der effektive Teil vom Webentwicklerherz schlägt jetzt schon schneller.

Mit ein bisschen PHP Erfahrung sollte man sich unbedingt mit den Hooks auseinander setzen.

Nötig wurde das, weil Datensätze der neuen Extension über das Hauptmenü erreichbar sein sollen. Das ist doch mal wieder eine richtig schöne Aufgabe die Dank der Genialität von Typoscript auch einfach erledigt werden kann.

Und so funktionierts.

Es fängt mit einem ganz normalen Menü an.

MENU = HMENU

MENU {

  special = directory

  special.value = 1

  noBlur = 1

  1 = TMENU

  1.NO = 1

  1.NO.wrapItemAndSub = <li>|</li>

  1.NO.ATagParams = class="first" |*| class="" |*| class="last"
  1.ACT = 1

  1.ACT < .1.NO

  1.ACT.wrapItemAndSub = <li class="activ">|</li>

  1.ACT.ATagParams = class="first activ" |*| class="activ" |*| class="activ last"
  1.wrap = <ul>|</ul>
  2 < .1

}

Dieses Typoscript erzeugt ein verschachteltes Menü, wobei den Links und den umschließenden Li-Tags noch einige Klassen mitgegeben werden, damit sie besser stylebar sind.

Wenn das funktioniert kommen wir zum spannenden Teil. Über die StdWrap Eigenschaft wird ein PHP Script geladen, das an beliebiger Stelle im Projekt liegen kann. Zum Beispiel im Ordner fileadmin.

page.10.marks.MENU.1.NO.stdWrap.outerWrap

page.10.marks.MENU.1.NO.stdWrap.outerWrap {

  cObject = PHP_SCRIPT

  cObject.file = fileadmin/script_mainmenu.php

}

In dem Script wird ein Submenü eingefügt, deshalb benutze ich outerWrap, wenn man nur den Linktext bearbeiten möchte, dann langt auch der innerWrap. Aus dem PHP Script muss jetzt ein gültiger Wert kommen, der den aktuellen Eintrag umschließt.

$content = "Hallo Menüpunkt: |";

Damit die Rückgabe aus dem Script weiter verarbeitet werden kann, muss sie in der Variable $content stehen. Das Script wird mit include direkt eingebunden, deshalb stehen eine Reihe Daten zur Verfügung. Eine kleine, praktische Auswahl:

• t3lib_div::_GP($key) um auf Parameter zu reagieren.
• $this->data beinhaltet die komplette Zeile aus der Datenbank, welche die Seite repräsentiert, deren Menüpunkt gerade gerendert wird.
• $GLOBALS mit allen üblichen Werten, z.B. $GLOBALS['TYPO3_DB'] um auf die Datenbank zuzugreifen.

In meinem Fall soll also nur bei einer bestimmten Seiten ID etwas passieren, nehmen wir an das ist die ID 123. Dann sieht das Script ungefähr so aus:

if($this->data['uid'] == 123) {

  $content = '|<ul><li>Weiter...</li></ul>';

}

else {

  $content = '|';

}

Tipp 1
So ist es möglichdem mit einem PHP Script das Menü nach belieben zu erweitern. Man kann auch direkt Variablen an sein Script übergeben, in dem man dem cObject einfach weitere Parameter anhängt:

page.10.marks.MENU.1.NO.stdWrap.outerWrap.cObject.hallo = Welt

Diese stehen dann im Script in der Variable $conf zur Verfügung.
Tipp 2
Wenn man verhindern möchte, dass das Script im Cache landet (was es standardmäßig tut), dann muss man das ansagen:

$GLOBALS['TSFE']->set_no_cache();

Vergisst man diese Zeile dann kann das zu einigen Verwirrungen führen, wenn man auf Benutzereingaben reagiert.

Das wars! Hoffe es hilft jemandem weiter.

Als Fullservice Agentur scheut man sich natürlich nicht vor der Arbeit, sondern stürzt sich voller Freude hinein.

Mit der Extension pdf_generator2 wird das zum Kinderspiel! Und das mit CSS Support, inklusive Hintergrundbildern! Dieser Beitrag zeigt wie.

Installation

Mal eine aktuelle TYPO3 und PHP Version auf dem Server vorausgesetzt benötigt man nur noch die Extension pdf_generator2. Bei der Installation gibt man einen Pagetype an (Standard ist 123), den man sich merken sollte.

Fertig! Auf einer beliebigen Seite im Projekt kann man jetzt "type=123" an die URL anhängen und bekommt ein schlichtes PDF zum Download angeboten.

Ohne RealUrl index.php?id=12&type=123
Mit RealUrl meine/klasse/struktur/seite-zwei.html?type=123 (bzw. einer erweiterten Anpassung der RealUrl Konfiguration)

Anpassung

Die PDF sieht noch nicht so schön aus. Deshalb muss das Pageobjekt erweitert werden. Dazu wird als erstes ein HTML Template und eine neue CSS Datei angelegt. Ich schlage vor im Ordner fileadmin/template/pdf/.

In beiden Dateien muss man natürlich etwas eintragen. Nehmen wir an, die Marker ###BREADCRUMB###, ###CONTENT### und ###FOOTER### sollen im PDF erscheinen.

Also gehts ins Typoscript. Am besten auf Rootebene, damit sich die Einstellungen für das gesamte Projekt durchsetzen. Hat man einen Unterbereich, in dem das PDF anders aussehen soll, kann man das aber natürlich beliebig verschachteln.

Der pdf_generator2 hat automatisch ein neues Pageobjekt mit dem Namen pdf_generator angelegt. Das wird erweitert:

pdf_generator {
  # passende CSS Dateien laden
  includeCSS {
  [tab]file1 = fileadmin/template/pdf/style.css
  [tab]file1.media = screen
  }
  
  # eigenes Template erstellen zur optimierten Ausgabe
  10 = TEMPLATE
  10 {
  [tab]template = FILE
  [tab]template.file = fileadmin/template/pdf/template.html
  [tab]
  [tab]# benötigte Marker kopieren
  [tab]marks {
  [tab]  BREADCRUMB < page.10.marks.BREADCRUMB
  [tab]  CONTENT < page.10.marks.CONTENT
  [tab]  FOOTER < page.10.marks.FOOTER
  [tab]}
  }
  
  # Standard PDF Generatorkram entfernen
  50 >
}

CSS und Template sollten klar sein. Interessant wird es bei den marks. Aus dem Standardobjekt page werden alle Marker kopiert, damit sie im PDF Template zur Verfügung stehen.

Am Ende wird mit 50 > das Standardtyposcript der Extension gelöscht. Hier war eine Datenbankabfrage angegeben, die sehr einfach die Inhalte der Seite ausgelesen hat. Vergisst man diese Zeile hat man seinen Inhalt doppelt im PDF.

PDF Downloadlink

Es gibt in der Doku der Extension verschiedene Wege einen Downloadlink vom PDF der aktuellen Seite anzugeben. Zum Beispiel mit einer Benutzerfunktion, die aus dem Typoscript ein PHP Script aufruft.

Da das CONTENT Objekt nach den meisten Anleitungen schon ein Element vom Typ COA ist, füge ich einfach eine neue Ebene hinzu:

CONTENT = COA
CONTENT {
  20 = CONTENT
  # ... usw usf ....

  50 = TEXT
  50 {
  [tab]value = Download als PDF
  [tab]postUserFunc = tx_pdfgenerator2->makePdfLink
  [tab]postUserFunc.target = _blank
  }
}

Und schon findet sich auf jeder Seite ein Downloadlink. Wenn man es auf diese Art macht, sollte man allerdings die Ebene bei der PDF Generierung wieder entfernen, z.B. so:

pdf_generator.10.marks.CONTENT.50 >

Die PDF Ansicht testen

Es ist natürlich äußerst unpraktisch bei jeder Änderung ein PDF zu generieren, herunter zu laden, anzusehen, nur um dann wieder von vorne anzufangen. Deshalb empfehle ich temporär einen weiteren Seitentyp anzulegen, der die gleichen Eigenschaften hat, aber kein PDF generiert sondern einfach die Vorlage anzeigt.

Als erstes erhält der neue Seitentyp pdf_generator_preview alle Eigenschaften von pdf_generator. Damit kein PDF erzeugt wird, muss die Eigenschaft config entfernt werden.

pdf_generator_preview < pdf_generator
pdf_generator {
  config >
  typeNum = 272
}

Damit die Seite ansprechbar ist, wird eine neue Typennummer angegeben. Mit 272 erfolgt der Aufruf dann über

index.php?id=12&type=272

Auf dieser Seite kann man in Ruhe ausprobieren. Es bietet sich auch an darauf zu achten, dass die Seite validiert und weder HTML noch CSS Fehler enthält, dann klappts auch mit der PDF Erstellung.

Downloadname anpassen

Das mieseste Problem war der Name im Downloaddialog. Der Browser hat immer "index.php" vorgeschlagen was bei unkundigen Benutzern schon leichte Schwierigkeiten hervorrufen könnte.

Leider habe ich im Zusammenspiel mit RealURL nur einen harten Weg gefunden den Namen anzupassen. Und der geht direkt in die Extension unter typo3conf/ext/pdf_generator2/class.tx_pdfgenerator2.php ab Zeile 83:

Hier wird die Variable $filename mit einer Get/Post-Variable belegt. Bitte fragt mich nicht wo die herkommt, sondern ersetzt die Definition der Variable einfach durch den Titel der aktuellen Seite:

$filename = '; filename = "'.t3lib_div::convUmlauts($GLOBALS['TSFE']->page['title']).'.pdf"';

Der eigentliche Name ist verpackt um per Header dem Browser übergeben zu werden, der Name steht in $GLOBALS['TSFE']->page['title']. Und die Funktion t3lib_div::convUmlauts($string) ersetzt Umlaute in normale Buchstaben, also wird ä zu ae usw. Das spart schon mal ein bisschen Ärger.

Achtung: Es ist nicht klug Extensions auf diese Art anzupassen, da die Änderungen beim nächsten Update verloren gehen. Da man die Änderung mit Beginn des nächsten Projekts wahrscheinlich vergessen hat, sollte man sich selbst daran erinnern, und zwar in der Datei ext_emconf.php. Die hier gespeicherten Inhalte werden im TYPO3 Backend dargestellt.

Eigene Schriftarten benutzen

Jetzt wird die Sache richtig spannend. Der Kunde möchte in den PDFs seine Hausschrift verwendet sehen und nach seiner Erfahrung sollte das ganz einfach zu machen sein (grrrrr...).

Dann mal los!

Wir haben auf dem Server die PDFlib installiert mit der es funktioniert hat und für die diese Anleitung ist. Ich vermute aber der Weg ist ein ähnlicher für fpdf. Und so gehts:

1. pdf_generator2 erklären, dass es die PDFlib benutzen soll.
Das passiert über den Constant Editor in der Kategorie PDF_GENERATOR2 unter Others der Eintrag Use pdflib.

2. Extension pdf_generator2_fonts installieren.
Datei herunterladen, Extension installieren, fertig. Keine große Sache.

3. Eigene Schrift hochladen.
Mit der Installation der Extension pdf_generator2_fonts schnallt die pdf_generator2 Extension automatisch, dass sie in dem neuen Ordner nach Schriften suchen soll. Von der gewünschten Schrift braucht man eine *.ttf Datei, diese kommt in den Ordner typo3conf/ext/pdf_generator2_fonts/fonts/.

4. Neue Schriftart bekannt machen. (das ist der nervigste Schritt, durchhalten!)
Zurück zum Generator: in der Datei typo3conf/ext/pdf_generator2/html2ps/html2ps.config befindet sich eine XML Struktur in der die zur Verfügung stehenden Schriftarten gespeichert sind. Hier muss man den Knoten <fonts-pdf> suchen und ein neues Kindelement namens <family> anlegen. Am besten man kopiert einen vorhandenen Eintrag.

Im Attribut name wird der Name der Schriftfamilie angegeben. Eine Schriftfamilie besteht aus unterschiedlichen Schriftschnitten, z.B. normal und fett. Diese Schriftschnitte bekommen jeder ein weiteres Kindelement.

<family name="compatil">

  <normal normal="Compatil" italic="Compatil-Italic" oblique="Compatil-Oblique" />

  <bold normal="Compatil-Bold" italic="Compatil-BoldOblique" oblique="Compatil-BoldOblique"/>

</family>

Der im Attribut normal angegebene Name ist wichtig. Schreibweise merken und weiter runter scrollen.

In den Elementen <ttf> wird der eben definierte Name einer TTF Datei zugeordnet. Braucht man also die Schnitte normal und fett, fügt man hier zwei Einträge hinzu:

<ttf typeface="Compatil" embed="0" file="COMMECFR.TTF"/>

<ttf typeface="Compatil-Bold" embed="0" file="COMMECFB.TTF"/>

Groß- und Kleinschreibung spielt hierbei eine Rolle! Auch die Schreibweise der Dateiextension.

5. Schriftart zuweisen.
Das passiert ganz entspannt in der CSS Datei, wie gewohnt:

body {

  font-family: "Compatil";

}

Fertig! Ich drücke die Daumen, dass es bei dir genau so gut klappt und die Besucher bald Tausende interessante PDF Dateien herunterladen können.

Erweiterung

David Will hat eine Lösung entwickelt für den Fall, das verschiedene PDFs von einer Seite generiert werden müssen. Mehrere PDFs mit pdfgenerator2. Vielen Dank!

Soweit kein Problem und schon tausendmal implementiert. Aber wie sieht es aus, wenn der Redakteur mehrere Bilder auswählt? Na logisch: auf der Seite werden sie sehr sanft übergelendet (fadeIn, fadeOut). Und klar, das passiert natürlich mit jQuery und dem genialen Plugin innerfade von den medienfreunden.

Diese Technik eingesetzt findet sich zum Beispiel auf der Seite zur Ausstellung über Audrey Hepburn.

TYPO3 Template

Nachdem eine Seite mit mehreren Dateien über Seiteneigenschaften / Ressourcen / Dateien ausgestattet wurde, wird ins HTML Template gewechselt und ein neuer Marker eingebunden. Ich nenne ihn mal rubrikBild mit der ID head.

<div id="head">###rubrikBild###</div>

Als nächstes wird der Marker per Typoscript definiert. Er ist vom Typ COA und soll aus einer Liste von Bildern bestehen.

rubrikBild = COA

rubrikBild {

  10 = IMAGE

  10.file {

  [tab]import = uploads/media/

  [tab]import.data = levelmedia : -1, slide

  [tab]import.listNum = 0

  }

  10.wrap = <li>|</li>

  

  wrap = <ul>|</ul>

}

Das erste Objekt 10 wird definiert als Bild = IMAGE. Über die Angabe 10.file wird eine Datei angesprochen. import gibt den Ursprungsort an, import.data bestimmt die Vererbung auf Unterseiten. Damit wird das Bild der übergeordneten Seite angezeigt, sollte kein eigenes bestehen. import.listNum wählt aus der Liste das erste Bild aus. Abschließend wird das generierte Img-Tag in einem Listenelement verpackt 10.wrap = <li>|</li> und das komplette Objekt als Liste wrap = <ul>|</ul>.

Hm. Mit diesem Code wird jetzt nur ein einziges Bild in einer Liste dargestellt. Eindeutig zuwenig zum Überblenden. Deshalb muss dieser Code mit einer Schleife ersetzt werden. Dazu werden die ausgewählten Dateien in einen Text geschrieben und mit der Funktion split auseinander genommen. Anschließend kann jedes Element einzeln behandelt werden.

rubrikBild = COA

rubrikBild {

  10 = TEXT

  10.data = levelmedia:-1, slide

  10.split {

  [tab]token = ,

  [tab]cObjNum = 1

  [tab]1 {

  [tab]  10 = IMAGE

  [tab]  10.file.import.current = 1

  [tab]  10.file.import = uploads/media/

  [tab]  10.wrap = <li>|</li>

  [tab]}

  }

  

  wrap = <ul>|</ul>

}

Das Auslesen der Datei und die Wraps sind wie im oberen Beispiel, aber hier werden jetzt alle angegebenen Dateien ausgelesen!

CSS

Die Darstellung der Liste richtet sich natürlich nach dem Seitenlayout. Auf jeden Fall sollte man es mit position:absolute so einrichten, das alle Bilder übereinander liegen damit Benutzer ohne JavaScript nicht von einem Haufen sinnloser Bilder erschlagen werden.

JavaScript

Jetzt fehlen noch ein paar Zeilen jQuery und fertig ist die Funktion! Als erstes muss das Plugin innerfade eingebunden werden. Natürlich über Typoscript im Roottemplate und dort entweder per page.10.headerData oder page.includeJS, je nach Geschmack würde ich mal behaupten.

Dann wird eine Datei für eigene Scripte benötigt, ich nenne sie gerne action.js (eingebunden NACH dem jQuery Core und allen benötigten Plugins), die eine Funktion beinhaltet, welche aufgerufen wird sobald alles fertig geladen wurde:

jQuery(function($) {

  // ... hier gehts los ...

});

if($("#head ul li").length > 1) {

  // ...hier gehts weiter ...

}

$("#head ul").innerfade({

  speed: 2000,

  timeout: 4000,

  containerheight: '250px'

});

Zu beachten ist, dass die Funktion innerfade auf den umfassenden Container, also auf das <ul>, angewendet wird und nicht auf die einzelnen Elemente. Wenn man die Angabe containerheight vergisst weglässt, dann funktioniert es nicht im Internet Explorer. Daran denken! Noch mehr mögliche Einstellungen sind im Quelltext von jquery.innerfade.js dokumentiert.

Fertig

Jetzt in der Schulung die Freude der Auftraggeber genießen und viele schöne Überblendungen auf den eigenen Seiten beobachten. Sobald unsere neue Seite veröffentlich wurde, wird sie hier als Beispiel dienen. Bitte noch ein bisschen Geduld. Die Ausstellungsseite timeless-audrey benutzt diese Technik.

PS: Ein Linktipp; die Firefox Erweiterung Wappalyzer verrät auf einen Blick welche Systeme eine Internetseite einsetzt. Sehr praktisch! Danke t3n.