Typo3 - Baukasten

weitere Infos unter Typo3 - Tipps und Tricks

Formulare

Typo3 - Formulare mit https sicher versenden

TYPO3 - Checkbox in Standard Mailformular als Pflichtfeld

Auf Daten zugreifen

Beispiele gibt es hier:

TypoScript - Daten auslesen

Typo3 - stdWrap

Die stdWrap Eigenschaft steht vielen Objekten zur Verfügung. Wenn Sie vorhanden ist ist Sie der Problemlöser für fast alle Probleme :-).

Typo3 - TSFE

Typo3 - Das Media Feld

Standardeinstellungen

Typo3 - Standardeinstellungen

Quellcode aufräumen - Sourcecode verbessern - valides XHTML

Der Core produziert seit 4.0 valides XHTML

weitere Hilfen wenn Extensions nicht valide arbeiten bieten:

Installation von Tidy auf dem SErver (aktivieren im Install-Tool)

HTML Cleaner http://typo3.org/extensions/repository/view/qcom_htmlcleaner/2.4.0/

Das Bordeigene HTML-Cleaning: config.xhtml_cleaning = all

Vorsicht bei den Cleanern wenn JavaScript im Spiel ist weil dieser z.T. zerstört werden kann.

Beispiel aus dem Forum zum Quelltext aufräumen

#Einstellen des DocType auf XHTML Transitional
config.doctype = xhtml_trans
#XHTML Cleaning aktivieren
config.xhtml_cleaning = all
#Default Javascripts in externes File auslagern
config.removeDefaultJS = 1
config.removeDefaultJS = external
#<?xml... ?> Prolog deaktivieren
config.xmlprologue = none
#CSS Datei in externes File auslagern
config.inlineStyle2TempFile = 1
config.disablePrefixComment = 1

#RTE Tuning
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >
#Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, h1, h2, h3, h4, h5, h6

#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap = |

#Standard-Headings aufräumen
lib.stdheader.stdWrap.dataWrap =
lib.stdheader.10.1.fontTag = <h1>|</h1>
lib.stdheader.10.2.fontTag = <h2>|</h2>
lib.stdheader.10.3.fontTag = <h3>|</h3>
lib.stdheader.10.4.fontTag = <h4>|</h4>
lib.stdheader.10.5.fontTag = <h5>|</h5>

#Content Elemente aufräumen und Kommentare entfernen
tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prefixComment >
tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >

Navigation

Menüs mit Fluid ab TYPO3 8

In neueren TYPO3 Installationen bietet sich dieses Vorgehen an.

https://www.thomaskieslich.de/blog/132-typo3-8-menues-mit-fluid-und-menuprocessor-erstellen/
TYPO3 - Navigation mit DataProcessing

Navigation mit Seitenid in Klasse für individuelles Styling

 ...
 NO.allWrap=<li id="hd-nav-{field:uid}">|
 ...

Standard Navigation Beispiele

ak-freizeiten

temp.navi_vBulletList = HMENU
temp.navi_vBulletList {
    special = directory
    special.value = 44
    #entryLevel = 0
   1 = TMENU
   1.noBlur = 1
   1.wrap = <ul class="navi1">|</ul>
   1.NO = 1
   1.NO.linkWrap = <li class="naviL1">|</li>
   1.ACT = 1
   1.ACT.linkWrap = <li class="naviL1_act">|</li>
   1.ACTIFSUB = 1
   1.ACTIFSUB.linkWrap = <li class="naviL1_act">|</li>

    2 = TMENU
   2.noBlur = 1
   2.wrap = <ul class="navi1_1">|</ul>
   2.NO = 1
   2.NO.linkWrap = <li class="naviL1_1">|</li>
   2.ACT = 1
   2.ACT.linkWrap = <li class="naviL1_1_act">|</li>
   2.ACTIFSUB = 1
   2.ACTIFSUB.linkWrap = <li class="naviL1_1_act">|</li>

}

GMenu mit Bildern aus den Seiteneigenschaften (Media-Feld)

Ein Schnipsel vom 12.3.2009 typo3 blogger Nicht sehr oft benötigt, aber unter Umständen dennoch hilfreich: ein kleines Copy&Paste Tutorial zur Erstellung eines GMENUs mit Bildern aus dem “media”-Feld der Seiteneigenschaften. Zu beachten gibt es: der GIFBUILDER greift bei diesem Snippet das Bild nicht an, sodass es unverändert im Frontend ausgegeben wird. Dies hatte bei mir den Grund, dass die Website nur aus Bildern besteht und Photoshop nunmal bessere Ergebnisse als ImageMagick bzw. GraphicsMagick liefert - deshalb wollte ich auch nicht, dass er irgendwas an den Bildern verändert oder neu berechnet.

temp.menu = HMENU
temp.menu {
	1 = GMENU
	1 {
		wrap = <ul>|</ul>
 
		noBlur = 0
		NO = 1
		NO {
			wrap = <li>|</li> 
 
			altImgResource.import = uploads/media/
			altImgResource.import.field = media
			altImgResource.import.listNum = 0
 
			ATagTitle.field = subtitle // title
		}
 
		RO = 1
		RO < .NO
		RO {
			altImgResource.import.listNum = 1
		}
 
		ACT < .RO
	}
}
 
lib.menu < temp.menu

Welches Bild (falls mehrere vorhanden sind) TYPO3 nun für das Erzeugen des Menüs nimmt bestimmt folgende Zeile:

altImgResource.import.listNum = 0

Zu beachten gibt es dabei: wie in der Datentechnik üblich fängt man bei 0 zu zählen an, 0 ist dabei das erste Bild, 1 das zweite, 2 das dritte, usw.

Ein etwas ausführlicheres:

