.. include:: /Includes.rst.txt
.. highlight:: typoscript
.. _sharing-and-switching-design-elements:
=====================================
Sharing and switching design elements
=====================================
Our single column page design processed a Fluid template in a
:file:`Templates` folder; and our double column page design processed a Fluid
template in a :file:`Layouts` folder. The two designs had some identical
elements, including :html:`page-header` and :html:`page-footer`.
We can apply Fluid techniques to build more efficient and more flexible
designs.
A design using Fluid partials
=============================
This design produces a single column web page and a double column web page
that share one header and one footer.
In the TYPO3 CMS backend, create a standard page named
:name:`PartialSingleColumn` just under (inside) the :name:`Home` page. On the
:name:`PartialSingleColumn` standard page, create a TypoScript extension template.
In the TypoScript template Setup field, write the following lines::
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
templateName = Partial1Column
templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Templates
partialRootPath = fileadmin/sitedesign/Resources/Private/Partials
variables {
contentNormal < styles.content.get
}
}
Notice the new :typoscript:`partialRootPath` instruction.
Create a file named :file:`Partial1Column.html` in the
:file:`fileadmin/sitedesign/Resources/Private/Templates` folder, and write
the following lines in the file:
.. code-block:: html
{data.title}
{contentNormal}
Notice the new :html:`` elements.
In the TYPO3 CMS backend, create a standard page named
:name:`PartialDoubleColumn` just under (inside) the :name:`Home` page. On the
:name:`PartialDoubleColumn` standard page, create a TypoScript extension template
record. In the TypoScript template Setup field, write the following lines::
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
templateName = Partial2ColumnPage
templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Layouts
partialRootPath = fileadmin/sitedesign/Resources/Private/Partials
variables {
contentNormal < styles.content.get
contentRight < styles.content.get
contentRight.select.where = colPos = 2
}
}
Create a file named :file:`Partial2ColumnPage.html` in the
:file:`fileadmin/sitedesign/Resources/Private/Layouts` folder, and write the
following lines in the file:
.. code-block:: html
{data.title}
{contentNormal}
{contentRight}
Create a file named :file:`PageHeader.html` in a
:file:`fileadmin/sitedesign/Resources/Private/Partials` folder, and write the
following lines in the file:
.. code-block:: html
Create a file named :file:`PageFooter.html` in the
:file:`fileadmin/sitedesign/Resources/Private/Partials` folder, and write the
following lines in the file:
.. code-block:: html
The combination of the :html:`` element and the
partial’s file name tells the TYPO3 CMS renderer which content goes where in
a web page.
This design puts each common partial element into its own file, making
editing more efficient and allowing more flexible editing access controls.
A design using Fluid sections
=============================
This design produces a single column web page having a header and footer, but
using a different technique than earlier.
In the TYPO3 CMS backend, create a standard page named
:name:`SectionSingleColumn` just under (inside) the :name:`Home` page. On the
:name:`SectionSingleColumn` standard page, create a TypoScript extension template.
In the TypoScript template Setup field, write the following lines::
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
templateName = Section1Column
templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Templates
variables {
contentNormal < styles.content.get
}
}
Notice the lack of a :typoscript:`partialRootPath` instruction.
Create a file named :file:`Section1Column.html` in the
:file:`fileadmin/sitedesign/Resources/Private/Templates` folder, and write
the following lines in the file:
.. code-block:: html
{data.title}
{contentNormal}
Notice the :html:`` and :html:`` elements.
The :html:`` element contains the content; but the
:html:`` element tells the TYPO3 CMS renderer where
to render that content. We purposely included a second
:html:`` element to illustrate the
capability for multiple appearances.
This design places common elements and unique elements into one file, thus
reducing the processing time required to produce a web page.
A design using Fluid layouts
============================
This design produces a single column web page having a header and footer, but
using yet another different technique than earlier.
In the TYPO3 CMS backend, create a standard page named
:name:`LayoutSingleColumn` just under (inside) the :name:`Home` page. On the
:name:`LayoutSingleColumn` standard page, create a TypoScript extension template.
In the TypoScript template Setup field, write the following lines::
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
templateName = ForLayouts
templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Templates
layoutRootPath = fileadmin/sitedesign/Resources/Private/Layouts
variables {
contentNormal < styles.content.get
}
}
Notice the new :typoscript:`layoutRootPath` instruction.
Create a file named :file:`ForLayouts.html` in the
:file:`fileadmin/sitedesign/Resources/Private/Templates` folder, and write
the following lines in the file:
.. code-block:: html
{contentNormal}
{contentNormal}
{contentRight}
Notice the :html:`` element, which specifies which Fluid layout to
use with this Fluid template. The remaining elements in this file are
:html:`` elements, not all of which will be used in this design.
Create a file named :file:`Layout1ColumnPage.html` in the
:file:`fileadmin/sitedesign/Resources/Private/Layouts` folder, and write the
following lines in the file:
.. code-block:: html
This design places subordinate elements into one Fluid template file, and
places overall layout elements into another file. Doing so allows editing and
access control advantages similar to the Fluid partials technique, but limits
potential file loading and processing times.
Switching Fluid layouts
=======================
This design switches between a single column layout and a double column layout.
In the TYPO3 CMS backend, create a standard page named
:name:`LayoutDoubleColumn` just under (inside) the :name:`Home` page. On the
:name:`LayoutDoubleColumn` standard page, create a TypoScript extension template.
In the TypoScript template Setup field, write the following lines::
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
templateName = ForLayouts
templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Templates
layoutRootPath = fileadmin/sitedesign/Resources/Private/Layouts
variables {
contentNormal < styles.content.get
contentRight < styles.content.get
contentRight.select.where = colPos = 2
}
}
Notice the additional :typoscript:`contentRight` element, which obtains content
elements from the default named “Right” column position (#2) in a TYPO3 CMS
backend page. Also, notice that the Fluid template name has not changed.
Create a file named :file:`Layout2ColumnPage.html` in the
:file:`fileadmin/sitedesign/Resources/Private/Layouts` folder, and write the
following lines in the file:
.. code-block:: html
Compare this layout to :file:`Layout1ColumnPage.html`. A couple
:html:`` elements differ, but the overall design structure is
similar.
Now, edit the :file:`Templates/ForLayouts.html` file. Replace its
:html:`` line with the following line.
.. code-block:: html
Edit the :name:`LayoutSingleColumn` page TypoScript template in the TYPO3 CMS
backend. Replace or edit its Setup field content to become the following::
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
templateName = ForLayouts
templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Templates
layoutRootPath = fileadmin/sitedesign/Resources/Private/Layouts
variables {
contentNormal < styles.content.get
}
settings.layout = Layout1ColumnPage
}
We only added a new :typoscript:`settings.layout` instruction.
Edit the :name:`LayoutDoubleColumn` page TypoScript template in the TYPO3 CMS
backend. Replace or edit its Setup field content to become the following::
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
templateName = ForLayouts
templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Templates
layoutRootPath = fileadmin/sitedesign/Resources/Private/Layouts
variables {
contentNormal < styles.content.get
contentRight < styles.content.get
contentRight.select.where = colPos = 2
}
settings.layout = Layout2ColumnPage
}
Here, too, we only added a new :typoscript:`settings.layout` instruction.
We now control which layout the :file:`ForLayouts.html` template uses through a
:typoscript:`settings.layout` element in the applicable TypoScript templates.
Alternatively, we could remove the :typoscript:`settings.layout` instruction from
the :name:`LayoutSingleColumn` and :name:`LayoutDoubleColumn` page TypoScript templates,
and add the following lines to the :name:`Home` page TypoScript template Setup
field. Keep the previously prepared library objects, :typoscript:`topNavigation`
and :typoscript:`breadcrumbTrail`, in place::
page = PAGE
page.1 = FLUIDTEMPLATE
page.1.settings.layout = Layout1ColumnPage
We now need change only this one :typoscript:`settings.layout` value in this one
TypoScript template to affect all the subordinate pages.
If we wanted one design for a few pages and the other design for the rest, we
could modify the :name:`Home` page TypoScript template Setup field again. Edit or
add the following lines. Insert your own page UID values::
page = PAGE
page.1 = FLUIDTEMPLATE
[page|uid = 2] || [page|uid = 4]
page.1.settings.layout = Layout2ColumnPage
[ELSE]
page.1.settings.layout = Layout1ColumnPage
[END]
This TypoScript template *condition* snippet applies the double column page
layout if the current page has identifier 2 or 4, and applies the single
column page layout for any other current page.
A flexible page column design
=============================
Alternatively, we may want to use the double column page layout only if there
is side content to show. To do so, modify both the :name:`Home` page TypoScript
template and the :file:`Templates/ForLayouts.html` Fluid template.
In the :name:`Home` page TypoScript template Setup field, keep the previously
prepared library objects, :typoscript:`topNavigation` and
:typoscript:`breadcrumbTrail`, in place. However, remove any other instructions
you may have added. Then, add the following lines at the bottom of the Setup
field::
lib.contentTest = TEXT
lib.contentTest.value = 1
lib.contentTest.if.isTrue.numRows {
table = tt_content
select {
orderBy = sorting
where = colPos = 2
}
}
In the :file:`Templates/ForLayouts.html` file, replace its
:html:`` line with the following line.
.. code-block:: html
This design tests for content in the TYPO3 backend page Right (#2) column
position; and if it finds such content, uses the double column layout.
Otherwise, it uses the single column layout.
Finally, make the design more efficient.
Delete the TypoScript template records from the :name:`LayoutSingleColumn` and
:name:`LayoutDoubleColumn` pages in the TYPO3 CMS backend. Edit the :name:`Home` page
TypoScript template by replacing all its Setup field content with the
following instructions::
lib {
topNavigation = HMENU
topNavigation {
1 = TMENU
1.NO.linkWrap = | |*| |*|
}
breadcrumbTrail = HMENU
breadcrumbTrail {
special = rootline
special.range = 0|-1
1 = TMENU
1.NO {
stdWrap.field = nav_title // title
ATagTitle.field = nav_title // title
linkWrap = | |*| » |*|
}
1.CUR = 1
1.CUR {
doNotLinkIt = 1
stdWrap.field = nav_title // title
linkWrap = | |*| » ||
}
}
contentTest = TEXT
contentTest.value = 1
contentTest.if.isTrue.numRows {
table = tt_content
select {
orderBy = sorting
where = colPos = 2
}
}
}
page = PAGE
page.1 = FLUIDTEMPLATE
page.1 {
templateName = ForLayouts
templateRootPaths.1 = fileadmin/sitedesign/Resources/Private/Templates
layoutRootPath = fileadmin/sitedesign/Resources/Private/Layouts
variables {
contentNormal < styles.content.get
contentRight < styles.content.get
contentRight.select.where = colPos = 2
}
}
This design has one TypoScript template, one static TypoScript template, and
three Fluid files. The TypoScript template is on the :name:`Home` page. The static
template is :name:`Fluid Content Elements (fluid_styled_content)`. The
Fluid files are: :file:`Templates/ForLayouts.html`,
:file:`Layouts/Layout1ColumnPage.html`, and
:file:`Layouts/Layout2ColumnPage.html`.
This is an efficient, flexible design. The :name:`Home` page TypoScript template
sets up library objects and page parameters unlikely to change often. The
:file:`Templates/ForLayouts.html` Fluid template file chooses a page layout
and provides content sections for the layout. The resulting web page will
show side content if there is side content to be shown.