.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ================================ 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 |img-1| |img-2| Browser Tutorial Templating (en) (extkey: browser\_tut\_templating\_en) |img-3| .. _Browser-Tutorial-Templating-en: Browser Tutorial Templating (en) ================================ **Browser – TYPO3 without PHP** Create the templates for your data supported by the Browser – TYPO3 without PHP. Tutorial. |img-4| 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, 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: Table of Contents ----------------- `Browser Tutorial Templating (en) 1 <#__RefHeading__24238_633547889>`_ `Screen Shots 3 <#__RefHeading__61857_1423540087>`_ `Key Image 3 <#__RefHeading__29616_603351207>`_ `Constant Editor 3 <#__RefHeading__7617_392199001>`_ `Introduction 4 <#__RefHeading__1513_1172745218>`_ `What does it do? 4 <#__RefHeading__1169_1172745218>`_ `Further Information 4 <#__RefHeading__61859_1423540087>`_ `Schematic Presentation 5 <#__RefHeading__16517_1116738509>`_ `Default Design (HTML table) 5 <#__RefHeading__16519_1116738509>`_ `Individual Design 6 <#__RefHeading__16521_1116738509>`_ `Concept 7 <#__RefHeading__29622_603351207>`_ `Templates 7 <#__RefHeading__44219_603351207>`_ `TypoScript 7 <#__RefHeading__44221_603351207>`_ `Marker 7 <#__RefHeading__29628_603351207>`_ `Quick Example 8 <#__RefHeading__2658_182679940>`_ `Page, Plugin and Template 8 <#__RefHeading__61861_1423540087>`_ `Configuration in General 8 <#__RefHeading__3720_2779816721>`_ `List View 9 <#__RefHeading__61863_1423540087>`_ `Single View with own HTML snippet 11 <#__RefHeading__61865_1423540087>`_ `Single View with an image 12 <#__RefHeading__61867_1423540087>`_ `Tutorial with tt\_news 13 <#__RefHeading__10419_1116738509>`_ `Tutorial with tt\_content 13 <#__RefHeading__61984_1423540087>`_ `Content Templates 14 <#__RefHeading__7619_392199001>`_ `Links in Principle 14 <#__RefHeading__7621_392199001>`_ `Header 15 <#__RefHeading__7623_392199001>`_ `Text 16 <#__RefHeading__7625_392199001>`_ `Image 17 <#__RefHeading__7627_392199001>`_ `Header, Text and Image 18 <#__RefHeading__7629_392199001>`_ `CSV and XML (RSS) 19 <#__RefHeading__29638_603351207>`_ `Flexform Integration 20 <#__RefHeading__9121_392199001>`_ `Template Selection with the Plugin 20 <#__RefHeading__29640_603351207>`_ `Template Controlling with TypoScript 22 <#__RefHeading__29648_603351207>`_ `Integration of a Data Query 24 <#__RefHeading__44223_603351207>`_ `Freedom of Scope 25 <#__RefHeading__11011_182679940>`_ `Constant Editor 26 <#__RefHeading__7631_392199001>`_ `BROWSER - TEMPLATES - LIST - HEADER 0 26 <#__RefHeading__5224_392199001>`_ `BROWSER - TEMPLATES - LIST - HEADER [1-5] 26 <#__RefHeading__7633_392199001>`_ `BROWSER - TEMPLATES - LIST - IMAGE 0 26 <#__RefHeading__72791_1423540087>`_ `BROWSER - TEMPLATES - LIST - IMAGE [1-5] 26 <#__RefHeading__73005_1423540087>`_ `BROWSER - TEMPLATES - LIST - TEXT 0 27 <#__RefHeading__5709_392199001>`_ `BROWSER - TEMPLATES - LIST - TEXT [1,6] 27 <#__RefHeading__7635_392199001>`_ `BROWSER - TEMPLATES - LIST - URL 0 27 <#__RefHeading__72993_1423540087>`_ `BROWSER - TEMPLATES - LIST - URL [1-5] 27 <#__RefHeading__73007_1423540087>`_ `BROWSER - TEMPLATES - SINGLE - IMAGE 0 28 <#__RefHeading__3555_685150332>`_ `BROWSER - TEMPLATES - SINGLE - IMAGE 1 28 <#__RefHeading__73005_14235400871>`_ `BROWSER - TEMPLATES - SINGLE - TEXT 0 28 <#__RefHeading__6698_392199001>`_ `BROWSER - TEMPLATES - SINGLE - TEXT 1 28 <#__RefHeading__7637_392199001>`_ `Reference 29 <#__RefHeading__44231_603351207>`_ `Completely Browser Reference 29 <#__RefHeading__44233_603351207>`_ `Integration of a Template 29 <#__RefHeading__11019_182679940>`_ `Integration of a View 29 <#__RefHeading__44235_603351207>`_ `Data Query 30 <#__RefHeading__10421_1116738509>`_ `Helpful suggestions 31 <#__RefHeading__61869_1423540087>`_ `Change Log 32 <#__RefHeading__3727_2139160512>`_ `Illustration Index 33 <#__RefHeading__7879_1359502716>`_ `Alphabetical Index 34 <#__RefHeading__14691_1458450892>`_ .. _Screen-Shots: Screen Shots ------------ .. _Key-Image: Key Image ^^^^^^^^^ |img-5| .. _Constant-Editor: Constant Editor ^^^^^^^^^^^^^^^ |img-5| .. _Introduction: Introduction ------------ .. _What-does-it-do: 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: Further Information ^^^^^^^^^^^^^^^^^^^ .. _This-tutorial-in-PDF-format: 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: Browser Manual """""""""""""" Manual: The Browser has it's own manual (with the reference of course). - HTML: `http://typo3.org/extensions/repository/view/browser\_manual\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_manual\_en/doc/ma nual.pdf `_ .. _Schematic-Presentation: Schematic Presentation ---------------------- .. _Default-Design-HTML-table: 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. |img-5| The illustration below is based on the Browser Sample with tt\_news. See - 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 `_ .. _Individual-Design: 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. |img-5| 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 - `http://typo3-organiser.de `_ - HTML: `http://typo3.org/extensions/repository/view/org/ `_ - PDF: `http://typo3-organiser.de/typo3conf/ext/org/doc/manual.pdf `_ .. _Concept: Concept ------- The Browser enables to publish every data for every output format like HTML or XML. .. _Templates: 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: 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 ^^^^^^ Marker enables to design individual designs. Please take a look in the Browser Tutorial Marker. - HTTP: `http://typo3.org/extensions/repository/view/browser\_tut\_marke r\_en/current/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_tut\_marker\_en/d oc/manual.pdf `_ .. _Quick-Example: Quick Example ------------- .. _Page-Plugin-and-Template: Page, Plugin and Template ^^^^^^^^^^^^^^^^^^^^^^^^^ |img-5| 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: Configuration in General ^^^^^^^^^^^^^^^^^^^^^^^^ .. _Template: Template """""""" Configure the extension template. Here: +page\_quickexample\_1177 .. _Includes: [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: Browser Plugin / Flexform """"""""""""""""""""""""" .. _Record-Storage-Page: 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] |img-5| .. _List-View: List View ^^^^^^^^^ .. _Template: Template """""""" Configure the extension template. Here: +page\_quickexample\_1177 .. _General: [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: Result in the Frontend """""""""""""""""""""" |img-5| You get a list view with a search form, an index browser and a page browser. .. _Single-View-with-own-HTML-snippet: Single View with own HTML snippet ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ We add the single view with an own HTML snippet. .. _Template: Template """""""" Configure the extension template. Here: +page\_quickexample\_1177 .. _General: [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 (