TYPO3 Navigation aus Bildern im Media Feld

GMENU und wrapItemAndSub Workaround mit TMENU

Ebenfalls von Typo3Blogger

Freunde von semantisch korrektem HTML die auf ein grafisches, mehrstufiges Menü angewiesen sind, werden wissen wovon ich spreche. Man hat ein tolles GMENU gebastelt, welches wunderbare Grafiken liefert und fragt sich “warum ist mein HTML kaputt?”. Nach ein paar Sekunden googlen findet man die Antwort: GMENU fehlt die Eigenschaft “wrapItemAndSub”, mit welchem sich einfach verschachtelte Menüs realisieren lassen. Es gibt viele Ansätze dies zu umgehen, manche arbeiten mit IFSUB, manche verlassen sich auf Tidy. Vor Kurzem stand ich (wieder einmal) vor dem Problem und wollte es einmal anders lösen.

Dabei bin ich auf folgende Lösung gestoßen:

temp.mainMenu = HMENU
temp.mainMenu {
	1 = TMENU
	1 {
		wrap = <ul>|</ul>
		NO = 1
        	NO {
        		wrapItemAndSub = <li>|</li>
        		doNotShowLink = 1
 
			RO = 1
			ATagTitle.field = title
 
			beforeImg = GIFBUILDER
			beforeImg {
				XY=[20.w]+15,42
				backColor = #1092AD
 
				10 = TEXT
				10 {
					text {
						field = title
						align = center
					}			
 
					fontFile = fileadmin/font.ttf
					fontSize = 16
					fontColor = #FFFFFF
 
					offset = 0,34
				}
			}
 
			beforeROImg < .beforeImg
			beforeROImg.20.fontColor = #FFD20F
			beforeImgLink = 1
		}
 
		ACT < .NO
		ACT {
			RO = 0
			beforeImg.20.fontColor = #FF0000
			wrapItemAndSub = <li class="act">|</li>
		}
        }
 
       2 < .1
}
 
lib.mainMenu < temp.mainMenu

Das tolle an dieser Lösung ist nicht nur, dass man wrapItemAndSub verwenden kann, nein auch alle anderen Eigenschaften und Zustände des TMENU stehen einem zur Verfügung!

Ich frage mich, warum wrapItemAndSub bis heute noch nicht in TYPO3 implementiert wurde. Vielleicht wäre es mit der aktuellen Veröffentlichung der TYPO3 4.3 Alpha 2 und der Aufforderung die Feature-Wunschliste zu füllen einmal Zeit diesem Punkt etwas Nachdruck zu verleihen. Falls ihr noch andere Lösungsansätze auf Lager oder bessere Ideen habt, bitte informiert uns in den Comments!

Klassisches List Menu

Dieses Menü kann als Grundbaustein für alle möglichen Menüs verwendet werden. Man kopiert sich das Menü in ein neues Objekt und modifiziert dort die Eigenschaften wie man sie braucht. Als Alternative gibt es noch das Menue als CSS formatierte Liste in dem ein fixer Startpunkt vorgegeben ist:

Accessible

benötigt cronaccessiblemenues

temp.listMenu = HMENU

# Falls das Menü nicht bei der obersten Ebene anfangen soll
 temp.listMenu.entryLevel = 1

# Bei Bedarf einzelne Seiten aus dem Menü ausschließen
#temp.listMenu.excludeUidList = 1,2,3

temp.listMenu.1 = TMENU
temp.listMenu.1 {
  wrap = <ul>|</ul>
  noBlur = 1
  IProcFunc = user_cronaccessiblemenus->makeAccessible

//NO.after = xyz
# Access Keys einschalten
  IProcFunc.accessKeys = 1

# Hierarchische Nummerierung der Menüpunkte einschalten
  IProcFunc.dfn = 1
  IProcFunc.accessKeyWrap = <span class="accessKey">|</span>
  IProcFunc.appendWrap = <span class="invisible"> (ALT-|)</span>

# Die folgenden Accesskeys nicht verwenden (bereits belegt)

  IProcFunc.forbiddenKeys = 0,D,B,A,F,X,m,p

# Einstellungen für nicht-aktive Seiten

  NO {
    wrapItemAndSub = |*| <li class="NO"> | <span class="invisible">.</span></li>|*|<li class="NO last"> | <span class="invisible">.</span></li>
    stdWrap.htmlSpecialChars = 1
#    stdWrap.wrap = |abc
    ATagTitle.field = abstract // description
  }

# Einstellungen für Seiten, die sich in der Rootline befinden

  ACT = 1
  ACT {
    wrapItemAndSub = |*| <li class="ACT"> | <span class="invisible">.</span></li> |*| <li class="ACT last"> | <span class="invisible">.</span></li>
    stdWrap.htmlSpecialChars = 1
    ATagTitle.field = abstract // description
  }

# Einstellungen für die aktuelle Seite

  CUR = 1
  CUR {
    wrapItemAndSub = |*| <li class="CUR"> | <span class="invisible">.</span></li> |*| <li class="CUR last"> | <span class="invisible">.</span></li>
    stdWrap.htmlSpecialChars = 1
    doNotLinkIt = 0
  }
}

# Gleiche Einstellungen für die nächsten Ebenen

temp.listMenu.2 = TMENU
temp.listMenu.2 < temp.listMenu.1

temp.listMenu.3 = TMENU
temp.listMenu.3 < temp.listMenu.2

temp.listMenu.4 = TMENU
temp.listMenu.4 < temp.listMenu.2

Classic (not accessible)

temp.listMenu = HMENU

# Falls das Menü nicht bei der obersten Ebene anfangen soll
 temp.listMenu.entryLevel = 1

