Templates as distribution

In this video you will learn what the series is about, what a distribution actually is and for which target group the videos are suitable.

For the videos you need a fresh, empty TYPO3 installation. In this video we install TYPO3 version 7.

The easiest way to create a distribution is with the help of the "Extension Builder" extension. In this video you can see how to install the Extension Builder in TYPO3 7.

(Extension Builder on Github)

A distribution is a special type of extension. We use the "Extension Builder" to create the basic structure of our distribution.

In this video, we make some adjustments to the previously created distribution and finally activate it.

Before integrating the HTML template, we make adjustments to the folder structure of the distribution. We also prepare a TypoScript structure that is as effective as possible.

As an example, we use an HTML template from the website initializr.com in the videos. In this video we prepare the use of the template in the distribution. Of course, you can also use your own template here.

An HTML template should be structured sensibly for use in Fluidtemplate. In this video, we divide the template into layouts, templates and partials.

Once the template has been split into layout, template and partials, we need to integrate these files into TYPO3. To do this, we use the FLUIDTEMMPLATE object.

In this video you will see how you can integrate CSS and JavaScript files using TypoScript.

There are various meta tags in the -area of the template. These can also be integrated quite easily using Typoscript.

Certain conditional comments can be used to support older Internet Explorer browsers. In this video you can see a possible way to integrate these conditional comments into the template.

If you no longer wish to support Internet Explorer 8 or older, you can simply skip this video.

In this video, we adapt the TypoScript and the template file so that content elements are also displayed in the frontend.

We use a backend layout so that the display of the columns in the backend corresponds to the output in the frontend. We also adapt the TypoScript so that we can work with multiple backend layouts later on.

The relatively simple navigation of the HTML template can be implemented with a few lines of TypoScript.

In the left area of the header, you can integrate a link to the homepage of the website using TypoScript.

The footer can be used to display a secondary menu.

TypoScript can be used to ensure that the <aside> element is only rendered if content is actually present.

You can improve the HTML rendering of TYPO3 with a few parameters in the config-TypoScript.

TSconfig instructions can also be stored in files and automatically integrated by the distribution.

As of TYPO3 7.4, it is possible to define backend layouts via the TSconfig page. This also makes it possible to outsource to files.

If you are using an older version than 7.4, you can skip this video.

Please note:

Something has changed in TYPO3 since these videos were created. If backend layouts are outsourced to PageTSconfig, the ID of the backend layout must be preceded by pagets__ in the TypoScript.

The following is a code example that works from TYPO3 7.6.

Please do not simply use this code 1:1 for the demo distribution, it is an example that would of course have to be adapted!

page.10 = FLUIDTEMPLATE
page.10 {
  partialRootPath = EXT:mydemodistribution/Resources/Private/Partials/
  layoutRootPath = EXT:mydemodistribution/Resources/Private/Layouts/

  ## Evaluate backend layouts
  file.stdWrap.cObject = CASE
  file.stdWrap.cObject {
    key.data = pagelayout

    # default = 2Columns
    default = TEXT
    default.value = EXT:mydemodistribution/Resources/Private/Templates/2Columns.html

    ## If BE layouts are stored in the DB, they can only be accessed via the ID, i.e. 1 = TEXT...
    ## If BE layouts are stored in PageTS, access via pagets__ID, e.g. pagets__1 = TEXT...

    # Homepage
    pagets__1 = TEXT
    pagets__1.value = EXT:mydemodistribution/Resources/Private/Templates/Homepage.html

    # 2Columns
    pagets__2 < .default

    # 1Columns
    pagets__3 = TEXT
    pagets__3.value = EXT:mydemodistribution/Resources/Private/Templates/1Column.html
  }

  ## Pass content to the templates
  variables {

    left < styles.content.get
    left.select.where = colPos = 1

    main < styles.content.get
    main.select.where = colPos = 0

    right < styles.content.get
    right.select.where = colPos = 2
  }
}

With Fluid, you can move a lot of logic into the template. Things that previously had to be solved (sometimes laboriously) using TypoScript can now be done relatively easily directly in the Fluid template. Let's take a look at the following view helpers as examples: if, format.crop and format.date

The special thing about the distributions is that both files can be supplied and complete page trees including content can be installed. In this video, we create a few example files and generate a .t3d export file.

In a freshly installed and empty TYPO3 7.4.0 we test whether our distribution works.