Extension per XCLASS erweitern (tipafriend)

Geschrieben in typo3 von natalia am 29 Januar 2008

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:

  1. if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/tipafriend/pi/class.tx_tipafriend.php'])    {
  2.     include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/tipafriend/pi/class.tx_tipafriend.php']);
  3. }

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:

  1. if (!defined ('TYPO3_MODE')) die ('Access denied.');
  2.  
  3. $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:

  1. class ux_tx_tipafriend extends tx_tipafriend {   
  2.     function main_tipafriend($content,$conf)    {
  3.         return "HIER";
  4.     }
  5. }

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.

Step Basic

Geschrieben in choreos von natalia am 25 Januar 2008

gemacht am 1.2.2008 im Just Fit Amsterdamer Straße

Block A:
8 ZZ – Leg Curl um das Step
8 ZZ – Basic Straddle Blick nach links (oder Basic Lunges)
8 ZZ – Repeater Knee: Knee, Tap, Knee
8 ZZ – Mambo, Pivot Turn

Block B:
8 ZZ – Double Stomp (auf 2 Fuß rüber) re, Stomp li
8 ZZ – Taps (“Castagnetten”)
16 ZZ – Double Knee re, Double Knee li, Flieger

Block C:
8 ZZ – Flieger Chacha re (Flieger auf die andere Seite vom Step, Chacha mit Drehung zurück)
8 ZZ – Flieger Chacha li
8 ZZ – Repeater Kick (Variation: Kick, Tap rück, Kick)
8 ZZ – V-Step, A-Step

Aufbau Block A:
Beginne mit Knee Lift, Repeater Knee, 2 Mambos dahinter, üben 1 Repeater 2 Mambos, 4 Basics einfügen, 2 Basics durch 4 Leg Curl ersetzen, alles lange üben. Die Leg Curl um das Step, mit einfachen Basics zurück. Dann die Basics zum Straddle machen. Zuletzt die Drehung im Mambo einführen.

Aufbau Block B:
Flieger zeigen und üben, merken lassen. Knee Lift üben, dann Double Knee, Double Knee Flieger üben. Davor vier Tap Ups einfügen. Dann viermal Double Stomp/Single Stomp üben, mit der Double Knee Kombi auf die andere Seite wechseln, da auf die Double/Single Stomp Kombi üben. Alles zusammen, dann beim Stomp den Fuß rübersetzen lassen und die Taps mit Sprung und Armen versehen.

Aufbau Block C:
Mit Kicks beginnen, zum Repeater erweitern, die Variation einführen, merken lassen. Flieger einüben, Chacha einüben, bis man 2 Flieger und 4 Chachas hat. Die Chachas um die Ecke machen lassen, dann halbieren. Dann sollte man eine liegende 8 aus Fliegern und Cachas haben. Zum Ausruhen Taps einfügen, dann den Kick Repeater rein, 2 Taps durch 2 Basic ersetzen. Aus den Basic V-Steps machen und den zweiten V-Step zum A-Step umwandeln.

Bookmarken der Seite (ah_bookmark + realURL)

