Mit diesem TypoScript Snippsel kann man jede beliebige Lightbox im Frontend nützen. Ihr müsst dazu einfach ein Element Text w/Bild einfügen. In dem Tab Media einfach ein Bild einfügen und Click-enlarge setzen.
// Setup
tt_content.image.20.1.imageLinkWrap {
typolink >
typolink {
parameter.cObject = IMG_RESOURCE
parameter.cObject.file {
import.current = 1
width = {$styles.content.imgtext.linkWrap.width}
height = {$styles.content.imgtext.linkWrap.height}
effects = {$styles.content.imgtext.linkWrap.effects}
}
parameter.override {
field = image_link
listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
}
ATagParams = rel="prettyPhoto"
ATagParams.insertData = 1
ATagParams.if.isFalse < .parameter.override
target = {$styles.content.links.target}
extTarget = {$styles.content.links.extTarget}
}
}
Tags: ts, typo3, typoscript
Kategorie typo3 | 0 comments
Mit diesem TypoScript Snippsel kann man das aktuelle Datum auf einer Website darstellen. Mit der Php Funktion strftime kann man das Datum beliebig formatieren.
// TYPO3 Setup
tmp.date = TEXT
tmp.date {
data = date : U
strftime = %A, %e. %B %Y
}
Hier eine kurze Erklärung zu strftime:
%A = Sonntag bis Samstag
%e = 1 bis 31
%B = Januar bis Dezember
%Y = Jahr: 2009
Mehr dazu findet ihr auf php.net/strftime
Die strftime-Formatangabe ‘%A, %e. %B %Y’ in diesem Beispiel erzeugt eine Ausgabe des Datums im Format ‘Freitag, 14. August 2009′.
Tags: php, ts, typo3, typoscript
Diesmal ein Codesnippsel für ein Grafisches Listen Menu mit Typoscript für mehrere Levels. Dieses Menu ist lauffähig und natürlich noch ausbaufähig.
// TYPO3 Setup
// mainmenu
lib.mainmenu = HMENU
lib.mainmenu {
entryLevel = 0
1 = GMENU
1 {
useLargestItemY = 1
noBlur = 1
expAll = 0
accessKey = 0
wrap =
<ul>|</ul>
NO = 1
NO {
ATagTitle.field = subtitle // title // description
allWrap =
<li>|</li>
XY = [10.w]+4,[10.h]+6
transparentBackground = 1
backColor = #000
10 = TEXT
10 {
text.field = title
offset = 0,16
fontColor = #ffffff
niceText = 0
align = center
fontFile = fileadmin/templates/fonts/verdanab.ttf
fontSize = 11
}
}
RO < .NO
RO = 1
RO.10 {
fontColor = #78d200
}
ACT < .RO
ACT = 1
ACT.10 {
fontColor = #78d200
fontFile = fileadmin/templates/fonts/verdanab.ttf
}
}
2 < .1
2 = GMENU
2 {
wrap =
<ul class="level2">|</ul>
}
}
Tags: menu, ts, typo3, typoscript
Kategorie typo3 | 0 comments
In meiner neuen Serie werden ich euch alle Möglichen Menüs für Typo3 vorstellen. Diesmal ein Codesnippsel für ein Listen Menu mit Typoscript für mehrere Levels.
// TYPO3 settings
// mainmenu
lib.mainnavi = HMENU
lib.mainnavi {
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap =
<ul class="mainnavi">|</ul>
NO = 1
NO {
ATagTitle.field = title // description // abstract
ATagBeforeWrap = 1
stdWrap.htmlSpecialChars = 1
wrapItemAndSub =
<li class="first"> |</li>
|*|
<li> |</li>
|*|
<li class="last"> |</li>
}
ACT = 1
ACT {
ATagTitle.field = abstract // description // title
ATagParams = class = "active"
ATagBeforeWrap = 1
stdWrap.htmlSpecialChars = 1
wrapItemAndSub =
<li class="first"> |</li>
|*|
<li> |</li>
|*|
<li class="last"> |</li>
}
}
2 < .1
2 = TMENU
2 {
wrap =
<ul class="level2">|</ul>
}
3 < .1
3 = TMENU
3 {
wrap =
<ul class="level3">|</ul>
}
4 < .1
4 = TMENU
4 {
wrap =
<ul class="level3">|</ul>
}
}
Erklärungen für das Listen Menu:
Mit wrapItemAndSub habt ihr die Möglichkeit den ersten und dem letzten li eine bestimmte CSS Klasse zuzuweisen.
Mit ATagTitle.field könnt ihr den Anchor eine Title Beschreibung die Ihr im Backend einfügt zuweisen.
Mit stdWrap.htmlSpecialChars = 1 wird darauf geachtet das die HTML-Entities richtig erstellt werden.
Tags: menu, typo3, typoscript
Kategorie typo3 | 0 comments
Hier ein Codesnippsel für ein Brotkrumenmenü (Breadcrumb) Menu/Navigation mit Typoscript erstellt. Dieses spezielle Menü zeigt uns an, wo wir uns gerade befinden. Hier noch einige Beispiele wie man Breadcrumb Menus Effektiv einsetzen kann.
// TYPO3 Constants
baseUrlOn = 1
baseUrl = http://www.domain.de
// TYPO3 settings
lib.breadcrumb = HMENU
lib.breadcrumb {
special = rootline
special.range = 1|-1
includeNotInMenu = 0
1 = TMENU
1 {
noBlur = 1
wrap =
<ul>
<li><a href="{$baseUrl}">Home</a> ></li>
|</ul>
NO {
linkWrap =
<li> | ></li>
ATagTitle.field = abstract // title // description
ATagTitle.noTrimWrap = | zur Seite: |
}
CUR = 1
CUR {
linkWrap =
<li> |</li>
doNotLinkIt = 1
}
}
}
includeNotInMenu = 0/1 gilt für Seiten die auf Hide in Menu gestellt sind.
Tags: menu, typo3, typoscript
Ein Kunde wünschte die Darstellung bestimmter Inhaltselemente in einem bestimmten DIV-Container auf all seinen Seiten. Nach kurzer Nachforschung im Internet fand ich heraus, dass dies sich sehr einfach per TypoScript lösen lässt. Dieser TypoScript Codesnippsel kann für TemplaVoila und Modern Template Building benützt werden.
// Typoscript
lib.sidepanel = COA
lib.sidepanel.10 = RECORDS
lib.sidepanel.10 {
tables = tt_content
source = tt_content_33
}
lib.sidepanel.20 = xxx
tt_content_33 bezieht sich auf die uid 33 des Inhaltes in der tt_content tabelle.
Tags: Modern Template Building, templavoila, typo3, typoscript
In der Regel werden Templates (“Constants” und “Setup”) mit TypoScript direkt im Backend von TYPO3 geschrieben. Das hat jedoch den Nachteil, dass diese während der Entwicklung nur schwer in Versionsverwaltungen (z.B. SVN) zu bringen sind. Ungeachtet dessen kann man Typoscript auch in externe Dateien auslagern. Dazu müsst ihr im Root Verzeichnis einfach ein neues Template anlegen. Kopiert den Snippsel von unten und ändert noch die Pfade!
ACHTUNG! Sobald ihr in der ausgelagerten Typoscript Datei etwas ändert müsst ihr den cache im Backend von Typo3 löschen.
// TYPO3 Constants <INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/pathto/constants.ts"> // TYPO3 settings <INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/pathto/config.ts">
Tags: ts, typo3, typoscript
Kategorie tutorials | 4 comments
Hier ein Codesnippsel der es in Typo3 ermöglicht eine Browserweiche (Conditional Comments) für den Internetexplorer 6 und 7. Zusätzlich kann man auch Javascript einbinden. Einfach folgenden Typoscript Code einfügen.
// Internet Explorer 6 [browser = msie] AND [version = <7] page.headerData.4 = TEXT page.headerData.4.value ( <!--[if lte IE 7]> <style type="text/css" media="screen, projection"> @import "fileadmin/templates/css/ie6.css"; </style> <![endif]--> ) [end] // Internet Explorer 7 [browser = msie] AND [version >6] page.headerData.4 = TEXT page.headerData.4.value ( <!--[if IE 7]> <style type="text/css" media="screen, projection"> @import "fileadmin/templates/css/ie7.css"; </style> <![endif]--> ) [end]
Tags: conditional comments, typo3, typoscript
Kategorie tutorials | 5 comments