# Bei Bedarf einzelne Seiten aus dem Menü ausschließen
#temp.listMenu.excludeUidList = 1,2,3

temp.listMenu.1 = TMENU
temp.listMenu.1 {
  wrap = <ul>|</ul>
  noBlur = 1

# Einstellungen für nicht-aktive Seiten

  NO {
    wrapItemAndSub = |*| <li class="NO"> | </li>|*|<li class="NO last"> | </li>
    stdWrap.htmlSpecialChars = 1
    ATagTitle.field = abstract // description
  }

# Einstellungen für Seiten, die sich in der Rootline befinden

  ACT = 1
  ACT {
    wrapItemAndSub = |*| <li class="ACT"> | </li> |*| <li class="ACT last"> | </li>
    stdWrap.htmlSpecialChars = 1
    ATagTitle.field = abstract // description
  }

# Einstellungen für die aktuelle Seite

  CUR = 1
  CUR {
    wrapItemAndSub = |*| <li class="CUR"> | </li> |*| <li class="CUR last"> | </li>
    stdWrap.htmlSpecialChars = 1
    doNotLinkIt = 0
  }
}

# Gleiche Einstellungen für die nächsten Ebenen

temp.listMenu.2 = TMENU
temp.listMenu.2 < temp.listMenu.1

temp.listMenu.3 = TMENU
temp.listMenu.3 < temp.listMenu.2

temp.listMenu.4 = TMENU
temp.listMenu.4 < temp.listMenu.2

Multilanguage Menu

Typo3 - Multilanguage Menu

Bilder Menü

siehe: Typo3 - Bildermenü

Einfaches Menü mit 1 Ebene (CSS)

siehe: Menue als CSS formatierte Liste

Menü mit 2 Ebenen als verschachtelte Liste

Dieses Menü ist besonders für vertikale Navigationen geeignet

Constants

# Einstieg Level 1
navi-L12-startID = 1
navi-L12-delimiter =   |  
navi-L12-delimiter =

Setup

### Top Navigation ###
temp.navi-L12 = HMENU
temp.navi-L12 {
  #stdWrap.case = lower
  special = directory
  # Seitenid für den Einstieg
  special.value = {$navi-L12-startID}
  # Ebene für den Einstieg (nicht vergessen wg. 2. Level)
  entryLevel = 1
  1 = TMENU
  1{
    noBlur = 1
    wrap = <ul>|</ul>
    NO = 1
    NO.linkWrap = |*| <li>|{$navi-L12-delimiter}</li> |*| <li>|</li>
    ACT = 1
    ACT.linkWrap =  |*| <li class="on">|{$navi-L12-delimiter}</li> |*| <li class="on">|</li>
    ACTIFSUB = 1
    #Wenn Unterpunkte dann li aufmachen
    ACTIFSUB.linkWrap = <li class="on">|
  }
  2 = TMENU
  2{
   noBlur = 1
   NO = 1
   #Unterpunkt also neue ul und danach li zu (von L1 geöffnet)
   wrap = <ul>|</ul></li>
   NO.linkWrap = |*| <li>|{$navi-L12-delimiter}</li> |*| <li>|</li>
   ACT = 1
   ACT.linkWrap =  |*| <li class="on">|{$navi-L12-delimiter}</li> |*| <li class="on">|</li>

  #ACTIFSUB = 1
  #ACTIFSUB.linkWrap = <li class="on">|</li>
  }
}

Menü mit 2 Ebenen als separate Listen

Dieses Menü ist besonders für horizontale Navigationen geeignet.

Da die 2. Ebene relativ angegeben wird muß man bei mehreren Navigationsbäumen aufpassen, daß evt. ein Untermenü einer anderen Navigation (anderer Baum) ebenfalls angezeigt wird. Das läßt sich z.B. umgehen in dem man das Navitemplate erst im Unterbaum setzt oder indem man im Hauptbaum eine Bedingung setzt ([PIDinRootline = 123])

Ebene 1 ist im Prinzip eine einfache Liste: Constants

# Navi nur Level1
#Startpunkt
navi_startID = 1

#Trennzeichen für horizontale Navi:
naviL1-delimiter =   |  

Setup

### Top Navigation ###
temp.naviL1 = HMENU
temp.naviL1 {
  #stdWrap.case = lower
  special = directory
  # Seitenid für den Einstieg
  special.value = {$navi_startID}
  1 = TMENU
  1.noBlur = 1
  1.wrap = <ul>|</ul>
  1.NO = 1
  1.NO.linkWrap = |*| <li>|{$naviL1-delimiter}</li> |*| <li>|</li>
  1.ACT = 1
  1.ACT.linkWrap =  |*| <li class="on">|{$naviL1-delimiter}</li> |*| <li class="on">|</li>
  #1.ACTIFSUB = 1
  #1.ACTIFSUB.linkWrap = <li class="on">|</li>
}

Für Ebene 2 wird eine weitere Liste generiert wenn man sich in einem bestimmten Level befindet: Constants

# Navigation nur ab Level x  als ul (Standard entry Level1=2.Level)

#Trennzeichen für horizontale Navi:
naviLx-delimiter =   |  
naviLx-entryLevel = 1

Setup

temp.naviLx = HMENU
temp.naviLx {
  # Seitenbaumebene ab Level 1 darstellen (2. Ebene)
   entryLevel = {$naviLx-entryLevel}
# Level 2
   1 = TMENU
   1{
      noBlur = 1
      wrap = <ul>|</ul>
      NO = 1
   # Für horizontale Navi mit delimiter bei vertikal einfach nichts setzen
      NO.linkWrap = |*| <li>|{$naviLx-delimiter}</li> |*| <li>|</li>

      ACT = 1
   # Für vertikale Navi ohne delimiter...      
      #ACT.linkWrap = <li class="on">|</li>
   # und horizontal mit delimiter
      ACT.linkWrap =  |*| <li class="on">|{$naviLx-delimiter}</li> |*| <li class="on">|</li>    

      #ACTIFSUB = 1
      #ACTIFSUB.linkWrap = <li class="on">|
   }
}

