DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Browser Tutorial Templating (en)¶

Author:	Kasper Skårhøj
Created:	2002-11-01T00:32:00
Changed by:	dirk
Changed:	2015-04-10T23:53:04
Classification:	browser_tut_templating_en
Description:	Create the templates for your data supported by the Browser – TYPO3 without PHP. Tutorial.
Keywords:	browser, typo3 without php, templating, HTML
Author:	Dirk Wildt, Die Netzmacher
Email:	http://wildt.at.die-netzmacher.de
Website:	http://die-netzmacher.de
Language:	en

Browser Tutorial Templating (en) (extkey: browser_tut_templating_en)

Browser Tutorial Templating (en)¶

Browser – TYPO3 without PHP

Create the templates for your data supported by the Browser – TYPO3 without PHP. Tutorial.

Version: 7.0.7, 2015-04-10

Extension Key: browser_tut_templating_en

Language: en

Keywords: browser, typo3 without php, templating, HTML

This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents¶

Browser Tutorial Templating (en) 1

Further Information 4

Schematic Presentation 5

Default Design (HTML table) 5

Page, Plugin and Template 8

Configuration in General 8

List View 9

Single View with own HTML snippet 11

Single View with an image 12

Tutorial with tt_news 13

Tutorial with tt_content 13

Content Templates 14

Links in Principle 14

Header 15

Text 16

Image 17

Header, Text and Image 18

CSV and XML (RSS) 19

Flexform Integration 20

Template Selection with the Plugin 20

Template Controlling with TypoScript 22

Integration of a Data Query 24

Freedom of Scope 25

Constant Editor 26

BROWSER - TEMPLATES - LIST - HEADER 0 26

BROWSER - TEMPLATES - LIST - HEADER [1-5] 26

BROWSER - TEMPLATES - LIST - IMAGE 0 26

BROWSER - TEMPLATES - LIST - IMAGE [1-5] 26

BROWSER - TEMPLATES - LIST - TEXT 0 27

BROWSER - TEMPLATES - LIST - TEXT [1,6] 27

BROWSER - TEMPLATES - LIST - URL 0 27

BROWSER - TEMPLATES - LIST - URL [1-5] 27

BROWSER - TEMPLATES - SINGLE - IMAGE 0 28

BROWSER - TEMPLATES - SINGLE - IMAGE 1 28

BROWSER - TEMPLATES - SINGLE - TEXT 0 28

BROWSER - TEMPLATES - SINGLE - TEXT 1 28

Reference 29

Completely Browser Reference 29

Integration of a Template 29

Integration of a View 29

Data Query 30

Helpful suggestions 31

Change Log 32

Illustration Index 33

Alphabetical Index 34

Screen Shots¶

Key Image¶

Frame53

Constant Editor¶

Frame53

Introduction¶

What does it do?¶

This is a tutorial for the extension Browser – TYPO3 without PHP (extkey: browser).
It is a manual how to create templates for your data.

Further Information¶

This tutorial in PDF format¶

You find this tutorial as a PDF file at

doc/manual.pdf
http://typo3-browser.de/typo3conf/ext/browser_tut_templating_en/do c/manual.pdf

Browser Manual¶

Manual: The Browser has it's own manual (with the reference of course).

Schematic Presentation¶

Default Design (HTML table)¶

The default design is ready-to-use: The main part of the HTML template is a table. The haeder and the body contains the marker ###ITEM###. This marker will replaced by the labels and values of the fields, which are part of the select property in the TypoScript.

You have to create the TypoScript snippet only. You can change and edit every field by TypoScript. You can use images like in the example "Individual Design" below too.

Frame53

The illustration below is based on the Browser Sample with tt_news. See

Individual Design¶

Individual design with so called database markers with the TABLE.FIELD syntax.

You have to create a so called HTML snippet. You can include into your TypoScript code – there isn't any need, to edit HTML templates of the Browser – TYPO3 without PHP – directly.

Frame53

In the sample above there is a simple HTML snippet:

It includes exactly one marker: ###TX_QUICKSHOP_PRODUCTS.TITLE###.

Corresponding tx_quickshop_products.title is a COA (Content Object Array), with the configuration for a whole record.

