.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ===================================== Browser Tutorial Download Module (en) ===================================== :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: Dirk Wildt :Changed: 2012-05-17T04:09:46 :Classification: browser_tut_downloads_en :Description: Manage your downloads with the Browser! The Browser takes care of user access rights. It is counting hits and visits for downloaded files. The statistics data is the basis for displaying most frequented records and files. Top 10 lists are a typical example. :Keywords: forDevelopers, forIntegrators, browser, downloads, download, module, tutorial, frontend-engine :Author: Dirk Wildt, Die Netzmacher :Email: http://wildt.at.die-netzmacher.de :Website: http://die-netzmacher.de :Language: en |img-1| |img-2| extKey: browser\_tut\_downloads\_en |img-3| .. _Browser-Tutorial-Download-Module-en: Browser Tutorial Download Module (en) ===================================== Manage your downloads with the Browser! The Browser takes care of user access rights. It is counting hits and visits for downloaded files. The statistics data is the basis for displaying most frequented records and files. Top 10 lists are a typical example. |img-4| Version: 3.9.14, 2012-05-14 - Version is corresponding with the version of the Browser. Extension Key: browser\_tut\_downloads\_en - Tutorial for the extension Browser (extkey: browser) Language: en Keywords: forDevelopers, forIntegrators, browser, downloads, download, module, tutorial, frontend-engine Copyright 2011-2012, 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 Download Module (en) 1 <#__RefHeading__12229_1904948122>`_ `Screen Shots 3 <#__RefHeading__12239_1904948122>`_ `Frontend 3 <#__RefHeading__2676_1901627290>`_ `Backend 4 <#__RefHeading__2682_1901627290>`_ `Introduction 5 <#__RefHeading__2686_1901627290>`_ `What does the Tutorial do? 5 <#__RefHeading__12241_1904948122>`_ `What does the Browser Download Module do? 5 <#__RefHeading__12243_1904948122>`_ `When do you need the Browser module? 5 <#__RefHeading__3263_1495559465>`_ `What doesn't the Browser Download Module not do? 6 <#__RefHeading__339_668338586>`_ `What do you need? 6 <#__RefHeading__3265_1495559465>`_ `Further Information 6 <#__RefHeading__12245_1904948122>`_ `TYPO3 Browser Download Module 7 <#__RefHeading__877_448277827>`_ `Workflow 7 <#__RefHeading__5688_806296130>`_ `Access Management 8 <#__RefHeading__375_668338586>`_ `Security 8 <#__RefHeading__373_386966621>`_ `Mime-types 9 <#__RefHeading__5102_806296130>`_ `Samples – ready for use 10 <#__RefHeading__2461_1068782120>`_ `DAM by Browser 10 <#__RefHeading__2463_1068782120>`_ `Organiser 10 <#__RefHeading__2465_1068782120>`_ `Use the Browser for DAM! 11 <#__RefHeading__3192_341613106>`_ `Workflow 11 <#__RefHeading__3273_14955594651>`_ `Requirements 11 <#__RefHeading__3275_14955594651>`_ `Page 11 <#__RefHeading__3194_341613106>`_ `TypoScript 12 <#__RefHeading__3196_341613106>`_ `Plugin 13 <#__RefHeading__3202_341613106>`_ `That's all 14 <#__RefHeading__3204_341613106>`_ `Tutorial 15 <#__RefHeading__2467_1068782120>`_ `Use the download module for your own extension 15 <#__RefHeading__2469_1068782120>`_ `Workflow 15 <#__RefHeading__3273_1495559465>`_ `Requirements 15 <#__RefHeading__3275_1495559465>`_ `Purpose 16 <#__RefHeading__2473_1068782120>`_ `DAM 16 <#__RefHeading__2475_1068782120>`_ `Page, Template, Plugin – 1/2 17 <#__RefHeading__2696_1901627290>`_ `HTML Template 17 <#__RefHeading__2700_1901627290>`_ `TypoScript – 1/3 20 <#__RefHeading__2481_1068782120>`_ `Page, Template, Plugin – 2/2 21 <#__RefHeading__2704_1901627290>`_ `TypoScript – 2/3 23 <#__RefHeading__2710_1901627290>`_ `TypoScript – 3/3 28 <#__RefHeading__2722_1901627290>`_ `Result in the frontend 29 <#__RefHeading__2728_1901627290>`_ `Next steps 30 <#__RefHeading__2734_1901627290>`_ `Reference 31 <#__RefHeading__12305_1904948122>`_ `Forum 32 <#__RefHeading__11300_144712033>`_ `To-Do List 33 <#__RefHeading__12315_1904948122>`_ `Change Log 34 <#__RefHeading__12317_1904948122>`_ .. _Screen-Shots: Screen Shots ------------ .. _Frontend: Frontend ^^^^^^^^ .. _typo3-organiser-de: typo3-organiser.de """""""""""""""""" |img-5| Organiser (org) is based on the TYPO3 Browser. It is using the download module among others. You can install the Organiser with one click – ready to go. Configuration is finished. It contains the records like in the illustration above. See: `http://typo3-organiser.de/downloads/ `_ |img-5| .. _leg-thueringen-de: leg-thueringen.de """"""""""""""""" |img-5| The example above is based on Organiser (org) See: `http://www.leg-thueringen.de/downloads `_ .. _Backend: Backend ^^^^^^^ .. _typo3-organiser-de: typo3-organiser.de """""""""""""""""" |img-5| This is the backend. The backend is designed by the extension Organiser. It is independent of the TYPO3 Browser download module. .. _Introduction: Introduction ------------ .. _What-does-the-Tutorial-do: What does the Tutorial do? ^^^^^^^^^^^^^^^^^^^^^^^^^^ This is a tutorial for the extension Browser Download Module (extkey: browser\_downloads\_en). It is only a tutorial for the Browser Download Module. It does - explain the work flow of the Browser Download Module, - document the needed requirements and - teach, how to install and configure the Download Module for your own extension and your own needs. If you are interested in other issues than the download module, please note the section "Further Informations" below. .. _What-does-the-Browser-Download-Module-do: What does the Browser Download Module do? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The Browser Download Module manages the frontend rendering of downloads. Features are - automatic thumbnail rendering - automatic calculating of the file size - statistics data (the basis for top 10 lists) - a sophisticated user access management - search engine optimisation - displaying download links for the origin file and all translated files - a sophisticated client application management depending on the mime- type of the file - a sample for DAM. You can use DAM from the scratch. The Browser Download Module is localised. The Browser Download Module enables you to use files of every database like DAM, Organiser, tt\_news or your own database. Properties will be configured in both flexforms: - the flexform for editing the record. Properties depends on the used extension like DAM, Organiser, tt\_news or your extension. - the flexform of the TYPO3 Browser plugin. The frontend engine of the module is based on tt\_content.uploads.20. tt\_content.uploads.20 is part of the TYPO3 system extension "CSS styled content" (css\_styled\_content). It is a very good standard. If you are familiar to tt\_content.uploads, it should be easy to adapt the TypoScript to your needs. You can categorise files. This depends on your database design. If you like to use the TYPO3 Browser Download Module, your job is to configure the backend for your database (ext\_tables.sql and tca.php) and to configure the frontend by TypoScript. The extension Organiser (org) is using the TYPO3 Browser Download Module. There is a live example on `http://typo3-organiser.de/ `_ The TYPO3 Browser has a forum. See "Forum" on page 32 below. .. _When-do-you-need-the-Browser-module: When do you need the Browser module? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The standard of extension development is, that you have to take care of the output of your data. It is simple to code to offer documents for downloading – but with a link to the document only. You can need the Browser Download module, if you have this needs: - A thumbnail should link from the list view to the single view of the record - A thumbnail should link in the single view for downloading the document, but URL shouldn't be the URL to the document directly. - Documents should controlled by access rights. - Downloads should counted for statistic data. - And this can be a need to: You are lazy and don't like to code the download management by your self. .. _What-doesn-t-the-Browser-Download-Module-not-do: What doesn't the Browser Download Module not do? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - The Browser Download Module isn't any application out of the box. - The Browser Download Module is different to every known download application or file management application: the module hasn't any own database. .. _What-do-you-need: What do you need? ^^^^^^^^^^^^^^^^^ - The Browser from version 4.0 (developer version 3.9.14). - A database, which manage your files in the TYPO3 backend. - Knowledge about TypoScript. .. _Further-Information: Further Information ^^^^^^^^^^^^^^^^^^^ .. _This-tutorial-in-PDF-format: This tutorial in PDF format """"""""""""""""""""""""""" You find this manual as PDF file at - doc/manual.pdf - HTML `http://typo3.org/documentation/document-library/extension- manuals/browser\_tut\_downloads\_en/current/ `_ - Download: `http://typo3-browser.de/typo3conf/ext/browser\_tut\_downloa ds\_en/doc/manual.pdf `_ .. _User-function-render-uploads: User function: render\_uploads """""""""""""""""""""""""""""" The Browser download module is using the user function render\_uploads. This function is documented in the manual - Browser Tutorial User Defined Functions (en)See section "render\_uploads" - HTML `http://typo3.org/documentation/document-library/extension- manuals/browser\_tut\_userfunc\_en/current/ `_ - PDF `http://typo3-browser.de/typo3conf/ext/browser\_tut\_userfunc\_en/ doc/manual.pdf `_ .. _All-Browser-Manuals-and-Tutorials: All Browser Manuals and Tutorials """"""""""""""""""""""""""""""""" You find all Browser manuals and tutorials at the home page of the Browser: - English: `http://typo3-browser.de/en/browser-tutorials/ `_ - German: `http://typo3-browser.de/browser-tutorials/ `_ All manuals and tutorials are in English but the "Fall-Studie: Grüne Autos". .. _TYPO3-Browser-Download-Module: TYPO3 Browser Download Module ----------------------------- .. _Workflow: Workflow ^^^^^^^^ .. _The-usual-way-without-any-application: The usual way without any application """"""""""""""""""""""""""""""""""""" The usual way to provide a file is a direct link like http://typo3-organiser.de/fileadmin/tx\_org/my\_file.pdf. This has the advantage: - You don't need a Content Management System (CMS) for the download. - You won't have any SQL query. - You will have a good performance. But the dark side of the moon is: - You can't count downloads with your CMS (here: TYPO3). You can't create top 10 lists for example. - You can't manage user access rights with your CMS. .. _The-usual-way-with-a-common-application: The usual way with a common application """"""""""""""""""""""""""""""""""""""" There are some TYPO3 extensions, which support the management of files and downloads. Some extensions are very powerful: - some are localised - some have support for statistics needs - some support search engine optimisation - some are meta management systems like DAM But all extensions have the same concept: - You have to manage your files with the database of the extension or of the meta management system. - You have to publish your files with the plugin (PHP code) of the extension. If you like to change the database or to extend it, you will have a lot of work – the truth is: it isn't possible in principle. .. _The-way-with-the-TYPO3-Browser-Download-Module: The way with the TYPO3 Browser Download Module """""""""""""""""""""""""""""""""""""""""""""" The base is your database (your extension) or any other extension, which manage the file upload in the TYPO3 backend. Or the base is an extensions, which are using the Browser Download Module – but this extensions are ready for use – like the Organiser (org) The TYPO3 Browser is the frontend engine for your database: It takes care of the output like list views and single views, search forms, filters and category menus. The Browser Download Module is part of the Browser. The Module generates a link to a file, which points to the TYPO3 Browser plugin. The Browser plugin handles this link. It checks some conditions like user access rights among others. It manages the statistics needs. It provides the file and sends meta data like the mime-type. .. _Follow-the-work-flow: Follow the work flow """""""""""""""""""" You can follow the work flow of the Download Module. You have to enable the DRS – the Development Reporting System – in the extension manager of the TYPO3 Browser. You will get a lot of logs in the TYPO3 backend. .. _Access-Management: Access Management ^^^^^^^^^^^^^^^^^ Access will managed by the frontend user management of TYPO3. - Anybody hasn't access to a file, if the record is hidden or marked as deleted, which contains this file. - Anybody hasn't access, if he isn't logged in or isn't authorised, but the page or the Browser plugin has give access for a group of frontend users only, You can switch on and switch off download access in principle by the Browser plugin. .. _Security: Security ^^^^^^^^ .. _Checks: Checks """""" You can use the Browser plugin unlimited in your TYPO3 installation and unlimited on every page. The Browser plugin itself can manage views unlimited. Therefore are the following needs for security: - The Browser plugin has access to files only, if it is configured for file access. Not other plugin hasn't any access. - The authorised Browser plugin has access for files for the view only, which is configured for file access. Therefore you will get a link to a file like this one: tx\_browser\_pi1[file]=single.301.tx\_org\_downloads.26.documents.0 .. _Risks: Risks """"" Files can download by the direct link still! The user has to know the link only. If files shouldn't downloaded directly, you have to manage the access to files on your server by your self. .. _Mime-types: Mime-types ^^^^^^^^^^ The Browser allocates mime-types to files. This has the advantage, that most operating systems offer the application for viewing or editing the file before the download. The mime-types are a property of TypoScript. If you want to change the allocation or if you like to extend it, please configure the TypoScript. See plugin.tx\_browser\_pi1.download.mime-types.fileext |img-5| .. _Samples-ready-for-use: Samples – ready for use ----------------------- .. _DAM-by-Browser: DAM by Browser ^^^^^^^^^^^^^^ The Browser provides a template for DAM – ready for use. You need the DAM extension only. Does it make sense? DAM is very powerful, but some user like it more simple in the frontend and more simple to adapt the database to their needs. The Browser template for DAM is the result of the tutorial below. We take DAM for the tutorial, because it is well known and a standard for document access management in TYPO3. .. _Organiser: Organiser ^^^^^^^^^ Organiser is a very young extension – published in 2011. But it is very powerful. It is the Swiss knife between the 5.500 extensions in the TYPO3 repository. You can manage - events - locations - media (download) - news - online tickets - organisers and - stuff And you can install the Organiser with one click! It is ready for use with a lot of example data, a configured shopping cart and a download module among others. .. _Use-the-Browser-for-DAM: Use the Browser for DAM! ------------------------ .. _Workflow: Workflow ^^^^^^^^ - Create a page, add a TypoScript template and add the Browser plugin. - Configure the TypoScript template. - Configure the TypoScript Constant Editor. - Configure the plugin. - Check the result in the frontend. .. _Requirements: Requirements ^^^^^^^^^^^^ .. _Browser-4-x: Browser 4.x """"""""""" You need the Browser from version 4.0. .. _DAM: DAM """ You have to install Media DAM (dam) .. _Knowledge-about-TypoScript: Knowledge about TypoScript """""""""""""""""""""""""" Less. .. _Time: Time """" You will need from 10 minutes to 20 minutes. It depends on your knowledge about the Browser and TypoScript. .. _Page: Page ^^^^ Add to your Website a page. Call it "Browser for DAM". |img-5| .. _TypoScript: TypoScript ^^^^^^^^^^ .. _Template: Template """""""" - Add to your page a TypoScript extension template. - Call it "+page\_browserdam\_217", if 217 is the id of your TypoScript template. - Slect the tab [Includes] - Add to the field "Include satic (from extensions):" the static templates - Browser (browser) - +Browser Sample for DAM (browser) |img-5| .. _TypoScript-Constant-Editor: TypoScript Constant Editor """""""""""""""""""""""""" Set the page uid to the uid of the page "Browser for DAM" |img-5| Modul: Web > Template Page tree: page "Browser for DAM" Edit area: [Constant Editor] [BROWSER – DOWNLOAD MODULE] page uid: the uid of the page "Browser for DAM" .. _Plugin: Plugin ^^^^^^ - Add to your page the Browser flexform / plugin - Call it [Browser for DAM] - Set [Don't display any header] - Behaviour: Set the "Record Storage Page" to the folder with your DAM records. Usually it is called "Media". - Plugin > Templating: Set "HTML" to [+DAM: Sample (dam)] - If you have other views configured (in case you are still using the TYPO3 Browser for other projects) please configure: Plugin > General - Set "Views" to [Configured] - Set "Views: Enabled list views, ..." to "37165: +DAM: Sample" - Plugin > General > Download: This plugin is permitted to handle the download page object.Set it to [Enabled] .. _That-s-all: That's all ^^^^^^^^^^ Call your page in the frontend. .. _List-view: List view """"""""" |img-5| .. _Single-view: Single view """"""""""" |img-5| .. _Tutorial: Tutorial -------- .. _Use-the-download-module-for-your-own-extension: Use the download module for your own extension ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ This tutorial present, how you are using the Browser Download Module for your own extension. .. _Tutorial-is-based-on-DAM: Tutorial is based on DAM """""""""""""""""""""""" But because the author can't know your extension, this tutorial is based on DAM. .. _Workflow: Workflow ^^^^^^^^ - Get an HTML template and adapt it to your needs. - Configure TypoScript 1/3 (test only) - Create a page, add a TypoScript template and add the Browser plugin. - Check the result in the frontend - Configure TypoScript 2/3 (download template) - Check the result in the frontend - Configure TypoScript 3/3 (extend the download template) - Check the result in the frontend .. _Requirements: Requirements ^^^^^^^^^^^^ If you like to follow this tutorial, this are the requirements. .. _Browser-4-x: Browser 4.x """"""""""" You need the Browser from version 4.0. .. _DAM-or-your-own-database-registered-by-the-TCA: DAM or your own database registered by the TCA """""""""""""""""""""""""""""""""""""""""""""" You can use the TYPO3 Browser Download Module with every database. There is one need only: the database has to be registered for the TCA – the Table Configuration Array. Every database of a TYPO3 extension is registered. We take DAM for this tutorial. This fields are needed - record title - file - file description - file caption Optional are fields like - an alternate thumbnail - the size of the thumbnail - statistics data But the optional fields aren't part of this tutorial. .. _Knowledge-about-TypoScript: Knowledge about TypoScript """""""""""""""""""""""""" You should be familiar with TypoScript. .. _Time: Time """" You will need from 30 minutes to 2 hours. It depends on your knowledge about the Browser and TypoScript. .. _Purpose: Purpose ^^^^^^^ .. _List-view: List view """"""""" Each item should contain: - filter for the category - filter for the date of publishing - title - file with link to the single view - caption .. _Single-view: Single view """"""""""" Each item should contain: - title - file with link for downloading - caption - description - download size - link for downloading .. _DAM: DAM ^^^ .. _Install-DAM: Install DAM """"""""""" Install Media DAM (dam), if it isn't installed. - Update the database. - Update the DAM configuration (take all properties by default). .. _Scan-files: Scan files """""""""" - Modul MEDIA > Tools - Edit area: Check index -> Check uploads > Send data If DAM doesn't find any file, please upload three files and repeat the file scan. .. _Add-Categories: Add Categories """""""""""""" Add two categories like - books - photos or any others. - Modul WEB > List - Page tree: Folder Media (on top level) - Edit area: Add records "Media Categories" .. _Check-the-result: Check the result """""""""""""""" - Modul WEB > List - Page tree: Folder Media (on top level) You should see some files and the categories at least. .. _Page-Template-Plugin-1-2: Page, Template, Plugin – 1/2 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - Add to your Website a page - call it "Browser DAM Sample". - hide it in menus. - Add to your page a TypoScript extension template. Call it "+page\_browserdam\_216", if 216 is the id of your TypoScript template. - Add to your page the Browser flexform / plugin - Call it [Browser DAM Sample] - Set [Don't display any header] - Configure it later. .. _Intermediate-Result: Intermediate Result """"""""""""""""""" |img-5| The illustration above displays the result in the backend. |img-5| The illustration above displays the result in the frontend. You will get an error message. This would be OK! Don't care about it. We will configure the Browser plugin later. .. _HTML-Template: HTML Template ^^^^^^^^^^^^^ .. _Copy-the-Browser-default-template: Copy the Browser default template """"""""""""""""""""""""""""""""" We copy the Browser default HTML template for unordered lists to a directory in our extension (or into the fileadmin). cp typo3conf/ext/browser/res/html/default\_ul.tmpl fileadmin/browser\_dam\_sample/default.html Please adapt the destination path to your needs. .. _Edit-the-copy: Edit the copy """"""""""""" .. _List-view: List view ~~~~~~~~~ We are interested in the subpart of the marker ###LISTBODY### only (3 lines).
    ### **ITEM** ### ###SOCIALMEDIA\_BOOKMARKS###