Menü als CSS formatierte Liste (allgemein)

Menue als CSS formatierte Liste

CSS-Flyout Menü

Typo3 - CSS-Flyout Menü

Sauberes grafisches Menü

Typo3 - Grafisches Menü

Extensions

Autoparser (automaketemplate und Templateswitcher (tx_rlmptmplselector) konfigurieren

Der Template - Switcher benötigt automaketemplate (oder man arbeitet direkt mit TS-Templates). Am besten gleich beide in einem Basis Template konfigurieren:

Siehe auch TYPO3 - Template-Auswahl

### SET UP TEMPLATE SELECTOR ###
plugin.tx_rlmptmplselector_pi1 {

// Define the paths leading to our HTML template files
   templatePathMain = fileadmin/dinos/templates/main/
   templatePathSub = fileadmin/dinos/templates/sub/

      // Define the filenames used as the default HTML templates
   defaultTemplateFileNameMain = main.html
   defaultTemplateFileNameSub = sub01.html

      // If there is a page having no template selected, use a template
      // selected earlier in the rootline. If there is none, use the default
    inheritMainTemplates = 1
    inheritSubTemplates = 1
}

### Autoparser Konfigurieren (alle IDs als Marker) ###

plugin.tx_automaketemplate_pi1{
#  content = FILE
#  content.file = fileadmin/templates/main/main.html

  content < plugin.tx_rlmptmplselector_pi1
  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY
    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.all.rmTagSections = title
    DIV.all = 1
    TD.all = 1
  }
    relPathPrefix = fileadmin/dinos/templates/main/
}

News - Modul

Hier gibt es fertige Konfigurationen: News (tt_news)

eCards - sr_sendcard

# The Fast Way:
# plugin.tx_srsendcard_pi1._CSS_DEFAULT_STYLE = @import url("fileadmin/dinos/templates/css/srsendcard.css");
# But better is this (more flexible lesser Overhead)

plugin.tx_srsendcard_pi1._CSS_DEFAULT_STYLE >

[PIDinRootline = 14]
page.includeCSS.file2 = fileadmin/dinos/templates/srsendcard/srsendcard.css
[global]

plugin.tx_srsendcard_pi1{

templateFile = fileadmin/dinos/templates/srsendcard/srsendcard.tmpl
locale_all = de_DE
oldYear = 2006
# Vorschauseite (wenn gewünscht)
# previewPID = your_page_id
enableHTMLMail = 1
siteEmail = info@start-reutlingen.de
siteName = Erben der Dinos
# musicDir = EXT:sr_sendcard/music
#cardMusicFiles = autumnleaves.mid, OverTheRainbow.mid, Pomp_and_Circumstance.mid
disableMusic = 1
maxCol = 2
imageSmallWidth = 150
imageSmallHeight = 150
imageBigWidth = 300
imageBigHeight = 300
#logo
#logoAlignHor = right
#logoAlignVert = bottom
#useAlternateImageOnPrint
### For use with other pids use this one too
#createPID
#formPID
#previewPID
#useCAPTCHA = 0
#viewPID
#printPID
### Erscheinungsbild ###
cardStamp = fileadmin/dinos/templates/srsendcard/stamp.gif
#date_stdWrap
disableSendDate = 1
cardBgcolors = #FFFFFF,#A00A1C,#FF993F
cardFontcolors = #000000, #FFFFFF,#A00A1C
#disableFontcolors
#disableFontfaces
#disableCardOptions
#graphicMess
#graphicMessWidth
#graphicMessFontFiles
#graphicMessFontSizes
#fontDir
#doNotShowCardCaptions
cardPresentationOrder = manual
salutation = informal
#disableBgcolors = 1
}

Zufallsbild tx_ccrandomimage

TypoScript - Setup

### zufallsbild erzeugen ###
includeLibs.tx_ccrandomimage = EXT:cc_random_image/pi1/class.tx_ccrandomimage_pi1.php

// USER_INT means 'no caching'
temp.randomImage = USER_INT
temp.randomImage{
  userFunc = tx_ccrandomimage_pi1->main
  path = fileadmin/randomImage/
  fileExt = jpg,jpeg,gif,png
  #Das Render Objekt ist ein content object array (COA) mit einem Bild
  #Vor dem Rendern werden die ###FILE_x### marker mit den Bildern aus path ersetzt
  renderObj = COA
  renderObj {
    10 = IMAGE
    10.file = ###FILE_1###
    // ... weitere Bilder wenn benötigt
  }
}

hCard - Microformat

Das Thema Semantic Web wird inzwischen immer interessanter, darum kam ich auf die Idee - fast allein mit TypoScript - das bekannte hCard-Microformat in TYPO3 zu integrieren.

Was wir dafür brauchen ist eine eigene kleine Extension, diese benötigen wir lediglich für eine einzige Zeile Code, welche in die Datei ext_tables.php kommt:

  1.
     t3lib_extMgm::addToInsertRecords('fe_users');