###TT\_NEWS.TITLE###

###TT\_NEWS\_CAT.TITLE###

###MY\_SINGLEVIEWBACKBUTTON###

) } } } } } } } 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: Single View with an image ^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Template: Template """""""" Configure the extension template. Here: +page\_quickexample\_1177 .. _General: [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 (

###TT\_NEWS.TITLE###

###TT\_NEWS.IMAGE###
###TT\_NEWS\_CAT.TITLE###

###MY\_SINGLEVIEWBACKBUTTON###

) } } } } } } } .. _Constant-Editor: 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: 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: Tutorial with tt\_content ^^^^^^^^^^^^^^^^^^^^^^^^^ If you need an example with the FAL (File Abstraction Layer), please refer to the Browser Manual: - HTML: `http://typo3.org/extensions/repository/view/browser\_manual\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_manual\_en/doc/ma nual.pdf `_ .. _Content-Templates: Content Templates ----------------- .. _Links-in-Principle: 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. |img-5| 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: Constant Editor """"""""""""""" You have to configure the link properties with the constant editor. See "BROWSER - TEMPLATES - LIST - URL 0" on page 27 below. .. _Header: Header ^^^^^^ Recommended for list views. .. _Screenshot: Screenshot """""""""" |img-5| Wraps a header. Respects type of link (single view, page, url, no link). .. _Constant-Editor: 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: TypoScript Snippet """""""""""""""""" tx\_org\_news.title { 10 < plugin.tx\_browser\_pi1.displayList.master\_templates.tableFields .header.0 } .. _Live: Live """" `http://typo3-organiser.de `_ > News .. _Text: Text ^^^^ Recommended for list views. .. _Screenshot: Screenshot """""""""" |img-5| 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: 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: TypoScript snippets """"""""""""""""""" tx\_org\_news.title { 20 < plugin.tx\_browser\_pi1.displayList.master\_templates.tableFields .text.0 } .. _Live: Live """" `http://typo3-organiser.de `_ > News .. _Image: Image ^^^^^ Recommended for list views. .. _Screenshot: Screenshot """""""""" |img-5| Wraps an image. Respects type of link (single view, page, url, no link). .. _Constant-Editor: 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: TypoScript snippets """"""""""""""""""" tx\_quickshop\_products.image < plugin.tx\_browser\_pi1.displayList.ma ster\_templates.tableFields.image.3 .. _Tutorial: Tutorial """""""" You find some examples in the Browser Tutorial Images at - HTML: `http://typo3.org/extensions/repository/view/browser\_tut\_images\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_tut\_images\_en/d oc/manual.pdf `_ .. _Live: Live """" `http://typo3-quick-shop.de `_ > Shop .. _Header-Text-and-Image: Header, Text and Image ^^^^^^^^^^^^^^^^^^^^^^ Recommended for single views. |img-5| 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: 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: TypoScript snippets """"""""""""""""""" tx\_org\_cal.title < plugin.tx\_browser\_pi1.displaySingle.master\_tem plates.tableFields.imageText.0 .. _Tutorial: Tutorial """""""" You find some examples in the Browser Tutorial Images at - HTML: `http://typo3.org/extensions/repository/view/browser\_tut\_images\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_tut\_images\_en/d oc/manual.pdf `_ .. _Live: Live """" `http://typo3-organiser.de `_ > Calendar .. _CSV-and-XML-RSS: 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 - HTML: `http://typo3.org/extensions/repository/view/browser\_tut\_rss\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_tut\_rss\_en/doc/ manual.pdf `_ .. _Flexform-Integration: 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: Template Selection with the Plugin ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Tab-Templating: Tab [Templating] """""""""""""""" |img-5| 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 tags. This enables you, to publish any data without any own template. - Browser: list (browser)The browser default template with
    tags. This enables you, to publish any data without any own template. .. _Tab-General: 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). |img-5| Tab [Plugin] > [General] Views: [Configured] Views: Selected |img-5| Views Filter: [X] Display only views, which are linked with the current template. The list of this views (filtered). .. _Template-Controlling-with-TypoScript: Template Controlling with TypoScript ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ You control the integration of your templates and views into the plugin/flexform by TypoScript. .. _Templates: Templates """"""""" .. _Plugin-Flexfom: Plugin/Flexfom ~~~~~~~~~~~~~~ |img-5| You see the item [Org: Nachrichten (org)] in the illustration above. You see the TypoScript code below. .. _TypoScript-Snippet: 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: 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: Views """"" .. _Plugin-Flexfom: Plugin/Flexfom ~~~~~~~~~~~~~~ |img-5| 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: 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: Integration of a Data Query ^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Enable-Editors-to-select-defined-filters: 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: Plugin - Tab [Templating] ~~~~~~~~~~~~~~~~~~~~~~~~~ |img-5| Tab [Templating] Select Box "Data: query" .. _TypoScript-Snippet: 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: 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: Constant Editor --------------- .. _BROWSER-TEMPLATES-LIST-HEADER-0: BROWSER - TEMPLATES - LIST - HEADER 0 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ plugin.tx\_browser\_pi1.templates.listview.header.0 .. ### BEGIN~OF~TABLE ### .. _Header: Header """""" .. container:: table-row 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: Tag """ .. container:: table-row Property Tag Data type string Description HTML tag. Possible values are: - div - h1 - h2 - h3 - h4 - h5 - h6 - p Default h2 .. _Crop-header: Crop header """"""""""" .. container:: table-row 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 .. ###### END~OF~TABLE ###### .. _BROWSER-TEMPLATES-LIST-HEADER-1-5: BROWSER - TEMPLATES - LIST - HEADER [1-5] ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ See "BROWSER - TEMPLATES - LIST - HEADER 0" on page 26 above. .. _BROWSER-TEMPLATES-LIST-IMAGE-0: BROWSER - TEMPLATES - LIST - IMAGE 0 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ plugin.tx\_browser\_pi1.templates.listview.image.0 .. ### BEGIN~OF~TABLE ### .. _File: File """" .. container:: table-row Property File Data type string Description (Obligate!) Field with the file name. I.e: tx\_org\_service.image Default .. _Position: Position """""""" .. container:: table-row 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: Height """""" .. container:: table-row 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: Width """"" .. container:: table-row Property Width Data type string Description Width of the image in pixel. The samples at property height above. Default .. _SEO-field: SEO field """"""""" .. container:: table-row 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: Render layout """"""""""""" .. container:: table-row 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 tag. - picture: renders a picture tag containing source tags for each resolutions and an tag for the default image. - srcset: renders an image tag pointing to a set of images for the different resolutions. Default default .. _Path: Path """" .. container:: table-row Property Path Data type string Description (Obligate!) Path to the images (with ending backslash!). I.e: uploads/tx\_org/ Default .. _Default-image: Default image """"""""""""" .. container:: table-row 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 .. ###### END~OF~TABLE ###### .. _BROWSER-TEMPLATES-LIST-IMAGE-1-5: BROWSER - TEMPLATES - LIST - IMAGE [1-5] ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ See "BROWSER - TEMPLATES - LIST - IMAGE 0" on page 26 above. .. _BROWSER-TEMPLATES-LIST-TEXT-0: BROWSER - TEMPLATES - LIST - TEXT 0 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ plugin.tx\_browser\_pi1.templates.listview.text.0 .. ### BEGIN~OF~TABLE ### .. _Text-for-listview: Text for listview """"""""""""""""" .. container:: table-row 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: Tag """ .. container:: table-row Property Tag Data type string Description HTML tag. Possible values are: - div - h1 - h2 - h3 - h4 - h5 - h6 - p Default p .. _Crop-text: Crop text """"""""" .. container:: table-row 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 .. ###### END~OF~TABLE ###### .. _BROWSER-TEMPLATES-LIST-TEXT-1-6: BROWSER - TEMPLATES - LIST - TEXT [1,6] ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ See "BROWSER - TEMPLATES - LIST - TEXT 0" on page 27 above. .. _BROWSER-TEMPLATES-LIST-URL-0: BROWSER - TEMPLATES - LIST - URL 0 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ plugin.tx\_browser\_pi1.templates.listview.url.0 .. ### BEGIN~OF~TABLE ### .. _Key: Key """ .. container:: table-row Property Key Data type string Description (Obligate!) Field with the key for controlling the URL type. I.e: tx\_org\_service.type Default .. _Uid: Uid """ .. container:: table-row Property Uid Data type string Description (Obligate!) Field with the uid of the current record. I.e: tx\_org\_service.uid Default .. _Page: Page """" .. container:: table-row Property Page Data type string Description (Obligate!) Field with the link to the internal page. I.e: tx\_org\_service.page Default .. _URL: URL """ .. container:: table-row 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: Force absolute URL """""""""""""""""" .. container:: table-row 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: Scheme """""" .. container:: table-row Property Scheme Data type string Description Scheme is used, if absolute Url is enabled. Possible values: http,https Default http .. _return: return """""" .. container:: table-row 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: Alias for showUid """"""""""""""""" .. container:: table-row 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: PID of single view """""""""""""""""" .. container:: table-row 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 .. ###### END~OF~TABLE ###### .. _BROWSER-TEMPLATES-LIST-URL-1-5: BROWSER - TEMPLATES - LIST - URL [1-5] ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ See "BROWSER - TEMPLATES - LIST - URL 0" on page 27 above. .. _BROWSER-TEMPLATES-SINGLE-IMAGE-0: BROWSER - TEMPLATES - SINGLE - IMAGE 0 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ plugin.tx\_browser\_pi1.templates.listview.image.0 .. ### BEGIN~OF~TABLE ### .. _File: File """" .. container:: table-row Property File Data type string Description (Obligate!) Field with the file name. I.e: tx\_org\_service.image Default .. _Height-field: Height field """""""""""" .. container:: table-row Property Height field Data type string Description Field with the image height. I.e: tx\_org\_service.imageheight Default .. _Height-default: Height default """""""""""""" .. container:: table-row 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: Width field """"""""""" .. container:: table-row Property Width field Data type string Description Field with the image width. I.e: tx\_org\_service.imagewidth Default .. _Width-default: Width default """"""""""""" .. container:: table-row Property Width default Data type string Description Default width of the image in pixel. See the samples at property height above. Default .. _SEO-field: SEO field """"""""" .. container:: table-row 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 .. _Caption: Caption """"""" .. container:: table-row Property Caption Data type string Description Field for the image caption. I.e. tx\_org\_service.imagecaption Default .. _Image-orient: Image orient """""""""""" .. container:: table-row Property Image orient Data type string Description Field for the image orient. I.e. tx\_org\_service.imageorient Default .. _Image-columns: Image columns """"""""""""" .. container:: table-row Property Image columns Data type string Description Field for the image columns. I.e. tx\_org\_service.imagecols Default .. _Image-zoom: Image zoom """""""""" .. container:: table-row Property Image zoom Data type string Description If enabled, image will enlarged on click. I.e. tx\_org\_service.image\_zoom Default .. _Render-layout: Render layout """"""""""""" .. container:: table-row 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 tag. - picture: renders a picture tag containing source tags for each resolutions and an tag for the default image. - srcset: renders an image tag pointing to a set of images for the different resolutions. Default default .. _Path: Path """" .. container:: table-row Property Path Data type string Description (Obligate!) Path to the images (with ending backslash!). I.e: uploads/tx\_org/ Default .. ###### END~OF~TABLE ###### .. _BROWSER-TEMPLATES-SINGLE-IMAGE-1: BROWSER - TEMPLATES - SINGLE - IMAGE 1 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ See "BROWSER - TEMPLATES - SINGLE - IMAGE 0" on page 28 above. .. _BROWSER-TEMPLATES-SINGLE-TEXT-0: BROWSER - TEMPLATES - SINGLE - TEXT 0 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ plugin.tx\_browser\_pi1.templates.listview.text.0 .. ### BEGIN~OF~TABLE ### .. _Header: Header """""" .. container:: table-row Property Header Data type string Description (Obligate!) Field with the content for the header. I.e: tx\_org\_event.header Default .. _Header-tag: Header tag """""""""" .. container:: table-row Property Header tag Data type string Description HTML tag. Possible values are: - div - h1 - h2 - h3 - h4 - h5 - h6 - p Default h1 .. _Bodytext: Bodytext """""""" .. container:: table-row Property Bodytext Data type Description Field with the content for the bodytext. I.e: tx\_org\_event.bodytext // tx\_org\_event.teaser\_short Default .. ###### END~OF~TABLE ###### .. _BROWSER-TEMPLATES-SINGLE-TEXT-1: BROWSER - TEMPLATES - SINGLE - TEXT 1 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ See "BROWSER - TEMPLATES - SINGLE - TEXT 0" on page 28 above. .. _Reference: Reference --------- .. _Completely-Browser-Reference: Completely Browser Reference ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - HTML: `http://typo3.org/extensions/repository/view/browser\_manual\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_manual\_en/doc/ma nual.pdf `_ .. _Integration-of-a-Template: Integration of a Template ^^^^^^^^^^^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _template-extensions: template.extensions """"""""""""""""""" .. container:: table-row 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 .. ###### END~OF~TABLE ###### .. _Integration-of-a-View: Integration of a View ^^^^^^^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _views-list-XX-name: views.list.XX.name """""""""""""""""" .. container:: table-row 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 .. ###### END~OF~TABLE ###### .. _Data-Query: Data Query ^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _templating-arrDataQuery-items: templating.arrDataQuery.items """"""""""""""""""""""""""""" .. container:: table-row 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 .. ###### END~OF~TABLE ###### .. _Helpful-suggestions: Helpful suggestions ------------------- .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Forum: 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: 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: 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 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: 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: Alphabetical Index ------------------ `0 <#sdfootnote1anc>`_ Neeed only, if it isn't included in a parent TypoScript template `0 <#sdfootnote2anc>`_ Optional: Needed only, if you like the HTML wrap of the Browser 4.x for the page browser. 34 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.jpeg .. :border: 0 .. :height: 20 .. :id: Grafik2 .. :name: Grafik2 .. :width: 69 .. |img-3| image:: img-3.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics1 .. :name: graphics1 .. :width: 18 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 268 .. :id: graphics6 .. :name: graphics6 .. :width: 302 .. |img-5| image:: data: :alt: Frame53 .. :align: bottom .. :id: Frame53 .. :name: Frame53