The illustration above is based on the calendar modul of the extension Organiser – TYPO3 for Lobbies and Organisers. See

Concept¶

The Browser enables to publish every data for every output format like HTML or XML.

Templates¶

HTML templates or any other template has

TYPO3 subpart marker and
TYPO3 marker

The Browser needs the subparts marker for the work flow. Subparts marker assign areas like the code area for a list view or for records.

And marker will be replaced by runtime. The Browser uses several groups of marker, like database marker, constants marker or system marker g others.

Templates are TYPO3 conform.

TypoScript¶

Usually a marker has a corresponding property in the TypoScript. Like in the illustration above.

Example:

###TT_NEWS.IMAGE### has a corresponding part in the TypoScript select property: tt_news.image.

All markers have the stdWrap property. TYPO3 users can control the process of every marker.

Examples are among others:

Formating of a timestamp in a human readable format.
Translation in dependence of the current language in the frontend.
Using conditions: Display a value only, if its amount is bigger than 0.

Marker¶

Marker enables to design individual designs. Please take a look in the Browser Tutorial Marker.

Quick Example¶

Page, Plugin and Template¶

Frame53

Modul Web > List

Page tree Add a page to your page tree.Call it "Quick Example".

Edit area: Add an extension template to your page.Call it in the format "type_name-of-your-page_uid-of-yourTypoScript-template".Here: "+page_quickexample_1177"

Add the Browser plugin to the page.Call it "[Quick Example]".Set the header type to: [hidden].Configure the other properties later (see below).

Configuration in General¶

Template¶

Configure the extension template. Here: +page_quickexample_1177

[Includes]¶

Add in the tab [Includes] into the field "Include static (from extensions):" the three templates:

CSS Styled Content (css_styled_content) :sup:`0 <#sdfootnote1sym>`_
Browser [1] Basis (browser)
Browser [1] + pageBrowser Wrap v4.9 (browser) :sup:`0 <#sdfootnote2sym>`_

Browser Plugin / Flexform¶

Record Storage Page¶

Please set the starting point of your tt_content data. Here: the root page.

Modul Web > List

Page tree Browser Sample I

Edit area Plugin [Browser Sample I]

tab [Behaviour]

Field "Record Storage Page": your rootpage. Here: die-netzmacher.de

Recursive: [Infinite]

Frame53

List View¶

Template¶

Configure the extension template. Here: +page_quickexample_1177

[General]¶

Field "Setup": Paste the code from below:

plugin.tx_browser_pi1 {

views {

list {

1 = Quick Example

1 {

name = Quick Example

select = tt_news.title, tt_news_cat.title

}

Result in the Frontend¶

Frame53

You get a list view with a search form, an index browser and a page browser.

Single View with own HTML snippet¶

We add the single view with an own HTML snippet.

Template¶

Configure the extension template. Here: +page_quickexample_1177

[General]¶

Field "Setup": Paste the code from below, overwrite existing code.

plugin.tx_browser_pi1 {

views {

list {

1 = Quick Example

1 {

name = Quick Example

select = tt_news.title, tt_news_cat.title

}

single {

1 = Quick Example

1 {

select = tt_news.title, tt_news_cat.title

htmlSnippets {

subparts {

singleview = TEXT

singleview {

value (

<h1>

###TT_NEWS.TITLE###

</h1>

<div>

###TT_NEWS_CAT.TITLE###

</div>

###MY_SINGLEVIEWBACKBUTTON###

</p>

</div>

)

}

Of course you can use an own HTML snippet for the list view too.

You find examples in the extensions

Organiser
Quick Shop and
Wine

Single View with an image¶

Template¶

Configure the extension template. Here: +page_quickexample_1177

[General]¶

Field "Setup": Paste the code from below, overwrite existing code.

plugin.tx_browser_pi1 {

views {

list {

1 = Quick Example

1 {

name = Quick Example

select = tt_news.title, tt_news_cat.title

}

single {

1 = Quick Example

1 {

select (

tt_news.title,

tt_news_cat.title,

tt_news.image,

tt_news.imagecaption,

tt_news.imagealttext,

tt_news.imagetitletext

)

tt_news.image < plugin.tx_browser_pi1.displaySingle.master_templat es.tableFields.image.0

htmlSnippets {

subparts {

singleview = TEXT

singleview {

value (

<h1>

###TT_NEWS.TITLE###

</h1>

###TT_NEWS.IMAGE###

<div>

###TT_NEWS_CAT.TITLE###

</div>

###MY_SINGLEVIEWBACKBUTTON###

</p>

</div>

)

}

Constant Editor¶

Please maintain the needed constants for rendering the image. See

Category: [BROWSER - TEMPLATES - SINGLE - IMAGE 0* (12)]

or paste the code from below to the field "Constants" in the [General] tab of the TypoScript template:

plugin.tx_browser_pi1.templates.singleview.image.0.file = tt_news.image

plugin.tx_browser_pi1.templates.singleview.image.0.seo = tt_news.imagealttext // tt_news.imagetitletext

plugin.tx_browser_pi1.templates.singleview.image.0.caption = tt_news.imagecaption

plugin.tx_browser_pi1.templates.singleview.image.0.path = uploads/pics/

plugin.tx_browser_pi1.templates.singleview.image.0.widthDefault = 200

Tutorial with tt_news¶

If you are interested in a tutorial with tt_news, please refer to:

The used Typocript has a lot of example code.

Tutorial with tt_content¶

If you need an example with the FAL (File Abstraction Layer), please refer to the Browser Manual:

Content Templates¶

Links in Principle¶

Be aware, that a link of a record isn't a link to the detail view in every case. For example: the extension tt_news provides three types of link: to the detail view, to an internal page or an external URL.

Some extensions like the Organiser or the Quick Shop have in addition a fourth link: no link. Records will displayed in the list view, but don't link to anywhere.

Frame53

The illustration above displays the link types of a calendar item of the Organiser.

There are four possibilities:

Link to the detail view (default)

Link to an internal Page

Link to an external URL

No link

If you are using an image in the list view (or in the single view with a link to another record), the Browser – TYPO3 without PHP – deals with the link type.

Constant Editor¶

You have to configure the link properties with the constant editor.

See "BROWSER - TEMPLATES - LIST - URL 0" on page 27 below.

Text¶

Recommended for list views.

Screenshot¶

Frame53

Wraps a text (rich text format). Appends the so called details link. The details link respects type of link (single view, page, url, no link). The content of the link depends of the type of the link. For example: It is possible to set the content to "page » " or "URL » "in case of a link to an internal page or an external URL.

Constant Editor¶

You have to configure the properties for the header and the url. See

"BROWSER - TEMPLATES - LIST - TEXT 0" on page 27 below.
"BROWSER - TEMPLATES - LIST - URL 0" on page 27 below.

TypoScript snippets¶

tx_org_news.title {

20 < plugin.tx_browser_pi1.displayList.master_templates.tableFields .text.0

}

Live¶

http://typo3-organiser.de > News

Image¶

Recommended for list views.

Screenshot¶

Frame53

Wraps an image. Respects type of link (single view, page, url, no link).

Constant Editor¶

You have to configure the properties for the image and the url. See

"BROWSER - TEMPLATES - LIST - IMAGE 0" on page 26 below.
"BROWSER - TEMPLATES - LIST - URL 0" on page 27 below.

TypoScript snippets¶

tx_quickshop_products.image < plugin.tx_browser_pi1.displayList.ma ster_templates.tableFields.image.3

Tutorial¶

You find some examples in the Browser Tutorial Images at

Live¶

http://typo3-quick-shop.de > Shop

Header, Text and Image¶

Recommended for single views.

Frame53

Wraps a header, a text and the images. You can controll the design of the images (size, position, number of columns) by the record in the backend.

Constant Editor¶

You have to configure the properties for the header, the text and the image. See

"BROWSER - TEMPLATES - SINGLE - IMAGE 0" on page 28 below.
"BROWSER - TEMPLATES - SINGLE - TEXT 0" on page 28 below.

TypoScript snippets¶

tx_org_cal.title < plugin.tx_browser_pi1.displaySingle.master_tem plates.tableFields.imageText.0

Tutorial¶

You find some examples in the Browser Tutorial Images at

Live¶

http://typo3-organiser.de > Calendar

CSV and XML (RSS)¶

If you like to publish your data in a non HTML format like CSV (Comma Separated Values) or XML (for RSS feeds) please refer to the

Browser Tutorial CSV/RSS/XML

Flexform Integration¶

You can integrate any template (HTML, RSS, XML or any other format) and any view (TypoScript) into the Browser plugin/flexform.

To integrate an own HTML template is recommended only, if HTML snippets (see above) can't satisfy your needs.

Template Selection with the Plugin¶

Tab [Templating]¶

Frame53

Tab [Templating] pulldown menu [Plugin: HTML template]

Example with the extension Organiser (org). The extension provides 12 templates in the illustration above.

The plugin offers four possibilities for connecting with an HTML template by default:

Template from TypoScript (old fashion)The template which is configured by TypoScript. This can be your template or a template of another extension. It's old fashioned but downward compatible with the common way of template integrating.
Upload own HTMLThis is rather quick. You don't have to configure TypoScript. But it isn't user friendly.
Browser: table (browser)The browser default template with <table> tags. This enables you, to publish any data without any own template.
Browser: list (browser)The browser default template with <ul> tags. This enables you, to publish any data without any own template.

Tab [General]¶

The tab [General] displays all available views from TypoScript. You can filter the views, which are provides by the current template (see tab [Templating] above).

Frame53

Tab [Plugin] > [General]

Views: [Configured]

Views: Selected

Frame53

Views Filter: [X] Display only views, which are linked with the current template.

The list of this views (filtered).

Template Controlling with TypoScript¶

You control the integration of your templates and views into the plugin/flexform by TypoScript.

Templates¶

Plugin/Flexfom¶

Frame53

You see the item [Org: Nachrichten (org)] in the illustration above.

You see the TypoScript code below.

TypoScript Snippet¶

Please read the comments in the snippet for understand the properties.

plugin.tx_browser_pi1 {

template {

extensions {

// Begin of your configuration

// [String/Array] Your extension key

org {

// [String/Array] Name of your template array. It is arbitrary.

news {

// [String] Name of your template in the pulldown menu of the plugin/flexform

name = Org: Nachrichten

// [String] Path to your template

file = EXT:org/res/news/401/default.tmpl

// [Integer/CSV] Comma seperated list of the views id, which can process// the template

csvViews = 401

}

// End of your configuration

}

TypoScript (old fashion) - Snippet¶

plugin.tx_browser_pi1 {

template {

// [String] Path to your template

file = EXT:org/res/news/401/default.tmpl

}

You see the old fashion way of integrating a template into the Browser plugin/flexform. It is connected with the item [From TypoScript (old fashioned)] in the pulldown menu in the tab [Templating].

Views¶

Plugin/Flexfom¶

Frame53

You see the view [401: News] in the illustration above. The id of the view and the name of the view will be concatenated.

You see the TypoScript code for this item in the snippet below.

TypoScript Snippet¶

Please read the comments in the snippet for understand the properties.

plugin.tx_browser_pi1 {

views {

list {

// Begin of your configuration

// [Integer] Id of the view. It is arbitrary but must be unique.

401 {

// [String] Name of the view. It is arbitrary and it should be unique.

name = News

...

}

// End of your configuration

}

Integration of a Data Query¶

Enable Editors to select defined filters¶

You can enable editors to select filters by the plugin/flexform.

Example:

An editor select a template with news, which is displaying all news.
If it is configured, an editor can select a data query like "Politician" or "Society".The view will display news with the category politician or society in the frontend.

Plugin - Tab [Templating]¶

Frame53

Tab [Templating]

Select Box "Data: query"

TypoScript Snippet¶

In the example below there are some data queries configured , which will add an andWhere statement to the any list view.

plugin.tx_browser_pi1 {

plugin {

templating {

arrDataQuery {

items {

1 {

name = Lead Story

arrQuery {

andWhere = tt_news_cat.uid = 121

}

2 {

name = Extensions

arrQuery {

andWhere = tt_news_cat.uid = 119

}

...

}

See configured view on next page.

plugin.tx_browser_pi1 {

views {

list {

1 {

name = Data Query Example

select (

tt_news.title,

tt_news_cat.title

)

}

single {

1 {

select (

tt_news.title,

tt_news.short,

tt_news.bodytext,

tt_news.image,

tt_news.imagealttext,

tt_news.imagetitletext,

tt_news.short,

tt_news_cat.title

)

}

Freedom of Scope¶

There is no limitation for designing a template: The whole HTML code is in the HTML templates. So you can change every tag.

There are some helpful comments in the template files. See:

Resources/Private/Templates/HTML/*

Constant Editor¶

BROWSER - TEMPLATES - LIST - HEADER 0¶

plugin.tx_browser_pi1.templates.listview.header.0

Header¶

Property

Header

Data type

string

Description

Field with the header for the list view.I.e: tx_org_service.teaser_title // tx_org_service.title

Default

Tag¶

Property

Tag

Data type

string

Description

HTML tag. Possible values are:

div
h1
h2
h3
h4
h5
h6
p

Default

h2

Crop header¶

Property

Crop header

Data type

string

Description

Crop the header after x chars. Leave it empty, if you don't want any cropping. I.e: 40|...|1

Default

40|...|1

BROWSER - TEMPLATES - LIST - HEADER [1-5]¶

Description

Possible values are: data, default, picture and srcset

data: renders an image tag containing data-keys for the different resolutions.
default: renders a normal non-responsive image as a <img> tag.
picture: renders a picture tag containing source tags for each resolutions and an <img> tag for the default image.
srcset: renders an image tag pointing to a set of images for the different resolutions.

Default

default

Path¶

Property

Path

Data type

string

Description

(Obligate!) Path to the images (with ending backslash!). I.e: uploads/tx_org/

Default

Default image¶

Property

Default image

Data type

string

Description

Full qualified path to the default image. I.e: EXT:browser/Resources/P ublic/Images/Icons/browser_default_300x200.gif

Default

See description

BROWSER - TEMPLATES - LIST - IMAGE [1-5]¶

See "BROWSER - TEMPLATES - LIST - IMAGE 0" on page 26 above.

BROWSER - TEMPLATES - LIST - TEXT 0¶

plugin.tx_browser_pi1.templates.listview.text.0

Text for listview¶

Property

Text for listview

Data type

string

Description

Field with the text for the list view.

I.e: tx_org_service.teaser_short // tx_org_service.short

Default

Tag¶

Property

Tag

Data type

string

Description

HTML tag. Possible values are:

div
h1
h2
h3
h4
h5
h6
p

Default

p

Crop text¶

Property

Crop text

Data type

string

Description

Crop the text after x chars. Leave it empty, if you don't want any cropping. I.e: 300|...|1

Default

300|...|1

BROWSER - TEMPLATES - LIST - TEXT [1,6]¶

Description

Scheme is used, if absolute Url is enabled.

Possible values: http,https

Default

http

return¶

Property

return

Data type

string

Description

Possible values: empty, target or url

empty: a-tag (recommended).
url: returns the URL only. Recommended for a rss feed.
target: return the target only.

Default

empty

Alias for showUid¶

Property

Alias for showUid

Data type

string

Description

If the destination tables is using an alias for the showUid, you must enter it. I.e: jobUid

Default

PID of single view¶

Property

PID of single view

Data type

int+

Description

Page id of the single view. Leave it empty, if the list view and single have the same pid. I.e: 142

Default

BROWSER - TEMPLATES - LIST - URL [1-5]¶

Description

Possible values are: data, default, picture and srcset

data: renders an image tag containing data-keys for the different resolutions.
default: renders a normal non-responsive image as a <img> tag.
picture: renders a picture tag containing source tags for each resolutions and an <img> tag for the default image.
srcset: renders an image tag pointing to a set of images for the different resolutions.

Default

default

Path¶

Property

Path

Data type

string

Description

(Obligate!) Path to the images (with ending backslash!). I.e: uploads/tx_org/

Default

BROWSER - TEMPLATES - SINGLE - IMAGE 1¶

See "BROWSER - TEMPLATES - SINGLE - IMAGE 0" on page 28 above.

BROWSER - TEMPLATES - SINGLE - TEXT 0¶

plugin.tx_browser_pi1.templates.listview.text.0

Header¶

Property

Header

Data type

string

Description

(Obligate!) Field with the content for the header. I.e: tx_org_event.header

Default

Header tag¶

Property

Header tag

Data type

string

Description

HTML tag. Possible values are:

div
h1
h2
h3
h4
h5
h6
p

Default

h1

Bodytext¶

Property

Bodytext

Data type

Description

Field with the content for the bodytext.

I.e: tx_org_event.bodytext // tx_org_event.teaser_short

Default

BROWSER - TEMPLATES - SINGLE - TEXT 1¶

See "BROWSER - TEMPLATES - SINGLE - TEXT 0" on page 28 above.

Reference¶

Completely Browser Reference¶

Integration of a Template¶

template.extensions¶

Property

template.extensions

Data type

array

Description

Integration of your template in the Browser plugin/flexform

Example:

plugin.tx_browser_pi1 {
  template {
    extensions {
        // BEGIN of your configuration
        // [String/Array] extension key
      org {
          // [String/Array] template name (inern)
        news {
            // [String] name for plugin/flexform
          name = Org: Nachrichten
            // [String] path to the template
          file = EXT:org/res/news/401/default.tmpl
            // [Integer/CSV] Comma seperated list of
            //   the views id, which can process
            //   the template
          csvViews  = 401
        }
      }
        // END of your configuration
    }
  }
}

Default

Integration of a View¶

views.list.XX.name¶

Property

views.list.XX.name

Data type

string

Description

Integration of a view in the Browser plugin/flexform.You integrate it with the list view only.

ID and name will be concatenated in the plugin/flexform. Example:

401: News

Example:

plugin.tx_browser_pi1 {
  views {
    list {
        // BEGIN of your configuration
        // [Integer] Id of the view.
        //   It is arbitrary but must be unique.
      401 {
          // [String] Name of the view.
        name = News
        ...
      }
        // END of your configuration
    }
  }
}

Default

Data Query¶

templating.arrDataQuery.items¶

Property

templating.arrDataQuery.items

Data type

array

Description

Array with andWhere clauses, which are available in the plugin/flexform for any editor.

Example:

plugin.tx_browser_pi1 {
  plugin {
    templating {
      arrDataQuery {
        items {
            // BEGIN of your configuration
            // [Integer] id of the andWhere clause
          1 {
              // [String] name for plugin/flexform
            name = Lead Story
            arrQuery {
                // [String] andWhere clause
              andWhere = tt_news_cat.uid = 121
            }
          }
            // END of your configuration
        }
      }
    }
  }
}

Default

Helpful suggestions¶

((generated))¶

Forum¶

If you have helpful suggestions, feel free to publish any question, bug or code snippet on

http://typo3-browser-forum.de/

Posts are welcome in English and German.

New Features and Bug Reports¶

You are welcome to post any question, bug or code snippet on TYPO3 forge.Here you find feature announcements and bug reports.See

http://forge.typo3.org/projects/show/extension-browser

Change Log¶

7.0.7 Update #i0002: New section Content Templates. More Screenshots.

7.0.6 Update #i0001: Browser 6.x/7.x, TYPO3 6.x

3.5.0 Initial Release

Illustration Index¶

Illustration 1: Amazing - you need two lines TypoScript to render an image. 3

Illustration 2: Constant Editor with Browser templates 3

Illustration 3: Schematic work flow of the default case with a layout ready-to-use. 5

Illustration 4: Schematic work flow with database markers and an individual design 6

Illustration 5: The page "Quick Example" (2) with the Browser plugin (4) and an extension template (4) 8

Illustration 6: The flexform of the Browser plugin: Record Storage Pid 9

Illustration 7: List view with tt_news items. 10

Illustration 8: Link types of a calendar record of the extension Organiser 14

Illustration 9: Link types 15

Illustration 10: Link types 16

Illustration 11: Link types 17

Illustration 12: Link types 18

Illustration 13: Plugin with the tab [Templating] 20

Illustration 14: Plugin with the tab [General] and all available views 21

Illustration 15: Plugin with the tab [General] and all available views for the current template 21

Illustration 16: Item in the pulldown menu 22

Illustration 17: A view in the plugin/flexform 23

Illustration 18: Templates for Editors 24

Alphabetical Index¶

0 Neeed only, if it isn't included in a parent TypoScript template

0 Optional: Needed only, if you like the HTML wrap of the Browser 4.x for the page browser.

34