Dazu jetzt noch das TypoScript:

  1.
     temp.hcard = COA
  2.
     temp.hcard {
  3.
     wrap =
  4.

|

  5.
      
  6.
     10 = IMAGE
  7.
     10.file {
  8.
     import = uploads/pics/
  9.
     import.field = image
 10.
     width = 40
 11.
     params = class="photo"
 12.
     }
 13.
     20 = TEXT
 14.
     20.field = name
 15.
     20.typolink.parameter.field = url
 16.
     20.typolink.ATagParams = class="url fn"
 17.
     30 = TEXT
 18.
     30.field = company
 19.
     30.wrap =
 20.

|

 21.
      
 22.
     40 = TEXT
 23.
     40.field = email
 24.
     40.typolink.parameter.field = email
 25.
     40.typolink.ATagParams = class="email"
 26.
     50 = COA
 27.
     50 {
 28.
     wrap =
 29.

|

 30.
      
 31.
     10 = TEXT
 32.
     10.field = address
 33.
     10.wrap =
 34.

|

 35.
      
 36.
     20 = TEXT
 37.
     20.field = city
 38.
     20.wrap = |
 39.
     30 = TEXT
 40.
     30.field = zip
 41.
     30.wrap = |
 42.
     40 = TEXT
 43.
     40.field = country
 44.
     40.wrap = |
 45.
     }
 46.
     60 = TEXT
 47.
     60.field = telephone
 48.
     60.wrap =
 49.

|

 50.
      
 51.
     }
 52.
      
 53.
     // fe_users dem type shortcut hinzufügen
 54.
     tt_content.shortcut.20.0.tables = fe_users
 55.
     // für Tabelle fe_users sagen wir jetzt noch wie es gerendert werden soll.
 56.
     tt_content.shortcut.20.0.conf.fe_users < temp.hcard
 57.
      

Und was hat uns das jetzt gebracht? Ganz einfach:

  1. Wir haben das Content Element "Insert Record" um die Tabelle fe_users erweitert.
  2. Wir haben mit dem TypoScript aus dem Object "temp.hcard" eine komplette hCard definiert, welche jetzt mit meinem fe_user Datensatz befüllt werden kann.
  3. Durch die CSS-Klassen kann man die Visitenkarte nun auch noch schön aussehen lassen.

Sind alle Daten vorhanden, könnte der erzeugte HTML-Code dann so aussehen:

  1.
      
  2.

  3.
     <img style="float:left; margin-right:4px" src="http://typo3weblog.de/frank.png" alt="photo of " class="photo"/>
  4.
     <a class="url fn" href="http://typo3weblog.de">Frank Nägler</a>
  5.

TYPO3Weblog.de

  6.
      
  7.
     <a class="email" href="mailto:frank.naegler@e-netconsulting.rl">frank.naegler@e-netconsulting.rl</a>
  8.

  9.

Sievekingsallee 150b

 10.
      
 11.
     Hamburg
 12.
     22111
 13.
     Deutschland
 14.

 15.

+49 (0)7000 623 45 37

 16.

 17.
      

Cool oder?

Die komplette Extension fn_hcard als T3X Export habe ich hier für Euch zum Download.

Aus Typo3 Adventskalender2008

Extension: Direct Shortcuts (sms_directshortcuts)

http://typo3.org/extensions/repository/view/sms_directshortcuts/current/ TYPO3 generiert, wie jeder weiss, bei internen Verweisen immer eine extra Seite, die selbst wiederum einen redirect macht. Dieses vorgehen hat einerseits den Vorteil, dass man Skripte dazwischen schieben kann um z.B. Klicks zu tracken, anderseits den Nachteil, dass eine “falsche” URL im Menü zu finden ist. Dieser Nachteil macht sich bemerkbar wenn man sich mit der Suchmaschinenoptimierung von TYPO3 Seiten beschäftigt.

Nützliche TS-Templates

Tabellen im RTE

Details: http://dev.datenwolken.de/index.php?id=195

Standardklasse contenttable unterdrücken eigene Klassen zulassen

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class >

P Tag raus

lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default >
# gar nichts parsen ist doof deshalb vorerst mal Standards:
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.stdWrap.parseFunc =< lib.parseFunc

Lösung von Steffen Kamper

1. Lösung von SK

1. wichtig, damit die nicht in p gewrappt werden
2. lib.parseFunc_RTE.externalBlocks = ul,ol,table

1. nochmaliges parsen von tabellenzellen auschalten, damit inhalte nicht wieder in p gepackt werden
2. lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.callRecursive = 0

1. nachträgliches ermöglichen von Links in Tabellenzellen
2. lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.stdWrap.parseFunc {
3. makelinks = 1
4. makelinks.http.keep = scheme,path,query
5. makelinks.mailto.keep = path
6. tags {
7. link = TEXT
8. link {
9. current = 1
10. typolink.parameter.data = parameters : allParams
11. }
12. }
13. }

Externes JavaScript einbinden

JavaScript im Header

Beispiel:

temp.addHeaderData=COA

[browser = msie]

temp.addHeaderData{
    90 = TEXT
    90.value (
        <script src="fileadmin/templates/scripts/ielt7.js" type="text/javascript"></script>
    )
    90.wrap = <!--[if lte IE 7]> | <![endif]-->
    #90.stdWrap.char = 10

}

[global]

Hier wird für IE kleiner als Version 7 ein JavaScript File eingebunden.

JavaScript als Marker

Als Temporäres Objekt, kann natürlich auch Javascript in einen Marker eingebunden werden.

JavaScript über Record

Eine Möglichkeit die das leichte ändern der Skripte zuläßt wäre folgende. Man legt irgendwo auf einer Seite ein HTML - Element an hinterlegt das Skript und verweist mit TypoScript auf diesen RECORD. Bzw. bindet ihn im Template ein.

ToDo Beispiel

xhtml optimierung

Einiges davon braucht man in Version 4+ nicht mehr...

#######################################################
############ XHTML optimieren
#######################################################

#Default Javascripts in externes File auslagern
config.removeDefaultJS = 1
config.removeDefaultJS = external

#<?xml... ?> Prolog deaktivieren
config.xmlprologue = none

