Beiträge der Kategorie TYPO3

Extension per XCLASS erweitern (tipafriend)

Bei fast jeder Extension findet man am Ende einen Abschnitt, der es ermöglicht diese Extension zu erweitern, bzw. die Funktionen für eigene Zwecke zu überschreiben. Das hat den Vorteil, dass man der eigentlichen Quellcode nicht ändert und so bei einem Update nichts überschrieben werden kann.
In einem kurzen Beispiel werde ich die Extension tip-a-friend erweitern, so dass einige ungünstige Fehler behoben werden.

Zunächst muss ein Ordner angelegt werden, dass die neue Extension beherbergen soll, diese soll np_tipafriend_ext heißen. Das _ext deutet darauf hin, dass die Extension eine Erweiterung ist, der Name der erweiterten Extension tipafriend steckt im Namen auch drin.
Dann öffnet man die Klassen-Datei der Extension, die man erweitern will und sucht ganz unten den Abschnitt mit der XCLASS. Bei tip-a-friend nämlich:


if (defined(‘TYPO3_MODE’) && $TYPO3_CONF_VARS[TYPO3_MODE][‘XCLASS’][‘ext/tipafriend/pi/class.tx_tipafriend.php’]) {
include_once($TYPO3_CONF_VARS[TYPO3_MODE][‘XCLASS’][‘ext/tipafriend/pi/class.tx_tipafriend.php’]);
}

Um nun die neue Extension als Erweiterung der tip-a-friend in Typo3 zu registrieren, legt man im neuen Extension-Ordner die Datei ext_localconf.php an und schreibt dort folgendes hinein:


if (!defined (‘TYPO3_MODE’)) die (‘Access denied.’);

$TYPO3_CONF_VARS[‘FE’][‘XCLASS’][‘ext/tipafriend/pi/class.tx_tipafriend.php’] = t3lib_extMgm::extPath($_EXTKEY).’class.ux_tx_tipafriend.php’;

Der erste Teil entspricht dem Ausdruck entnommen aus der Tip-a-friend Klassen-Datei, der zweite gibt an, wie die Klasse der neuen Extension lautet. Dieser muss einem bestimmten Schema folgen: dem Klassennamen der zu erweiternden Extension wird ein ux_ vorgestellt! Falls der Klassenname tx_ahlinklist_pi1 lautet, dann ist die Erweiterung ux_tx_ahlinklist_pi1.

Dann legt man eine Datei an, die den mit ux_ beginnenden Dateinamen trägt. Direkt im Ordner der Extension gibt es nun einen Datei, die class.ux_tx_tipafriend.php heißt und (ohne Kommentarblock) folgenden Code enthält:


class ux_tx_tipafriend extends tx_tipafriend {
function main_tipafriend($content,$conf) {
return “HIER”;
}
}

Die Hauptfunktion der Tip-a-friend heißt nämlich main_tipafriend (bei den meisten Extensions einfach nur main), daher wird in der neuen Klasse die Funktion überschrieben und liefert “HIER” zurück. Man kann die Funktionen der übergeordneten Klasse aufrufen mit parent::Funktionsname, das Ergebnis dann bearbeiten und zurückgeben.

Bookmarken der Seite (ah_bookmark + realURL)

Die Extension ah_bookmark ist eigentlich ganz schick, um die Seite schnell zu den Favoriten hinzuzufügen, denn sie kümmert sichum die Browser-Abfrage, so dass es in FF und IE gleiche funktioniert. Es gibt da leider einige Probleme, vor allem im Zusammenhang mit RealURL.

Zunächst mal ein Beispiel, wie man die Extension ins Template einbauen kann (falls man den Bookmark-Link auf jeder Seite haben möchte). Hier habe ich ein Menü simuliert mit einigen manuell angelegten Links, die alle ein anderes Icon haben können. Der LocalLang Abschnitt sollte dafür sorgen, dass die nicht vorhandene Übersetzung der Extension nicht ins locallang.xml reingeschrieven werden muss.

