TYPO3 mit Fluid - komplettes Beispiel
Aus Wikizone
Ebene-2-Überschrift[Bearbeiten]
Beispiel Sandherr
TypoScript[Bearbeiten]
Main Template
TS Setup
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/ts/main.txt"> <INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/templates/ts/navigation.txt"> // Bildrendering wg. Responsive Layouts anpassen tt_content.image.20.rendering.dl.caption.innerWrap.override.cObject.value = <dd class="csc-textpic-caption"> | </dd>
main.txt
### CONFIG for Responsive TYPO3###
config {
doctype(
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="de-DE" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7 ]> <html lang="de-DE" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8 ]> <html lang="de-DE" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8 ]><![endif]-->
)
xmlprologue = none
metaCharset = utf-8
renderCharset = utf-8
language = de
locale_all = de_DE@euro
# activate realURL
#simulateStaticDocuments = 0
#tx_realurl_enable = 1
#absRefPrefix = {$BASEURL}
#prefixLocalAnchors = all
# useful imagenames for seo
meaningfulTempFilePrefix = 80
# removes HTML Comments in sourcecode
disablePrefixComment = 1
# # compression and concatenation for JS and CSS
#concatenateCss = 1
#compressCss = 1
#concatenateJs = 1
#compressJs = 1
}
### PAGE COMMON SETTINGS ###
page = PAGE
page {
typeNum = 0
shortcutIcon = myicon.ico
insertClassesFromRTE = 1
}
### FLUID ###
// include in fluid template via cObject Viewhelper: <f:cObject typoscriptObjectPath="lib.content" />
lib.content < styles.content.get
lib.contentLeft < styles.content.getLeft
lib.contentRight < styles.content.getRight
page.10 = FLUIDTEMPLATE
page.10 {
file = fileadmin/templates/fluid/twoCols.html
partialRootPath = fileadmin/templates/fluid/partials/
layoutRootPath = fileadmin/templates/fluid/layouts/
variables {
// include in fluid template like this: <f:format.raw>{content}</f:format.raw>
# content < styles.content.get
# content.select.where = colPos = 0
# content_left < styles.content.get
# content_left.select.where = colPos = 1
# content_right < styles.content.get
# content_right.select.where = colPos = 2
# content_border < styles.content.get
# content_border.select.where = colPos = 3
}
}
### Layoutauswahl abhängig vom BE Feld "Layout" ###
### Bezeichnungen im BE über PageTS setzen ###
#page.10.file.cObject = CASE
#page.10.file.cObject {
# key.data = levelfield:-1, backend_layout_next_level, slide
# key.override.field = backend_layout
# default = TEXT
# default.value = fileadmin/templates/fluid/1col.html
# 2 = TEXT
# 2.value = fileadmin/templates/fluid/2col.html
# 3 = TEXT
# 3.value = fileadmin/templates/fluid/popup.html
#}
### CSS ###
page {
includeCSS {
reset = fileadmin/templates/css/reset.css
reset.media = screen
reset.forceOnTop = 1
fonts = fileadmin/templates/css/fonts.css
main = fileadmin/templates/css/main.css
main.media = all
responsive = fileadmin/templates/css/responsive.css
}
}
### JS ###
page {
includeJSlibs {
modernizr = fileadmin/templates/js/modernizr.custom.js
modernizr.forceOnTop= 1
}
includeJSFooterlibs {
jquery = fileadmin/templates/js/jquery-1.10.2.min.js
jquery.forceOnTop = 1
}
includeJSFooter {
ek = fileadmin/templates/js/ek.js
}
}
### RTE ###
// bodytext Klasse entfernen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
// erlaubte Tags
styles.content.links.allowTags = a, align, abbr, acronym, address, blockquote, b, br, caption, center, cite, code, div, em, h1, h2, h3, h4, h5, h6, hr, i, img, li, link, ol, p, pre, q, span, strike, strong, sub, sup, table, thead, tbody, tfoot, td, th, tr, tt, u, ul, quote
// inline Style aus blockquote entfernen
lib.parseFunc_RTE.externalBlocks.blockquote.callRecursive.tagStdWrap.HTMLparser.tags.blockquote.overrideAttribs >
### RESPONSIVE ###
# no style attributes
tt_content.image.20 {
imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap"> | </div>
imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn"> | </div>
}
# no style attributes for content elements rendering
tt_content.image.20 {
rendering {
dl {
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" > | </dl>
caption.wrap >
caption.innerWrap = <dd class="csc-textpic-caption"> | </dd>
caption.innerWrap.override.cObject = TEXT
caption.innerWrap.override.cObject.value = <dd class="csc-textpic-caption" style="width:{register:imagewidth}px;"> | </dd>
caption.innerWrap.override.cObject.insertData = 1
caption.innerWrap.override.if {
value = 11
isGreaterThan.field = imageorient
}
}
ul {
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"><ul> | </ul></div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"><ul> | </ul></div>
oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###"> | </li>
}
div {
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###"> | </div>
}
simple {
imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap csc-textpic-single-image"> | </div>
}
}
}
# Rendering of image-captions set to HTML5
#tt_content.image.20 {
# renderMethod = figure
# rendering {
# figure {
# imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
# imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
# noRowsStdWrap.wrap =
# oneImageStdWrap.dataWrap = <figure style="max-width:{register:rowwidth}px;"> | </figure>
# imgTagStdWrap.wrap = |
# editIconsStdWrap.wrap = <div> | </div>
# caption.wrap = <figcaption> | </figcaption>
# caption.required = 1
# }
# }
#}
### Responsiveness -> Viewport, IE CSS, Apple Device Icons
page {
headerData.10 = TEXT
headerData.10.value (
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/fileadmin/templates/css/iehacks.css" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
)
}
navigation.txt
