TYPO3 fluid template

• Count the columns

  Decide how many column positions is needed. Images with overlayed text have one column for image and one column for the overlay text. Each column will have it's own box in backend layout:

  
  Images can be bigger BUT EQUAL PROPORTIONS.

  
  Text overlays as HTML elements with no further styling.

  
  What is not to be populated is left void.
   

• TYPO3 fluid HTML frontend template

  HTML template file using fluid: uses namespace

  {namespace f=Tx_Fluid_ViewHelpers}

  and The cObject-ViewHelper.
  Markup

  Tags marked f:cObject fall under the fluid namespace. All the rest of it is interpreted as a regular HTML/plain text.

  Template location

  New file in bootstrap_package/Resources/Private/Templates

  Fastest way

  Have a static HTML page, like bootstrapzero templates or the like. Replace the content parts with columns fluid definitions.

  <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '200'}"/>

  Column numbers can be whatever apart from 0,1,2,3 which are reserved for content, sidebars and border. They don't have to be used at all though.

   

• Backend Layout for that template

  Backend layout defines names of boxes in the backend (for orientation) and assigns a column number to the content in them. If there is a frontend template defined for the specific page, content from the backend layout will only show up on the frontend if the HTML frontend template defines spaces for the respective column number that is populated in the backend. Content undefined in HTML template won't show up.

  Layout location

  New file in bootstrap_package/Configuration/PageTS/Mod/WebLayout or easier in backend:
  
  Web > Lists > "Root" > [+] > New Record: Backend layout
  
  NOTE - System BLs are located in:
  

            	BS Package/.../Configuration/PageTS/Mod/WebLayout/BackendLayouts
            

  
  
  Edit the config field. Upload an icon 50x75px to be able to tell the new layout.

  Set the number of columns and rows and work it out colPos by colPos, as defined in HTML template.

  Colspan defines the span - the number of cols ina row is defined by you:
  

  backend_layout {
  	colCount = 4
  	rowCount = 14
  	rows {
    	1 {
  		columns {
      		1 {
    				name = CallToAction_MobileOnly
    				colPos = 1000
    				colspan = 4
      				}
    				}
  				}
    	2 {
    	columns {
    			1 {
    				name = Image_Top1
    				colPos = 100
    				colspan = 1
    	  			}
            ...
            

  
  The colspan and layout in general will only affect the box position in the backend - it's for the person who'll care of content only. The actuall appearance on frontent is set in HTML template.
   

• Bootstrap Package TYPO3 setup.txt

  Located in bootstrap_package/Configuration/TypoScript

  Lines 347-349, set the HTML template as the default one, the one to which the website will fallback.

              default = TEXT
              default.value = {$page.fluidtemplate.templateRootPath}MyHomeTemplate.html
              default.insertData = 1
            

  It won't be update-proof. This way there doesn't have to be explicit connection between backend layout and a HTML template.

  • TO DO  

• CSS and JS definitions

  In Root's Typo Script record.

  Page-specific CSS/JS import / based on page ID

  [globalVar = TSFE:id = 29]
  page {
   headerData{
    10 = TEXT
    10.value = <link rel="icon" type="image/png" href="fileadmin/ico/favicon.png" />
  
    11 = TEXT
    11{
      field = subtitle // title
      noTrimWrap = |<title>| Page title</title>|
      }
     }
    }
    page.includeCSS {
     file1 = fileadmin/templates/projects.css
     file2 = fileadmin/templates/basic.css
    }
    page.includeJS {
     file1 = fileadmin/templates/toggle.js
    }
    [global]
          

  
  General import (on all pages) is the same without the [global] directive.
   

• Setup

  Choose backend layout for a specific page in
  
  Web > Page > [pencil icon] > Apperance

  
   

• Images don't have to be same size but they must be of equal proportions

  There is a crop tool in the backend.

  • TO DO