#<html lang="de" xml:lang="de"> auf de setzen
config.htmlTag_langKey = de

#CSS Datei in externes File auslagern
config.inlineStyle2TempFile = 1
config.disablePrefixComment = 1

#RTE Tuning
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.remapTag >
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.DIV.class >

#Angabe von Tags, die nicht mit einem zusätzlichen wrap umgeben werden dürfen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList =  div, p, h1, h2, h3, h4, h5, h6

#Entfernt die zusätzlichen CSS-Klassen
lib.stdheader.3 = LOAD_REGISTER
lib.stdheader.3.headerClass =
lib.stdheader.3.headerClass.noTrimWrap = |
lib.stdheader.stdWrap.dataWrap = |

#Standard-Headings aufräumen
lib.stdheader.stdWrap.dataWrap =
lib.stdheader.10.1.fontTag = <h1>|</h1>
lib.stdheader.10.2.fontTag = <h2>|</h2>
lib.stdheader.10.3.fontTag = <h3>|</h3>
lib.stdheader.10.4.fontTag = <h4>|</h4>
lib.stdheader.10.5.fontTag = <h5>|</h5>

#Content Elemente aufräumen und Kommentare entfernen
#tt_content.stdWrap.dataWrap >
tt_content.stdWrap.prefixComment >
#tt_content.header.20.dataWrap >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.mailform.20.stdWrap.wrap >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >

#Cleargif entfernen
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0

#Auch hinter den Headlines
tt_content.text.20.parseFunc.tags.typohead.stdWrap.space = 0|0

# Sicherstellen, dass nonTypoTagStdWrap nur im Inhalt außerhalb von
#<typolist> und <typohead> arbeitet:
tt_content.text.20.parseFunc.tags.typolist.breakoutTypoTagContent = 1
tt_content.text.20.parseFunc.tags.typohead.breakoutTypoTagContent = 1

# ... und kein <BR> vor dem typohead.
tt_content.text.20.parseFunc.tags.typohead.stdWrap.wrap >
# Einstellen von nonTypoTagStdWrap, dass der Text mit P-Tags umschlossen wird.
tt_content.text.20.parseFunc.nonTypoTagStdWrap >
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines {
encapsTagList = div, p
remapTag.DIV = P
wrapNonWrappedLines = |
innerStdWrap_all.ifEmpty =
innerStdWrap_all.textStyle < tt_content.text.20.textStyle
}

# Schließlich noch Entfernen der alten textstyle-Formatierung des gesamten Haupttextes.
tt_content.text.20.textStyle >

# ... und der <BR>-Tag nach dem Inhalt wird auch nicht mehr gebraucht...
tt_content.text.20.wrap >

# clear.gif entfernen
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0

# clear.gif hinter den Überschriften entfernen
tt_content.text.20.parseFunc.tags.typohead.stdWrap.space = 0|0

#Attribute für p- und pre-tags entfernen
tt_content.text.20.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes {
P.style=
PRE.style=
}

# Unterdrückt den Umbruch < br >
lib.stdheader.10.stdWrap.wrap = |
tt_content.textpic.20.spaceBelowAbove = 0
tt_content.image.20.spaceBelowAbove = 0
tt_content.textpic.20.noStretchAndMarginCells = 1
tt_content.image.20.noStretchAndMarginCells = 1

# Setup Anker-Tags entfernen
tt_content.noANameTagForFirstRecord = 1

Inhalte von Backend-Feldern ausgeben

Hinweise dazu findest du unter:

TypoScript - Daten auslesen

Ein Breadcrumb Menü (Rootline-Menü)

Constants

<nowiki>
#[begin-level] | [end-level]
# Variante 1: Seite 1 | Seite 2 | Seite 3
rootlineDelimiter =  | 
# Variante 2: Seite 1 > Seite 2 > Seite 3
# delimiter =  > 

Setup

temp.rootline = HMENU
temp.rootline {
   special = rootline

# zeige komplette rootline an
   special.range = 2|-1

# Variation: zeige Link auf die übergeordnete Seite
   #special.range = -2|-2

# Text vor dem Rootline Menü
   wrap = Sie sind hier: |

   special.targets.3 = page
   1 = TMENU
   1.target = _top
   1.NO {
   	ATagBeforeWrap = 0
   	stdWrap.htmlSpecialChars = 1
   	linkWrap = |{$rootlineDelimiter}|*||*| |
   }
}

[globalVar = GP:L = 1]
temp.rootline.wrap = You are here: |
[GLOBAL]

[globalVar = GP:L = 2]
temp.rootline.wrap = Vous êtes ici: |
[GLOBAL]
</nowiki>

Ein CSS-Template mit Markern nutzen

Ein CSS File wird eingelesen, enthaltene Marker dynamisch ersetzt und die Styles im Headerbereich der Seite als Inline-Styles eingebunden.

Constants

color1 = FFE292
color2 = F68D6F
color3 = FABD9E

backgroundImage = fileadmin/templates/main/images/navBack-grey.gif

Setup

# das Objekt zunächst als Bibliothek zur späteren Verwendung
lib.stylesheet.default = TEMPLATE
lib.stylesheet.default {
# template einlesen
  template = FILE
  template.file=fileadmin/templates/main/colors.css
# Platzhalter ersetzten
  marks{
     COLOR1 = TEXT
     COLOR1.value = {$color1}
     COLOR2 = TEXT
     COLOR2.value = {$color2}
     COLOR3 = TEXT
     COLOR3.value = {$color3}
     
     NAVBACK = TEXT
     NAVBACK.value = {$backgroundImage}
  }
}

