TYPO3 mit Fluid - komplettes Beispiel

Aus Wikizone
Version vom 23. Januar 2014, 10:48 Uhr von 149.172.152.210 (Diskussion)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

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 



Backend Layout Datensatz[Bearbeiten]







Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=TYPO3_mit_Fluid_-_komplettes_Beispiel&oldid=20222“