Geschrieben in typo3 von natalia am 23 Januar 2008

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.

  1. lib.specialnavigation = COA
  2. lib.specialnavigation {
  3.   [...]
  4.   39 = TEXT
  5.   39.value = <li class= "bookmark">
  6.   40 < plugin.tx_ahbookmark_pi1
  7.   40.LOCAL_LANG.de {
  8.     bookmarkText = Seite zu Favoriten
  9.     noSupport = Drücken Sie Strg-D
  10.   }
  11.   41 = TEXT
  12.   41.value = </li>
  13.   wrap = <ul>|</ul>

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.

  1. switch ($agent['BROWSER']) {
  2.   case 'msie':   
  3.   case 'net':
  4.     $content.= '<a href="'.$this->pi_linkTP_keepPIvars_url().'" onclick="addBookmark(\''.$title.'\',\''.$url.'\'); return false;" >'.$linkText.'</a>';
  5.     break;
  6.   case 'opera':
  7.     $content.= '<a href="'.$this->pi_linkTP_keepPIvars_url().'" onclick="addBookmark" rel="sidebar" title="'.$title.'; return false;" >'.$linkText.'</a>';
  8.     break;
  9.   default:
  10.     $content.= $this->pi_getLL('noSupport','');
  11.     break;
  12. }

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.

  1. // direkt nach $this->pi_USER_INT = 1; einfügen
  2. if(!$this->data) {
  3.   $this->data = $this->cObj->parentRecord['data'];
  4. }
  5. if (!$conf['title']) {
  6.   // no static title set so set it to title of current page           
  7.   //$title = $GLOBALS['TSFE']->tmpl->setup['sitetitle'].': '.$this->cObj->getFieldVal('navtitle // title');
  8.   $title = $GLOBALS['TSFE']->tmpl->setup['sitetitle'].': '.$this->data['title'];
  9. } else {
  10.   $title = $conf['title'];
  11. }
  12. // dann kommt irgendwann die switch-Schleife

Kein Bild bei Captcha

Geschrieben in typo3 von natalia am 22 Januar 2008

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.

  1. // OLD
  2. $captchaHTMLoutput = t3lib_extMgm::isLoaded('captcha') ? '<img src="'.t3lib_extMgm::siteRelPath('captcha').'captcha/captcha.php" alt="" />' : '';
  3. // NEW
  4. $captchaHTMLoutput'<iframe width="500" height="100" src="'.t3lib_extMgm::siteRelPath('captcha').'captcha/captcha.php" alt="" ></iframe>';

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.

  1. if(function_exists("imagerotate")) {
  2.   $rot = imagerotate($tmpi, $da, $back);
  3. } else {
  4.   $tmpfile = 'img'.rand(1000,9999).'.png';
  5.   imagepng($tmpi,$tmpfile);
  6.   passthru("convert -rotate $da $tmpfile -");
  7.   unlink($tmpfile);
  8.   $rot = imagecreatefrompng($tmpfile);
  9. }

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:

  1. ini_set('error_reporting','0');

Bilder in tt_news vertikal und horizontal zentrieren

Geschrieben in typo3 von natalia am 17 Januar 2008

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:

  1. <!-- ###TEMPLATE_LATEST### begin
  2.     This is the template for the latest news, typically displayed on a frontpage
  3. -->
  4. <div class="news-latest-container">
  5.     <!-- ###CONTENT### begin
  6.           This is the part of the template substituted with the list of news:
  7.     -->
  8.     <!-- ###NEWS### begin
  9.             Template for a single item
  10.     -->
  11.     <div class="news-latest-item">
  12.     <div class="news-latest-image">
  13.         <!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###-->
  14.     </div>
  15.     <div class="news-latest-content">
  16.         <h3><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h3>
  17.         ###NEWS_SUBHEADER### <!--###LINK_ITEM###-->###MORE###<!--###LINK_ITEM###-->
  18.     </div>
  19.     </div>
  20.     <!-- ###NEWS### end-->       
  21.     <!-- ###CONTENT###  end -->
  22. </div>
  23. <!-- ###TEMPLATE_LATEST### end -->

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:

  1. plugin.tt_news.displayLatest.imageWrapIfAny = <div class="news-image-helper"><div class="news-image-helper2"><span class="edge"></span><span class="container">|</span></div></div>

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.

  1. .news-latest-image {
  2.     float: left;
  3.     background: transparent url('../gfx/tt_news/latest_bg_68x68.gif') no-repeat;
  4. }
  5. .news-image-helper {
  6.     padding: 5px 10px 25px 5px;
  7. }
  8. .news-image-helper2 {
  9.     width: 58px;
  10.     height: 58px;
  11.     display: table-cell;
  12.     text-align: center;
  13.     vertical-align: middle;
  14.     background-color: white;
  15. }
  16.  
  17. .news-latest-image .edge {
  18.     width:0;
  19.     height:100%;
  20.     display:inline-block;
  21.     vertical-align:middle;
  22. }
  23. .news-latest-image .container {
  24.     text-align:center;
  25.     width:100%;
  26.     display:inline-block;
  27.     vertical-align:middle;
  28. }

Script Debugger für IE

Geschrieben in javascript von natalia am 2 Januar 2008

http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx
Hab mal was gefunden zu Script Debugging in IE (“Objekt erwartet” ist einfach die dümmste Fehlermeldung überhaupt). Etwas scheisse, nicht zu vergleichen mit dem Debugger in Firefox, aber beser als gar nichts.