eigene Extension mit eigenem Backend Textfeld

28. Februar 2011

Die Anforderung: es sollte im Backend ein neues Inhaltselement namens “Zitat” geben. Man braucht also ein neues Inhaltselement mit einem simplen Textfeld, das dann im Frontend dementsprechend ausgegeben wird. Und zum ersten Mal hab ich das tatsächlich geschafft.

1. Mit der Extension Kickstarter (kickstarter) eine neue Erweiterung erstellen.
– einen Extension key vergeben (meiner lautete ccquotebox)
– unter General Info einen klangvollen Namen vergeben (z.B. “Zitate”), Kategorie “Backend” auswählen, Namen und Email Adresse eintragen
– in New Database Tables eine Tabelle anlegen (“tx_ccquotebox_quotes”), ihr einen Titel geben (“quotes”), unter Edit Fields alles lassen wie es ist und unten dran ein neues Field einfügen.

– unter Frontend Plugins einen Titel eingeben (“Zitat”) und die erste Option “Add to ‘Insert Plugin’ list in Content Elements'” auswählen.
– anschließend mit viewresult und create die Extension erstellen.

2. ext_tables.php im Ordner der gerade erstellten Extension (typo3conf/ext/ccquotebox/ext_tables.php) um zwei Zeilen erweitern:

  1. $TCA['tt_content']['types']['list']['subtypes_addlist'][$_EXTKEY.'_pi1']='pi_flexform';
  2. t3lib_extMgm::addPiFlexFormValue($_EXTKEY.'_pi1', 'FILE:EXT:'.$_EXTKEY.'/flexform_ds_pi1.xml');

3. die flexform_ds_pi1.xml Datei im Extension Ordner erstellen und mit folgendem Inhalt befüllen:

  1. <T3DataStructure>
  2. <sheets>
  3. <sDEF>
  4. <ROOT>
  5. <TCEforms>
  6. <sheetTitle>Options</sheetTitle>
  7. </TCEforms>
  8. <type>String</type>
  9. <el>
  10. <quellcode>
  11. <TCEforms>
  12. <label>Zitat</label>
  13. <config>
  14. <type>text</type>
  15. <html>0</html>
  16. <cols>60</cols>
  17. <rows>15</rows>
  18. </config>
  19. </TCEforms>
  20. </quellcode>    
  21. </el>
  22. </ROOT>
  23. </sDEF>
  24. </sheets>
  25. </T3DataStructure>

Damit sollte es bei den Inhaltselementen ein neues Plugin “Zitat” geben, mit einem Textfeld.

4. Falls nötig: auf UTF-8 umstellen
Da bei mir die Umlaute eine Fehlermeldung auslösten, habe ich die localconf.php geupdated:

  1. $TYPO3_CONF_VARS['BE']['forceCharset'] ='utf-8';

Danach gehn sämtliche Umlaute erstmal nicht mehr, man muss alle Texte neu abspeichern. Aber in meinem Fall stand das Projekt noch am Anfang deshalb war das kein großes Thema.

5. Frontend Ausgabe
Damit nun das Zitat ordentlich ausgegeben wird, bearbeitet man die main Funktion der class.tx_ccquotebox_pi1.php folgendermaßen:

  1. function main($content, $conf) {
  2. $this->conf = $conf;
  3. $this->pi_setPiVarDefaults();
  4. $this->pi_loadLL();
  5. $this->pi_initPIflexForm();
  6. $piFlexForm = $this->cObj->data['pi_flexform'];
  7. foreach ( $piFlexForm['data'] as $sheet => $data ) {
  8. foreach ( $data as $lang => $value ) {
  9. foreach ( $value as $key => $val ) {
  10. $this->lConf[$key] = $this->pi_getFFvalue($piFlexForm, $key, $sheet);
  11. }
  12. }
  13. }
  14. $content='<div class="zitat">'.$this->lConf['quellcode'].'</div>';
  15. return $this->pi_wrapInBaseClass($content);
  16. }

