Typo3 - Baukasten

Aus Wikizone
Wechseln zu: Navigation, Suche

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

Navigation

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ü

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: 

### 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
  }
}

Nützliche TS-Templates

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

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 >
}

Die Ausgabe von Inhalten verändern

Layout-Rahmen verändern

Typo3 - Rahmen (Frames)

Rendering von Inhalten

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)

TypoScript - Basiswissen

Links mit TypoSkript anlegen

Suche

Seitenübergreifende einfache Suche

Seitenübergreifendes Suchfeld mit Indexed Search

Konfiguration der Extension

TypoScript indexedSearch-config (V1.02) 

config{
   # Index-Suche einschalten
   index_enable = 1 
   # Externe Dateien auch durchsuchen (pdf,doc...benötigt Erweiterungen)       
   index_externals = 0
}
plugin.tx_indexedsearch{
   # Startpunkte der Suche (12,45...)
   search.rootPidList = 1
   # Diverse Optionen zur Anzeige im Frontend...
   show.rules = 0
   show.resultNumber = 0
   blind.sections = 1
   show.L1sections = 0

   # auf bestimmte Medientypen einschränken
   # search.mediaList = pdf, doc
}

# Temporäres Objekt für das Suchfeld (in neueren Versionen auch Templates möglich 
# es kann auch die macina Searchbox eingesetzt werden (Template Support Mehrsprachigkeit...)

temp.searchBox = TEXT
temp.searchBox.insertData = 1
temp.searchBox.value (
<div class="searchBox">
<form action="index.php?id=4&tx_indexedsearch[sword]" method="post">
  <input type="text" name="tx_indexedsearch[sword]" value="Suche" class="searchBox-field" title="Suche" />
  <input type="image" src="fileadmin/templates/img/lupe.gif" alt="Start" title="Start" />
  <input type="hidden" name="stype" value="L0" />
  <input type="hidden" name="scols" value="tt_content.header-bodytext-imagecaption" />
  <input type="hidden" name="locationData" value="4:pages:4" />
</form>
</div>
)

#plugin.tx_macinasearchbox_pi1.pidSearchpage = 4

Suchfeld einbinden

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.

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Typo3_-_Baukasten&oldid=910“