# Stylesheet in Header eintragen
page.headerData{
   90 = COA
   90{
      wrap = <style type="text/css"><!-- | --></style>
      50 < lib.stylesheet.default
      }
   }
}

Bild aus Media-Feld auslesen

siehe auch "Das Media Feld"

temp.mediaFieldImage=IMAGE
temp.mediaFieldImage.file {  
  import.data = levelmedia: 2,slide  
  import = uploads/media/  
  import.listNum = 0  
  #width = 270  
  #height= 300
}

Bild aus Ressourcen Feld auslesen

Hinweis Seiteneigenschaften > Resourcen

 temp.mein Bild = IMG_RESSOURCE
 temp.mein Bild{
  file = hintergrund*.jpg
  stdWrap.wrap = <div style="background-image: | ; padding: 5px;"> ein Kasten </div>
 }

Hinweis: Typo3 vergibt beim vervielfältigen automatisch eine Endung. Damit das Bild trotzdem immer gefunden wird, ein Sternchen setzen (Joker)

Bild automatisch mit Alt-Tag versehen

Dieses TypoScript füllt das Alt-Tag Feld mit Daten aus dem Bildnamen z.B. wird Unser_Urlaubsort.jpg zu Unser Urlaubsort

Bild automatisch mit Alt-Tag versehen

Logo mit Verlinkung auf die Homepage (1.2)

Constants

# Link für das Logo
# Zahl (Seiten-ID), URL (www.zielseite.de) oder Email-Adresse
logoLink = 1
logoFile = fileadmin/templates/images/logo.gif

Setup

# Fügt ein Logo mit Link ein

temp.logo = IMAGE
temp.logo {
   #file = /fileadmin/dinos/templates/main/images/logo-rt.gif
   file = {$logoFile}
   stdWrap.typolink.parameter = {$logoLink}
}   

Copyright mit immer aktuellem Jahr

TypoScript Setup

temp.copyright = COA
temp.copyright{
   5= TEXT
   5.value = © 
   10 = TEXT
   #HeUte Timestamp einlesen
   10.data = date:U
   10.data.strftime = %Y 
}

ein anderes Beispiel:

subparts.footer{
   10 = TEXT
   10.data = date:Y
   10.wrap = <p class="footer">© | Ich</p>
}

Datum der letzten Änderung anzeigen

Constants

lastChangePrefix = Letzte Änderung: 

Setup

temp.lastChange = COA
temp.lastChange.5 = TEXT
temp.lastChange.5.value={$lastChangePrefix}
temp.lastChange.10 = TEXT
temp.lastChange.10.register:SYS_LASTCHANGED
temp.lastChange.10.strftime = %d.%m.%Y

Variante

temp.lastChange = TEXT
temp.lastChange {
  data = page:lastUpdated
  if.isTrue.data = page:lastUpdated
  date = d.m.Y
  wrap = Letzte Änderung: |
  wrap2 = |
  data = register : SYS_LASTCHANGED
  if >
}

Seiten IDs im Seitenbaum anzeigen

UserTS

options {
  pageTree.showPageIdWithTitle = 1
}

Client Daten des Benutzers ausgeben

     temp.browserinfo = COA_INT
     temp.browserinfo {
     10 = TEXT
     10.data = TSFE:clientInfo|SYSTEM
     10.wrap = <p> | <br />

     20 = TEXT
     20.data = TSFE:clientInfo|BROWSER
     20.wrap = |  
      
     30 = TEXT
     30.data = TSFE:clientInfo|VERSION
     30.wrap = | </p>
     }

Die Ausgabe von Inhalten verändern

Inhalte Vererben, Content Collector, Slide

Mit der Eigenschaft slide kann man Inhalte auf Unterseiten vererben.

### content_collector ###
styles.content.getBorder.slide = -1
styles.content.getBorder.slide {
     collect = -1
     collectReverse = 1
}

Typolinks in HTML Elementen Parsen

#
# TypoLinks auch in HTML-Elementen parsen
#
# Syntax:
# ausgelassene Parameter können hinten weggelassen oder durch "-" freigehalten werden
# <link PID/URL/Mail TARGET/WIDTHxHEIGHT CLASS "TITLE">LINKTEXT</link>
#
# Beispiele:
# <link 2>Zur Seite</link>
# <link 7 - a-link "zur Information">hier</link>
# <link http://www.google.de 300x400 myPopup-class "in neuem Fenster">Google</link>
# <link info@abc.de - myMail "E-Mail senden">Kontakt</link>
#
tt_content.html.parseFunc.tags.link < lib.parseFunc.tags.link  

Wenn die Targets fest vergeben werden sollen:

tt_content.html.parseFunc.tags.link.typolink {
    extTarget >
    extTarget = _self
    target >
    target = _self
}  

Quelle: http://www.typo3forum.net/forum/typo3-3-x-fragen-probleme/37405-typolink-html-pagecontent-element.html (2013-01)

Ein Inhaltselement an einen Marker schicken

Man kann im HTML-Template einen Marker oder Subpart definieren und diesen mit einem beliebigen Inhaltselement befüllen, daß dann auf allen Seiten angezeigt wird.

temp.teaser = RECORDS

temp.teaser{
  // ID des Datensatzes
  source = 17477
  tables = tt_content
  #conf.tt_content < tt_content // Standard muß nicht angegeben werden
  wrap = <div id="gifbanner">|</div>
}

page.10.subparts.TEASER < temp.teaser

Layout Feld und Layout anpassen

TYPO3 - Content Element Layout

Layout-Rahmen anpassen

Typo3 - Rahmen (Frames)

Rendering von Inhalten

Rollovereffekt auf Bilder mit Hilfe der ImageMagick Effekte

Ausgeben von Informationen im head der Seite