lib.specialnavigation = COA
lib.specialnavigation {
[…]
39 = TEXT
39.value =

  • 40 < plugin.tx_ahbookmark_pi1 40.LOCAL_LANG.de { bookmarkText = Seite zu Favoriten noSupport = Drücken Sie Strg-D } 41 = TEXT 41.value =
  • wrap =

      |

    Bei Anklicken des Links wurde man auf die Startseite weitergeleitet, weil RealURL eingesetzt worden ist. Ich hatte versucht ans Ende des Javascript-Aufrufs im Link ein “return false;” dranzuhängen. Das hat aber irgendwie auch nichts genützt. Daher die elegante Lösung mit dem Link auf die aktuelle Seite. Dazu in der Datei class.tx_ahbookmark_pi1.php die switch-Anweisung suchen und die Links wie folgt ändern.

    switch ($agent[‘BROWSER’]) {
    case ‘msie’:
    case ‘net’:
    $content.= ‘pi_linkTP_keepPIvars_url().'” onclick=”addBookmark” rel=”sidebar” title=”‘.$title.’; return false;” >’.$linkText.’‘;
    break;
    default:
    $content.= $this->pi_getLL(‘noSupport’,”);
    break;
    }

    Ein weiteres Problem ist, dass der Title der Seite nicht angezeigt, weil davon ausgegangen wird, dass $this->data in der Extension gefüllt wird. Außerdem muss im Template der Sitetitle gesetzt werden. Im schlimmsten Fall wird dann einfach nur ein : angezeigt, wenn man die Seite zu Favoriten hinzufügen möchte. Es gibt bestimmt eine bessere Möglichkeit, das zu lösen, aber weil ich grade sowieso in der php-Datei am Pfuschen war, dachte ich, könnte ich es auch gleich da ändern.

    Zunächst mal habe ich $this->data gesetzt, falls es nicht da ist. Der getFieldVal-Ausdruck hat immer noch nicht das gewünschte Ergebnis geliefert. Daher habe ich es einfach geändert.


    // direkt nach $this->pi_USER_INT = 1; einfügen
    if(!$this->data) {
    $this->data = $this->cObj->parentRecord[‘data’];
    }
    if (!$conf[‘title’]) {
    // no static title set so set it to title of current page
    //$title = $GLOBALS[‘TSFE’]->tmpl->setup[‘sitetitle’].’: ‘.$this->cObj->getFieldVal(‘navtitle // title’);
    $title = $GLOBALS[‘TSFE’]->tmpl->setup[‘sitetitle’].’: ‘.$this->data[‘title’];
    } else {
    $title = $conf[‘title’];
    }
    // dann kommt irgendwann die switch-Schleife

    Geschrieben in TYPO3 | Kommentare deaktiviert für Bookmarken der Seite (ah_bookmark + realURL)

    Kein Bild bei Captcha

    Ich wollte die Captch-Extension in Tip-a-friend einsetzen, um abzusichern, dass die Seite missbraucht wird. Ich habe mich für die einfachere Extension captcha entschieden. Diese läßt das Einsetzen von ttf-Schriften zu, die Buchstaben können gedreht und verschoben werden. Und einige Extensions so wie Tip-a-friend unterstützen die Captcha-Extensions, so weit sie installiert ist.

    Nachdem ich beide Extensions installiert hatte und mir das Formular von Tip-a-friend (Taf) anzeigen ließ, wurde nur ein img-Tag generiert, d.h. die Extension wurde installiert und gefunden, es wurde jedoch kein Bild angezeigt. Es ist schwierig in diesem Fall zu debuggen, da das Bild mit dem Script erzeugt wird. Wenn man die Datei in einem anderen Fenster aufruft, so stehen einige Variablen aus der Session nicht zur Verfügung. Und in der Seite, in der das Bild eingebunden ist, kann man nicht debuggen, weil print_r, echt etc. einfach nicht angezeigt werden.

    Die erste Möglichkeit, sich überhaupt etwas anzeigen zu lassen ist, im Quellcode der Rahmenextension (in diesem Fall Taf) aus dem Image-Tag ein Iframe-Tag zu machen. Wenn es ein Bild ist, dann ist es ein Bild, aber wenn es Fehlermeldungen gibt, werden die wenigestens angezeigt.


    // OLD
    $captchaHTMLoutput = t3lib_extMgm::isLoaded(‘captcha’) ? ‘‘ : ”;
    // NEW
    $captchaHTMLoutput = ‘‘;

    Dann sollte man in einem Iframe die Fehlermeldungen bekommen. Bei mir waren die ersten Fehlermeldungen die Beschwerde darüber, dass define(PATH_this,…) so nicht korrekt ist. Also habe ich in allen define-Ausdrücken den ersten Parameter mit Anführungszeichen versehen, damit es ein String ist.

    Dann gabs da noch eine Reihe von Notices und einen Errors. Die Funktion imagerotate wurde nicht gefunden. Nach ein bisschen Recherche stellte sich raus, dass die Funktion zwar eine php4-Funktion ist, es aber von der GD-Version abhängt, ob sie auch wirklich funktioniert. Eine Möglichkeit ist die Funktion einfach rauszukommentieren. Auf der php.net-Seite zu der Funktion finden sich in den Kommentaren Beispiele, wie man es anders umsetzen kann. Da es ja in Typo3 ist, kann man ja auf die Funktion von Imagemagick zurückgreifen.

    if(function_exists(“imagerotate”)) {
    $rot = imagerotate($tmpi, $da, $back);
    } else {
    $tmpfile = ‘img’.rand(1000,9999).’.png’;
    imagepng($tmpi,$tmpfile);
    passthru(“convert -rotate $da $tmpfile -“);
    unlink($tmpfile);
    $rot = imagecreatefrompng($tmpfile);
    }

    Am Ende nicht vergessen, den Iframe-String zu entfernen und stattdessen den Image-Tag wieder reinzuschreiben. Und für alle Fälle das Error-Reporting ausschalten, damit das Bild generiert wird, auch wenns kleine Hinweise gibt:

    ini_set(‘error_reporting’,’0′);

    Bilder in tt_news vertikal und horizontal zentrieren

    Gewünscht ist, dass bei den dargestellten Einträgen aus tt_news die Bilder verikal und horizontal zentriert werden. Um das Bild herum befindet sich ein Rahmen einer festen Größe mit Schlagschatten. Die Bilder sollen daher wie Polaroids aussehen. Falls kein Bild da ist, dann soll der Text normal über die gesamte Breite fließen.

    Wie das geht, wird hier am Beispiel des “latest”-Abschnitts gezeigt. Zunächst modifiziere ich das Template so, dass nur noch das notwendige drinsteht:


    ###NEWS_IMAGE###

    ###NEWS_TITLE###

    ###NEWS_SUBHEADER### ###MORE###



    Das reicht natürlich nicht, um das Bild so auszurichten, wie es gewünscht ist. Deswegen müssen noch ein paar Hilfs-divs her, diese dürfen aber auch nur dann da sein, wenn auch ein Bild da ist. Daher muss noch ein wenig am Setup geändert werden. Also wird ins TypoScript Setup der Hauptseite die folgende Zeile eingefügt:

    plugin.tt_news.displayLatest.imageWrapIfAny =

    |

    Falls das Bild als existiert, werden um das Bild herum einige divs gewrappt, diese divs werden dazu benutzt, um das Bild auszurichten. Der Container für das Bild (news-latest-image) wird links positioniert und das Hintergrundbild wird eingefügt. Padding kann da nicht hinzugefügt werden, denn sonst würde der Text ohne Bild nicht über den kompletten Bereich fließen.
    Im ersten Hilfs-Wrap wird das padding definiert, damit es keine Browser-Unterscheidung beim Box-Modell geben muss. Im Hilfs-Wrap 2 werden nun alle wichtigen Eigenschaften definiert: die Größe, die Ausrichtung und die Eigentschaft display wird auf table-cell gesetzt. Denn (so die Erklärung) nur innerhalb einer Tabelle können die Inhalte auch vertikal zentriert werden.

    Wenn der IE nicht wäre, dann wäre es so weit fertig. Leider zentriert der IE die Bilder immer noch nicht mittig. Die Hilfe gibt es auf der tollen cssplay.co.uk Seite. Da wird das aber über eine zusätzliche Condition gemacht (siehe Quelltext der Seite). Nachdem ich die zwei wraps und die Definition eingebaut habe wie im Beispiel, hat es ohne zusätzliche Abfragen in IE5, IE6, FF und Opera funktioniert.


    .news-latest-image {
    float: left;
    background: transparent url(‘../gfx/tt_news/latest_bg_68x68.gif’) no-repeat;
    }
    .news-image-helper {
    padding: 5px 10px 25px 5px;
    }
    .news-image-helper2 {
    width: 58px;
    height: 58px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: white;
    }

    .news-latest-image .edge {
    width:0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    }
    .news-latest-image .container {
    text-align:center;
    width:100%;
    display:inline-block;
    vertical-align:middle;
    }

    Geschrieben in TYPO3 | Kommentare deaktiviert für Bilder in tt_news vertikal und horizontal zentrieren

    Dateipfad ermitteln

    Im Setup einer Extension kann man Dateipfade mit EXT definieren, damit je nach Installationsart die Datei trotzdem gefunden werden kann. Wie löst man diese Schreibweise nun auf.

    In Constants werden zwei Beispielvariablen definiert, von der ersten Datei soll der Pfad ermittelt werden, von der zweiten braucht man direkt den Inhalt.

    plugin.np_sudoku {
    # cat=plugin.np_sudoku/file/1; type=file[txt]; label=Sudoku File: a text-file which contains all the sudoku games
    sudokuFile = EXT:np_sudoku/res/sudoku.txt
    # cat=plugin.np_sudoku/file/2; type=file[html,htm,tmpl,txt]; label=Rules File: a file which contains the preformatted rules for playing sudoku
    rulesFile = EXT:np_sudoku/res/rules.html
    }

    Im Setup liest man die Konstanten aus:

    plugin.tx_npsudoku_pi1 {
    # name of the sudoku file
    sudokuFile = {$plugin.np_sudoku.sudokuFile}
    # name of the rules file
    rulesFile = {$plugin.np_sudoku.rulesFile}
    }

    Die Werte stehen in der Klasse tx_npsudoku_pi1 im $conf zur Verfügung. Von der ersten Datei braucht man nur den Dateinamen:

    $filename = $GLOBALS[‘TSFE’]->tmpl->getFileName($this->conf[‘sudokuFile’]);

    Von der zweiten Datei braucht man den Inhalt:

    $filecontent = $this->cObj->fileResource($this->conf[‘rulesFile’]);

    Geschrieben in TYPO3 | Kommentare deaktiviert für Dateipfad ermitteln

    Spinnenfutter (robots.txt) für Typo3

    Ich denke, das könnte eine nette robots.txt für Typo3 Installationen sein.
    Man verbietet die Source-Ordner, erlaubt aber fileadmin und den uploads, sowie den Extension-Ordner. Um Vorschläge wird gebeten.

    User-agent: *
    Disallow: /typo3
    Disallow: /typo3_src
    Disallow: /t3lib

    Keine Bilder im sk_calender

    Die Extension sk_calender ermöglicht es theoretisch, den einzelnen Beiträgen Bilder zuzuweisen. Das Problem ist, dass diese im FE nicht als Bilder dargestellt werden, sondern nur als Pfad zur Datei.
    Zunächst mal hier die Möglichkeit, anstatt Bildpfad tatsächlich ein Bild auszugeben. Die Änderung muss in der Datei pi1/class.tx_skcalnedar_listview.php in der Funktion parseCalendar vorgenommen werden ungefähr ab Zeile 152. Da findet sich eine while-Schleife, die die Einträge in der Datenbank abarbeitet. In $data steht somit ein einzelner Datensatz.

    if ($clean_arr) { // we do have entries
    while (list(,$data) = each($clean_arr)) {
    // change
    $picConf = array();
    $picConf[‘image.’][‘file’] = ‘uploads/tx_skcalendar/’.$data[‘image’];
    $picConf[‘image.’][‘file.’][‘maxW’] = 100;
    $picConf[‘image.’][‘file.’][‘maxH’] = 100;
    if($data[‘image’] != “”) {
    $data[‘image’] = $this->myCobj->IMAGE($picConf[‘image.’]);
    }
    $data[‘description’] = …
    }

    Damit wird ein Bild gerendert, dessen Ränder maximal 100px groß sind.
    Ich bin mir grade nicht sicher, ob dieser Teil auch von mir stammt. Damit wird die Beschreibung in der Ansicht LIST auf 100 Zeichen gekürzt.

    $data[‘description’] = $this->myCobj->stdWrap($this->myCobj->crop($data[‘description’],’100| […]|1′),$this->conf[‘general’][‘rtefield_stdWrap’]);

    Bei derdrink.net hab ich es so weit erweitert, dass per Rollover eine große Version des Bildes angezeigt wird. Dazu füge ich eine zusätzliche $picConf ein, um das Bild größer vorbereiten zu lassen, und wrappe dann beide Bilder in ein a-Tag, um dann per CSS die Rollover Funktionalität zu implementieren. Es mag der Einwand kommen, dass man kein a-Tag braucht, um in CSS hover zuverwenden, manche Browser sind nur äußerst zickig, wenn es darum geht, andere Tags als a mit hover zu versehen.
    Dieser Code erweitert das obige Beispiel:

    $picConf = array();
    $picConf[‘image.’][‘file’] = ‘uploads/tx_skcalendar/’.$data[‘image’];
    $picConf[‘image.’][‘file.’][‘maxW’] = 100;
    $picConf[‘image.’][‘file.’][‘maxH’] = 100;
    $picConfBig = array();
    $picConfBig[‘image.’][‘file’] = ‘uploads/tx_skcalendar/’.$data[‘image’];
    $picConfBig[‘image.’][‘file.’][‘maxW’] = 560;
    $picConfBig[‘image.’][‘file.’][‘maxH’] = 560;
    if($data[‘image’] != “”) {
    $data[‘image’] = ‘

    ‘.$this->myCobj->IMAGE($picConf[‘image.’]).’

    ‘;
    $data[‘image’].= ‘

    ‘.$this->myCobj->IMAGE($picConfBig[‘image.’]).’

    ‘;
    }
    // till then
    $data[‘description’] = …

    In CSS muss man dann folgendes ergänzen:

    a.calendar-image-link {
    position: relative;
    }
    a.calendar-image-link .calendar-image-big {
    display: none;
    position: absolute;
    }
    a.calendar-image-link .calendar-image-small {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    }
    a:hover.calendar-image-link .calendar-image-big {
    display: block;
    }

    Und das Ergebnis in Anwendung sieht so aus: DER DRINK Veranstaltungskalender

    Geschrieben in TYPO3 | Kommentare deaktiviert für Keine Bilder im sk_calender

    indexed_search: Template ohne Tabellen

    Ich hasse unötige Tabellen, daher hier ein Template für indexed_search komplett ohne table, br oder p. Alles nur span oder div, daher kann man auch alles per CSS formatieren.

    Hier ein Auszug aus dem Stylesheet, wie es z.B. sein könnte, das Ergebnis gibts auf derdrink.net

    /*** indexed_search ***/
    .tx-indexedsearch-searchbox form {
    margin: 0;
    padding: 0;
    }
    .tx-indexedsearch-searchbox .formline {
    clear: both;
    padding-bottom: 10px;
    overflow: auto;
    }
    .tx-indexedsearch-searchbox label {
    width: 150px;
    float: left;
    }
    .tx-indexedsearch-searchbox input {
    float: left;
    border: 1px solid #116aae;
    }
    .tx-indexedsearch-searchbox-button {
    width: 150px;
    border: 1px solid #116aae;
    background-color: #ffffff;
    color: #116aae;
    }
    .isearch_linkMode {
    display: block;
    float: left;
    padding: 2px 10px;
    }
    .tx-indexedsearch-rules {
    position: relative;
    padding: 10px 0;
    }
    .tx-indexedsearch-rules h2 {
    font-weight: normal;
    font-size: 100%;
    padding: 0;
    margin: 0;
    }
    .tx-indexedsearch-rules a .isearch-rules-text {
    display: none;
    text-decoration: none;
    color: #116aae;
    }
    .tx-indexedsearch-rules a:hover .isearch-rules-text{
    display: block;
    text-decoration: none;
    position: absolute;
    font-weight: normal;
    top: 0;
    left: 100px;
    background-color: #ffffff;
    padding: 10px;
    }
    .tx-indexedsearch-whatis {
    padding-bottom: 10px;
    }
    .tx-indexedsearch-sw {
    font-weight: bold;
    }
    .tx-indexedsearch-browsebox {
    padding-bottom: 10px;
    }
    .tx-indexedsearch-res .result-row {
    margin: 10px 0 20px 0;
    }
    .tx-indexedsearch-icon {
    float: left;
    display: block;
    }
    .tx-indexedsearch-result-number {
    float: left;
    display: block;
    }
    .tx-indexedsearch-title {
    float: left;
    display: block;
    }
    .tx-indexedsearch-percent {
    float: right;
    display: block;
    }
    .tx-indexedsearch-descr {
    clear: both;
    display: block;
    }
    .tx-indexedsearch-info {
    clear: both;
    display: block;
    }
    .tx-indexedsearch-path {
    display: block;
    }

    Geschrieben in TYPO3 | Kommentare deaktiviert für indexed_search: Template ohne Tabellen

    sk_calendar: Archive view

    Bei der Archive view im sk_calendar (VCE) wollte ich eigentlich nur, dass die vergangenen Events wie in einer Liste angezeigt werden. Stattdessen bekam ich einen Button und eine komische Ausgabe. Ich habe einen Teil des Quelltextes geändert, damit meine Anforderungen erfüllt werden.

    Die Variable Startdate wird auf 5 Jahre in der Vergangenheit gesetzt, die Variable Enddate auf den aktuellen Tag und damit die Ansicht so gerendert wird, wie die Liste, wird die Variable manuell neu gesetzt (ab Zeile 231).

    case ‘archive’:
    $this->conf[‘general’][‘view’] = ‘list’;
    $offset_temp = date(‘m-d-Y’,$offset);
    $offset_temp = explode(‘-‘,$offset_temp);
    if (!$filters[‘startdate’]) $filters[‘startdate’] = mktime(0,0,0,$offset_temp[0],$offset_temp[1],$offset_temp[2]-5); // 5 years back
    if (!$filters[‘enddate’]) $filters[‘enddate’] = $offset;
    /*if ($filters[‘monthfilter’]) {
    $filters[‘startdate’] = $filters[‘monthfilter’];
    $offset_temp = date(‘m-d-Y’,$filters[‘monthfilter’]);
    $offset_temp = explode(‘-‘,$offset_temp);
    $filters[‘enddate’] = mktime(0,0,0,$offset_temp[0]+1,$offset_temp[1],$offset_temp[2]);
    $offset = $filters[‘monthfilter’];
    } else {
    if (!$filters[‘startdate’]) $filters[‘startdate’] = 1; // show us everything (0 would disable filter)
    $offset_temp = date(‘m-d-Y’);
    if (!$filters[‘enddate’]) $filters[‘enddate’] = mktime(0,0,0)-1; // … until not quite today
    }*/
    break;

    Und wenn man möchte, dass diese Liste auch noch umgekehrt sortiert wird – das letze Event zuerst – da kann man manuell die Sorting Variable setzen:


    $this->conf[‘general’][‘view’] = ‘list’; // war schon da
    $this->conf[‘sorting’] = ‘update’; // steht für “up” und “date”

    Geschrieben in TYPO3 | Kommentare deaktiviert für sk_calendar: Archive view

    Tabbed Content

    Auf einer Seite befand sich zu viel Content, um eine Aufteilung auf mehrere Seite und Scrolling zu vermeiden, entstand die Idee den Content in eine Art Tabs anzuzeigen. Der Content sollte weiterhin in Typo3 gepflegt werden können und einige der Elemente sollten weiterhin dem Flow der Seite folgen.

    Die Elemente, die in einen Mini-Tab-Browser gepackt werden sollte, werden in Typo3 mit einem Rahmen “Indent”/”Einzug” versehen. Die normalen Content Elemente werden nicht in den Browser gepackt.

    Das Skript wird in den Header eingebunten, und am Ende der Seite wird die Funktion aufgerufen. Die Funktion sucht das Element mit der id “content” und überprüft alle darin befindlichen Elemente, ob sie den Klassennamen “csc-frame-indent” haben. Ich musste vorher im Template einstellen, dass nur csc-frame-indent verwendet wird. Dann werden die Elemente, die diese Voraussetzungen erfüllen, mit einer Id versehen, der Titel des Elementes wird extrahiert und auch in ein Array gepackt. Das Array wird dann abgearbeitet, es wird eine Navigation erstellt und an den Anfang des Content-Elementes gepackt. Bei Rollover wird das vorherige Element ausgeblendet und das neue eingeblendet.

    Zu beachten: im HTML-Template muss der Content in <div id=”content”> eingefügt werden. Jedes Content-Element muss in einem Div mit dem Klassennamen “content-element” gewrappt werden. Und der Wrap für den Content-Rahmen muss auch geändert werden. Wie das geht, steht weiter unten im TypoScript Abschnitt.

    Der Quelltext sollte nach den Änderungen etwas so strukturiert sein:

    Irgenein Content

    [… weitere divs]

    Hier der Link zum Anschauen und darunter der Quelltext, zunächst das TypoScript Template und dann der JavaScript Teil.

    page.headerData.20 = TEXT
    page.headerData.20.value =
    page.99 = HTML
    page.99.value =
    # damit jedes Content Element in ein div gewrappt wird
    tt_content.stdWrap.dataWrap =

    |

    # jedes Content Element mit Rahmen “Indent” oder “Einzug” wird so gewrappt
    tt_content.stdWrap.innerWrap.cObject.10.value =

    |

    var currentlyShowing = -1;
    // array with titles, that should be linked
    var titleArray = Array();
    // array with indices of the elements, that should be display tabbed
    var indexArray = Array();

    function displayTabbedContent() {
    var contentElement = document.getElementById(“content”);
    contentElement.style.position = “relative”;
    var contentChildren = contentElement.childNodes;
    var counter = 0;
    for(var i=0;i‘;
    naviHTML+= ‘‘+titleArray[i]+’