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
Copyright 2010-2015, Dirk Wildt, Die Netzmacher, <http://wildt.at.die- netzmacher.de>
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
Single View with own HTML snippet 11
Template Selection with the Plugin 20
Template Controlling with TypoScript 22
Integration of a Data Query 24
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
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.
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.
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.
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¶
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]
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¶
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 (
<!-- ###SINGLEVIEW### begin --><!-- ###SINGLEBODY### begin -->
<!-- ###SINGLEBODYROW### begin -->
<div class="columns">
<h1>
###TT_NEWS.TITLE###
</h1>
<div>
###TT_NEWS_CAT.TITLE###
</div>
<p class="backbutton">
###MY_SINGLEVIEWBACKBUTTON###
</p>
</div>
<!-- ###SINGLEBODYROW### end -->
<!-- ###SINGLEBODY### end --><!-- ###SINGLEVIEW### end -->
)
}
}
}
}
}
}
}
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 (
<!-- ###SINGLEVIEW### begin --><!-- ###SINGLEBODY### begin -->
<!-- ###SINGLEBODYROW### begin -->
<div class="columns">
<h1>
###TT_NEWS.TITLE###
</h1>
###TT_NEWS.IMAGE###
<div>
###TT_NEWS_CAT.TITLE###
</div>
<p class="backbutton">
###MY_SINGLEVIEWBACKBUTTON###
</p>
</div>
<!-- ###SINGLEBODYROW### end -->
<!-- ###SINGLEBODY### end --><!-- ###SINGLEVIEW### end -->
)
}
}
}
}
}
}
}
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:
- HTML: http://typo3.org/extensions/repository/view/browser_tut_tt_n ews_en/
- PDF: http://typo3-browser.de/typo3conf/ext/browser_tut_tt_news_en /doc/manual.pdf
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.
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.
Header¶
Recommended for list views.
Screenshot¶
Wraps a header. Respects type of link (single view, page, url, no link).
Constant Editor¶
You have to configure the properties for the header and the url. See
- "BROWSER - TEMPLATES - LIST - HEADER 0" on page 26 below.
- "BROWSER - TEMPLATES - LIST - URL 0" on page 27 below.
TypoScript Snippet¶
tx_org_news.title {
10 < plugin.tx_browser_pi1.displayList.master_templates.tableFields .header.0
}
Live¶
http://typo3-organiser.de > News
Text¶
Recommended for list views.
Screenshot¶
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¶
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.
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]¶
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).
Tab [Plugin] > [General]
Views: [Configured]
Views: Selected
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¶
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¶
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.
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]¶
See "BROWSER - TEMPLATES - LIST - HEADER 0" on page 26 above.
BROWSER - TEMPLATES - LIST - IMAGE 0¶
plugin.tx_browser_pi1.templates.listview.image.0
File¶
Property
File
Data type
string
Description
(Obligate!) Field with the file name. I.e: tx_org_service.image
Default
Position¶
Property
Position
Data type
int+
Description
Position of the image in the list of files: 0 (and empty) is 1st position (default), 1 is 2nd position, 2 is 3rd position and so on.
Default
Height¶
Property
Height
Data type
string
Description
Height of the image in pixel. I.e: width = 120c and height = 80c crops 120x80px from the center of the scaled image. Width = 100c-100 and height = 100c crops 100x100px from landscape-images at the left and portrait- images centered. Width = 100c+30 height = 100c-25 crops 100x100px from landscape-images a bit right of the center and portrait-images a bit higher than centered.
Default
Width¶
Property
Width
Data type
string
Description
Width of the image in pixel. The samples at property height above.
Default
SEO field¶
Property
SEO field
Data type
string
Description
Field for Search Engine Optimisation (SEO). The field for alttext and the titletext property. I.e. tx_org_service.imageseo
Default
Render layout¶
Property
Render layout
Data type
string
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]¶
See "BROWSER - TEMPLATES - LIST - TEXT 0" on page 27 above.
BROWSER - TEMPLATES - LIST - URL 0¶
plugin.tx_browser_pi1.templates.listview.url.0
Key¶
Property
Key
Data type
string
Description
(Obligate!) Field with the key for controlling the URL type. I.e: tx_org_service.type
Default
Uid¶
Property
Uid
Data type
string
Description
(Obligate!) Field with the uid of the current record. I.e: tx_org_service.uid
Default
Page¶
Property
Page
Data type
string
Description
(Obligate!) Field with the link to the internal page. I.e: tx_org_service.page
Default
URL¶
Property
URL
Data type
string
Description
(Obligate!) Field with the link to the external website. I.e: tx_org_service.url
Default
Force absolute URL¶
Property
Force absolute URL
Data type
boolean
Description
If it's enabled, a absolute URL will rendered. An absolute URL in a newsletter is obligatory!
Default
Scheme¶
Property
Scheme
Data type
string
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]¶
See "BROWSER - TEMPLATES - LIST - URL 0" on page 27 above.
BROWSER - TEMPLATES - SINGLE - IMAGE 0¶
plugin.tx_browser_pi1.templates.listview.image.0
File¶
Property
File
Data type
string
Description
(Obligate!) Field with the file name. I.e: tx_org_service.image
Default
Height field¶
Property
Height field
Data type
string
Description
Field with the image height. I.e: tx_org_service.imageheight
Default
Height default¶
Property
Height default
Data type
string
Description
Default height of the image in pixel. I.e: width = 120c and height = 80c crops 120x80px from the center of the scaled image. Width = 100c-100 and height = 100c crops 100x100px from landscape-images at the left and portrait- images centered. Width = 100c+30 height = 100c-25 crops 100x100px from landscape-images a bit right of the center and portrait-images a bit higher than centered.
Default
Width field¶
Property
Width field
Data type
string
Description
Field with the image width. I.e: tx_org_service.imagewidth
Default
Width default¶
Property
Width default
Data type
string
Description
Default width of the image in pixel. See the samples at property height above.
Default
SEO field¶
Property
SEO field
Data type
string
Description
Field for Search Engine Optimisation (SEO). The field for alttext and the titletext property. I.e. tx_org_service.imageseo
Default
Image orient¶
Property
Image orient
Data type
string
Description
Field for the image orient. I.e. tx_org_service.imageorient
Default
Image columns¶
Property
Image columns
Data type
string
Description
Field for the image columns. I.e. tx_org_service.imagecols
Default
Image zoom¶
Property
Image zoom
Data type
string
Description
If enabled, image will enlarged on click. I.e. tx_org_service.image_zoom
Default
Render layout¶
Property
Render layout
Data type
string
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
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