Wie kann man Stylesheet angaben, Metatags, Skripte etc. im Header ausgeben Typo3 - Tipps und Tricks (page.head Objekt)

Unnötige Ausgaben im Quelltext verhindern

TYPO3 - Unnötige Ausgaben im Quelltext verhindern

TypoScript - Basiswissen

Links mit TypoSkript anlegen

Suche

weitere Infos zu Indexed Search:

Typo3 - indexed search

Mit HTML und CObj erzeugtes Login

Das Beispiel von Tim Lochmüller aus dem Adventskalender 2008, zeigt wie man mit dem Template Objekte größere HTML - Bausteine verwenden kann.

Login mit TS & cObj TEMPLATE Georg Ringer in TYPO3, Templates, Tutorial, TypoScript

Nach der interessanten Vorstellung von cli-Scripten durch Frank in Türchen 15 zeigt das folgende Tutorial einen guten Weg, einen Login/Logout-Bereich mit TS & HTML zu verwirklichen, ohne dabei auf irgendeine Extension zurückgreifen zu müssen.

Folgendes HTML ist notwendig und wird beispielsweise in fileadmin/template/login.html abgelegt: http://pastebin.com/f4e963e25 Die beiden Subparts sind jeweils für den Login- & Logout-Bereich zuständig und werden mittels Condition umgeschalten.

Das TS ist sehr einfach aufgebaut

   lib.login = TEMPLATE
   lib.login {
   template = FILE
   template.file = fileadmin/template/login.html

   workOnSubpart = TPL_LOGIN
   marks {
   URL = TEXT
   URL.data = getIndpEnv:TYPO3_REQUEST_URL

   PID = TEXT
   PID.value = 10789

   REGISTER = TEXT
   REGISTER {
   value = Mitglied werden
   typolink {
   parameter = 10786
   additionalParams = &tx_srfeuserregister_pi1[cmd]=edit
   useCacheHash = 1
   ATagParams = class=”link link1″
   }
   }
   PWD = TEXT
   PWD {
   value = Password vergessen?
   typolink {
   parameter = 10788
   ATagParams = class=”link”
   }
   }
   PROFILE = TEXT
   PROFILE {
   value = Mein Wanderprofil!
   typolink {
   parameter = 10790
   ATagParams = class=”link”
   }
   }
   }
   }

   [usergroup = *]
   lib.login.workOnSubpart = TPL_LOGOUT

   [global]

Die notwendigen Variablen sind:

   * URL: Die aktuelle URL, auf die nach dem Login/Logout auch weitergeleitet wird
   * PID: Id der Seite, die die Benutzer enthält

Nützlich sind weiters:

   * REGISTER: Link zu einer Seite, auf der man sich neu registrieren kann
   * PWD/PROFILE: Weitere Links zu Seiten nach Bedarf

Die vorgestellte Variante funktioniert out-of-the-box und muss für andere Algorithmen angepasst werden.

Das Tutorial soll dazu anregen, das TEMPLATE-Objekt öfters als nur 1x zu verwenden, denn gerade wenn es um das Inkludieren von etwas mehr HTML geht, ist dies der beste, schnellste und sauberste Weg.

Benutzer

Autor-Feld bei neuen Seiten automatisch anlegen

TCAdefaults.pages.author = <Name des Redakteurs>
TCAdefaults.pages.author_email = <EMail-Adresse des Redakteurs>

Das funktioniert aber nur dann wenn eine Seite neu angelegt wird. Will man viele Seiten einem Redakteur zuordnen kann man das über eien MySQL abfrage machen:

UPDATE `pages` SET `author` = '<Name des Redakteurs>', `author_email` =
'<EMail-Adresse des Redakteurs>'
WHERE 1 AND `perms_userid` = <UserId des Redakteurs>

in perms_userid steht die ID des Besitzers der Seite, deshalb kann man diesen mit Hilfe des Whereclause ausfiltern.

Author Feld, Email-Feld und News Author automatisch anlegen

Als weitere Möglichkeit gibt es die Extension cron_setdefaultauthor die genau diese Aufgaben übernimmt. Sie arbeitet im Prinzip wie oben angeführt.

Ändern von Extension Meldungen durch den Redakteur

Adventskalender 2008 von Tim Lochmüller Immer wieder erlebe ich es, dass der Kunde Texte selber ändern möchte, klar dafür hat er ja auch von uns TYPO3 bekommen. Leider Zum Glück, möchte der Kunde aber manchmal alles pflegen, also auch Texte die aus LocalLang-Dateien oder Templates kommen.

Eine sehr einfache aber durchaus effektive Lösung dafür ist mal wieder ein wenig TypoScript:

  1.
     plugin.tx_myplugin_pi1.searchError = RECORDS
  2.
     plugin.tx_myplugin_pi1.searchError {
  3.
     tables = tt_content
  4.
     source = 123
  5.
     }

Jetzt noch das ContentElement mit der UID 123 im Seitenbaum anlegen und folgenden PHP Code in der Extension verwenden:

  1.
     $marker['###ERR_SEARCH###'] = $this->cObj->cObjGetSingle(
  2.
     $this->conf['searchError'],
  3.
     $this->conf['searchError.']
  4.
     );

Das war es schon, jetzt enthält der Marker ###ERR_SEARCH### den Content, den der Kunde selbst eingepflegt hat. Natürlich muss man kein RECORD nehmen, sondern kann auch alle anderen TS-Objekte wie TEXT oder IMAGE.

TYPO3 - CSS

CSS Beispiele und Schnipsel für Extensions und Standardelemente gibt es unter: TYPO3 - CSS

Geschützter Login Bereich

Früher schön mit der New Login Box. Diese ist ab 4.3 integriert.

TypoScript Komplette Beispiele

TypoScript - komplette Beispiele