Templavoila einrichten

24. Februar 2011

1. templavoila und static_info_tables installieren und aktivieren – bei Enable Features Basic auswählen und alle 3 optionen unausgewählt lassen.
2. einen sysordner namens “Storage Folder” erstellen und diesen Ordner in der root Seite als General Record Storage Page auswählen
3. in fileadmin einen Ordner templates erstellen und dort eine html Seite speichern
4. in storage folder 2 neue Objekte erstellen (genauere Anleitung):
– TemplaVoila Data Structure mit typ Seite (Vorlage) und name “Template (Datenstruktur)”
– TemplaVoilà Template Objekt mit Dateireferenz fileadmin/templates/index.html und Datenstruktur “Template (Datenstruktur)” auswählen
5. in root dann unter extended das Template auswählen
6. falls templavoila es nicht automatisch gemacht hat, dann im root template setup folgendes hinzufügen:

  1. page = PAGE
  2. page.10 = USER
  3. page.10.userFunc = tx_templavoila_pi1->main_page

Bilder auf die gesamte Seite ausdehnen

21. Februar 2011

Es kam jetzt schon öfter vor, dass ich Bilder auf die gesamte Seite ausdehnen musste. Und nun hab ich ein sehr hilfreiches jquery plugin dazu entdeckt:

supersized

Das Ding ist großartig und damit gehts wirklich schnell:

1. die js und css Dateien einbinden:

  1. <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen">
  2. <script type="text/javascript" src="js/jquery.js"></script>
  3. <script type="text/javascript" src="js/effects.core.js"></script>
  4. <script type="text/javascript" src="js/effects.slide.js"></script>
  5. <script type="text/javascript" src="js/supersized.3.0.js"></script>

2. das DIV mit den Bildern im body erstellen:

  1. <div style="width: 1036px; height: 777px; display: block;" id="supersized">
  2. <a style="width: 1683px; height: 1141px; left: 0px; top: -100px;" href="">
  3. <img src="img/100.jpg">
  4. </a>
  5. <a style="width: 1000px; height: 500px; left: 0px; top: -100px;" href="">
  6. <img src="img/200.jpg">
  7. </a>
  8. </div>

3. die Funktion aufrufen:

  1. $(function(){
  2. $.fn.supersized.options = {
  3. startwidth: 640,
  4. startheight: 480,
  5. vertical_center: 1,
  6. slideshow: 1,
  7. navigation: 1,
  8. thumbnail_navigation: 1,
  9. transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
  10. pause_hover: 0,
  11. slide_counter: 1,
  12. slide_captions: 1,
  13. slide_interval: 3000,
  14. slides : [
  15. {image : 'img/100.jpg', title : 'Name1', url : 'img/100.jpg'},
  16. {image : 'img/200.jpg', title : 'Name2', url : 'img/200.jpg'}
  17. ]
  18. };
  19. $('#supersized').supersized();

Typo3 Formular – HTML Mails

16. Februar 2011

Damit Mails, die über ein Formular abgeschickt werden, als HTML-Mails ankommen, braucht es diese Zeile:

  1. | html_enabled=hidden | 1

Simpel aber nützlich.

selbst formatiertes content element: Bildbreite und Bildhöhe

03. Februar 2011

Ich habe mir notgedrungen mein “Text mit Bild” Element selbst formatieren müssen und dabei habe ich festgestellt, dass die Bildmaße des Bildes ignoriert wurden. Typoscript beachtet Bildmaße mit folgenden Zeilen:

  1. tt_content.textpic.20.10.file.width.field = imagewidth
  2. tt_content.textpic.20.10.file.height.field = imageheight

Joa… klingt simpel, isses auch. Wenn mans weiß. Und nich ne halbe Stunde bei Google nachsehn muss, weil es keine gescheite Doku für die tt_content Standardeinstellungen gibt.