We replace the marker ###ITEM### with ###TX\_DAM.TITLE###
    ### **TX\_DAM.TITLE** ### ###SOCIALMEDIA\_BOOKMARKS###
.. _Single-view: Single view ~~~~~~~~~~~ We are interested in the subpart of the marker ###SINGLEBODY###.

###TITLE###

###FIELD### ###VALUE### ###SOCIALMEDIA\_BOOKMARKS###

###BUTTON###

Remove all but the div with the class "ui-widget-content " between - and - and - and Intermediate result: ****
**** ****
****

###BUTTON###

Insert into and ###TX\_DAM.TITLE### ###SOCIALMEDIA\_BOOKMARKS###
**###TX\_DAM.TITLE### ###SOCIALMEDIA\_BOOKMARKS###**

###BUTTON###

.. _TypoScript-1-3: TypoScript – 1/3 ^^^^^^^^^^^^^^^^ We have to do this at least: - Connect the Browser with our HTML template - Get the tx\_dam.title from the database. - Integrate our HTML template and our TypoScript template into the flexform of the Browser .. _TypoScript-snippet: TypoScript snippet """""""""""""""""" plugin.tx\_browser\_pi1 { template { extensions { dam { sample { // [String] Name of the template. It will displayed in the plugin/flexform name = +DAM: Sample file = fileadmin/browser\_dam\_sample/default.html // [csv] Comma seperated list with the number of the correspondening views csvViews = 37165 } } } } views { list { 37165 = +DAM: Sample 37165 { // [String] Name of the view. It will displayed in the plugin/flexform name = +DAM: Sample // [String] Select clause (don't confuse it with the SQL select) select ( tx\_dam.title ) } } single { 37165 = +DAM: Sample 37165 { // [String] Select clause (don't confuse it with the SQL select) select ( tx\_dam.title ) } } } } Line 4-12: We register our templates in the flexform of the Browser.It will appear in a selectbox with the name "+DAM: Sample"It will take the HTML template from the given path.It is connected with the view 37165 `:sup:`0` <#sdfootnote1sym>`_ Line 16-26: Our list viewIt is called "+DAM: SampleIt will query the database for the field tx\_dam.title at runtime only. Line 27-35: Same as list view We copy our TypoScript snippet into the TypoScript template of the page "Browser DAM Sample". .. _Page-Template-Plugin-2-2: Page, Template, Plugin – 2/2 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - Edit your TypoScript template "+page\_browserdamsample\_216" - You have copied the TypoScript snippet form above into the field "Setup". - Includes the static template (from extensions): "Browser (browser)" - Edit the Browser flexform / plugin "[Browser DAM Sample]" - Behaviour: Set the "Record Storage Page" to the folder with your DAM records. Usually it is called "Media". - Plugin > Templating: Set "HTML" to [+DAM: Sample (dam)] - If you have other views configured (in case you are still using the TYPO3 Browser for other projects) please configure: Plugin > General - Set "Views" to [Configured] - Set "Views: Enabled list views, ..." to "37165: +DAM: Sample" - Plugin > General > Download: This plugin is permitted to handle the download page object.Set it to [Enabled] .. _TypoScript-Template: TypoScript Template """"""""""""""""""" |img-5| |img-5| .. _Intermediate-Result: Intermediate Result """"""""""""""""""" |img-5| The result in the frontend depends on your available files. You should get a list view with tx\_dam records labelled with the title. The list view contains - a search form, - an index browser, - a field for sorting and - a page browser, if you have more than 20 DAM records stored. .. _Unexpected-result: Unexpected result? ~~~~~~~~~~~~~~~~~~ If there is any error or unexpected result: - Please check the first tab [Plugin check] of the Browser flexform. Is there any helpful prompt? - Please check, if you have followed the tutorial proper. .. _TypoScript-2-3: TypoScript – 2/3 ^^^^^^^^^^^^^^^^ .. _The-snippets-as-a-file: The snippets as a file """""""""""""""""""""" You find the completely code snippet at typo3conf/ext/browser/static/samples/dam/setup.txt .. _General: General """"""" We don't like one default property (it is out of date): we remove general\_stdWrap. plugin.tx\_browser\_pi1.general\_stdWrap > See snippet below. plugin.tx\_browser\_pi1 { template { ... } // Don't use general\_stdWrap! general\_stdWrap > ... } .. _List-view: List view """"""""" The Browser uses "showUid" as label for the record uid in the URL. We like to change it to another name, which we will configure by the TYPO3 Constant Editor. We will explain it later. See: plugin.tx\_browser\_pi1.views.list.37165.showUid We add fields for the file name, the file path and the caption. **Please don't forget the comma** after the first field tx\_dam.title! See plugin.tx\_browser\_pi1.views.list.37165.select We configure field per field. See: plugin.tx\_browser\_pi1.views.list.37165.tx\_dam.title Be aware of proper lines at tx\_dam.title.20 and tx\_dam.title.40.Property and value has to be one line! tx\_dam.title.20 < <- is wrong plugin... <- is wrong tx\_dam.title.40 < <- is wrong plugin... <- is wrong tx\_dam.title.20 < plugin... <- is proper tx\_dam.title.40 < plugin... <- is proper - tx\_dam.title.20 and tx\_dam.title.40 get so called master templates. This save a lot of work for TYPO3 integrators and developers. - The master templates contains some values, which depends on your configuration. - You will maintain the values by the TYPO3 Constant Editor (see below). If you are interested in the code of the templates, please inspect tx\_dam.title.20 and tx\_dam.title.40 with the TYPO3 Object Browser. Code Snippet plugin.tx\_browser\_pi1 { ... views { list { 37165 = +DAM: Sample 37165 { ... showUid = {$plugin.tx\_browser\_pi1.downloadmodule.urlParam} select ( tx\_dam.title **,** tx\_dam.file\_name, tx\_dam.file\_path, tx\_dam.caption ) tx\_dam { title = COA title { 10 = TEXT 10 { value =

###TX\_DAM.TITLE###

} 20 < plugin.tx\_browser\_pi1.displayList.master\_templates.modules.dow nload.thumbnails.withLinkToListView 30 = TEXT 30 { value =

###TX\_DAM.CAPTION###

} 40 < plugin.tx\_browser\_pi1.displayList.master\_templates.modules.dow nload.textlinks.withLinkToListView 90 = TEXT 90 { value =
 
} } } } } single { ... } } } .. _Single-view: Single view """"""""""" The single view is the same like the list view in principle. It is more detailed. And links are links for downloading, The Browser uses "showUid" as label for the record uid in the URL. We like to change it to another name, which we will configure by the TYPO3 Constant Editor. We will explain it later. See: plugin.tx\_browser\_pi1.single.list.37165.showUid We add fields for the file name, the file path and the caption. **Please don't forget the comma** after the first field tx\_dam.title! See plugin.tx\_browser\_pi1.single.list.37165.select We configure field per field. See: plugin.tx\_browser\_pi1.single.list.37165.tx\_dam.title Be aware of proper lines at tx\_dam.title.20 and tx\_dam.title.40.Property and value has to be one line! tx\_dam.title.20 < <- is wrong plugin... <- is wrong tx\_dam.title.40 < <- is wrong plugin... <- is wrong tx\_dam.title.20 < plugin... <- is proper tx\_dam.title.40 < plugin... <- is proper - tx\_dam.title.20 and tx\_dam.title.40 get so called master templates. This save a lot of work for TYPO3 integrators and developers. - The master templates contains some values, which depends on your configuration. - You will maintain the values by the TYPO3 Constant Editor (see below). If you are interested in the code of the templates, please inspect tx\_dam.title.20 and tx\_dam.title.40 with the TYPO3 Object Browser. Code Snippet plugin.tx\_browser\_pi1 { ... views { ... single { 37165 = +DAM: Sample 37165 { // [String] Parameter for the uid of the document in the URL showUid = {$plugin.tx\_browser\_pi1.downloadmodule.urlParam} select ( tx\_dam.title **,** tx\_dam.file\_name, tx\_dam.file\_path, tx\_dam.caption, tx\_dam.description, tx\_dam.date\_mod, tx\_dam.file\_size, tx\_dam\_cat.title ) tx\_dam { title = COA title { 10 = TEXT 10 { value =

###TX\_DAM.TITLE###

} 11 = TEXT 11 { value =

Beschreibung: ###TX\_DAM.DESCRIPTION###

} 12 = TEXT 12 { value = ###TX\_DAM.DATE\_MOD### strftime = %d. %b %Y noTrimWrap = \|

Änderungsdatum: \|

\| } 13 = TEXT 13 { value = ###TX\_DAM.FILE\_SIZE### bytes = 1 bytes { labels = {$styles.content.uploads.filesizeBytesLabels} } noTrimWrap = \|

Grösse: \|

\| } 14 = TEXT 14 { value =

Kategorie: ###TX\_DAM\_CAT.TITLE###

} 20 < plugin.tx\_browser\_pi1.displayList.master\_templates.modules.dow nload.thumbnails.withDownloadLink 30 = TEXT 30 { value =

###TX\_DAM.CAPTION###

} 40 < plugin.tx\_browser\_pi1.displayList.master\_templates.modules.dow nload.textlinks.withDownloadLink 90 = TEXT 90 { value =
 
} } } } } } } .. _Page: Page """" We need a small CSS template for a proper record layout. You can take the CSS file of the Browser extension. And you can take your own one – please adapt the path to your needs. ... page { includeCSS { 37165 = EXT:browser/res/sample/dam/default.css } } .. _TypoScript-3-3: TypoScript – 3/3 ^^^^^^^^^^^^^^^^ You are using some master templates. The master templates contains values, which depends on your configuration. All this values are constants. You maintain it with the TYPO3 Constant Editor. .. _Constant-Editor: Constant Editor """"""""""""""" |img-6| Modul: Web > Template Page tree: page "Browser DAM Sample" Edit area: [Constant Editor] [BROWSER – DOWNLOAD MODULE] page uid: the uid of the page "Browser DAM Sample" field files: tx\_dam.file\_name Marker field uid TX\_DAM.UID Marker field files TX\_DAM.FILE\_NAME Marker field path TX\_DAM.PATH Marker field titles TX\_DAM.TITLE .. _TypoScript-snippet: TypoScript snippet """""""""""""""""" The editor stores your configration in the constants field of your TypoScript on the page "Browser DAM Sample": plugin.tx\_browser\_pi1.downloadmodule.pageUid = 7530 **<- your uid!** plugin.tx\_browser\_pi1.downloadmodule.tableField = tx\_dam.file\_name plugin.tx\_browser\_pi1.downloadmodule.uid = TX\_DAM.UID plugin.tx\_browser\_pi1.downloadmodule.files = TX\_DAM.FILE\_NAME plugin.tx\_browser\_pi1.downloadmodule.path = TX\_DAM.FILE\_PATH plugin.tx\_browser\_pi1.downloadmodule.titles = TX\_DAM.TITLE .. _Result-in-the-frontend: Result in the frontend ^^^^^^^^^^^^^^^^^^^^^^ .. _List-view: List view """"""""" |img-5| The result depends on your file data. A click on the thumbnail will forward to the single view. .. _Single-view: Single view """"""""""" |img-7| A click on the thumbnail will load the download dialog. The result depends on your file data. .. _Next-steps: Next steps ^^^^^^^^^^ Now it is your job, to detail the views and adapt it to your needs. .. _Filter: Filter """""" The TypoScript template for this sample contains two filters. If you like to use filters, please - add the marker for each filter to the HTML template and - configure the filter in the TypoScript. See - HTML: typo3conf/ext/browser/res/sample/dam/default.html - TypoScript: typo3conf/ext/browser/static/samples/dam/setup.txt .. _Reference: Reference --------- You find all other stuff in the manual of the Browser. See "Further Information" on page 6 above. .. _Forum: Forum ----- |img-8| Illustration 17: The TYPO3-Frontend-Engine Browser Forum The Browser has its own forum. We speak English and German. You are welcome to post any question, bug or snippet code at TYPO3-Frontend-Engine Browser: Forum `http://typo3-browser-forum.de/ `_ .. _To-Do-List: To-Do List ---------- Nothing to do. .. _Change-Log: Change Log ---------- 3.9.14: **Initial release** Tutorial `0 <#sdfootnote1anc>`_ We open a ticket for this template / tutorial on TYPO3 forge. 37165 is the ticket number. Other extensions are using the Browser too, and we try to get a unique view number 34 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 27 .. :hspace: 4 .. :id: Grafik2 .. :name: Grafik2 .. :width: 98 .. |img-3| image:: img-3.png .. :align: bottom .. :border: 0 .. :height: 27 .. :id: graphics25 .. :name: graphics25 .. :width: 30 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 268 .. :id: graphics5 .. :name: graphics5 .. :width: 302 .. |img-5| image:: data: :alt: Frame3 .. :align: bottom .. :id: Frame3 .. :name: Frame3 .. |img-6| image:: img-6.jpeg .. :align: bottom .. :border: 0 .. :height: 489 .. :id: graphics12 .. :name: graphics12 .. :width: 669 .. |img-7| image:: img-7.jpeg .. :align: bottom .. :border: 0 .. :height: 334 .. :id: graphics14 .. :name: graphics14 .. :width: 378 .. |img-8| image:: img-8.jpeg .. :align: left .. :border: 0 .. :height: 161 .. :id: graphics81 .. :name: graphics81 .. :width: 302