.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============================ Browser Tutorial Images (en) ============================ :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: dirk :Changed: 2015-04-10T23:52:01 :Classification: browser_tut_images_en :Description: Manage images with and without the FAL (File Abstraction Layer). Tutorial for the Browser – TYPO3 without PHP. :Keywords: browser, typo3 without php, images, fal :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 Images (en) (extkey: browser\_tut\_images\_en) |img-3| .. _Browser-Tutorial-Images-en: Browser Tutorial Images (en) ============================ **Browser – TYPO3 without PHP** Manage images with and without the FAL (File Abstraction Layer). Tutorial for the Browser – TYPO3 without PHP. |img-4| Version: 7.0.8, 2015-04-10 Extension Key: browser\_tut\_images\_en Language: en Keywords: browser, typo3 without php, images, fal 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 Images (en) 1 <#__RefHeading__24238_633547889>`_ `Screenshots 3 <#__RefHeading__1513_1172745218>`_ `Introduction 4 <#__RefHeading__2752_685150332>`_ `What does it do? 4 <#__RefHeading__1169_1172745218>`_ `Further Information 4 <#__RefHeading__61859_1423540087>`_ `Examples 5 <#__RefHeading__73001_1423540087>`_ `Above center 5 <#__RefHeading__2754_685150332>`_ `Beside right 5 <#__RefHeading__2756_685150332>`_ `Below left 6 <#__RefHeading__2758_685150332>`_ `Lightbox 6 <#__RefHeading__2760_685150332>`_ `Link types 7 <#__RefHeading__3307_685150332>`_ `Without Foundation CSS 7 <#__RefHeading__3309_685150332>`_ `FAL 8 <#__RefHeading__2762_685150332>`_ `Without FAL 8 <#__RefHeading__72997_1423540087>`_ `With FAL 10 <#__RefHeading__72999_1423540087>`_ `Constant Editor 12 <#__RefHeading__73003_1423540087>`_ `BROWSER - TEMPLATES - LIST - IMAGE 0 12 <#__RefHeading__72791_1423540087>`_ `BROWSER - TEMPLATES - LIST - IMAGE [1-5] 12 <#__RefHeading__73005_1423540087>`_ `BROWSER - TEMPLATES - LIST - URL 0 13 <#__RefHeading__72993_1423540087>`_ `BROWSER - TEMPLATES - LIST - URL [1-5] 13 <#__RefHeading__73007_1423540087>`_ `BROWSER - TEMPLATES - SINGLE - IMAGE 0 14 <#__RefHeading__3555_685150332>`_ `BROWSER - TEMPLATES - SINGLE - IMAGE 1 14 <#__RefHeading__73005_14235400871>`_ `Update 15 <#__RefHeading__73009_1423540087>`_ `From < 6.x/7.0 15 <#__RefHeading__73011_1423540087>`_ `Helpful suggestions 16 <#__RefHeading__61869_1423540087>`_ `Change Log 17 <#__RefHeading__3727_2139160512>`_ `Illustration Index 18 <#__RefHeading__7879_1359502716>`_ `Alphabetical Index 19 <#__RefHeading__14691_1458450892>`_ .. _Screenshots: Screenshots ----------- See at the section "Examples" on page 5 below. .. _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 manage images with or without the FAL (File Abstraction Layer). .. _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\_images\_en/doc/ma nual.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 `_ .. _Examples: Examples -------- The illustration below 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 `_ .. _Above-center: Above center ^^^^^^^^^^^^ |img-5| |img-5| .. _Beside-right: Beside right ^^^^^^^^^^^^ |img-5| |img-5| .. _Below-left: Below left ^^^^^^^^^^ |img-5| |img-5| .. _Lightbox: Lightbox ^^^^^^^^ |img-5| |img-5| .. _Link-types: Link types ^^^^^^^^^^ |img-5| The Browser – TYPO3 without PHP – takes care of link types. 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 – will set a link depending on the link type. .. _TypoScript-snippet: TypoScript snippet """""""""""""""""" image < plugin.tx\_browser\_pi1.displayList.master\_templates.tableFie lds.image.0 The Browser – TYPO3 without PHP – has applicabled six templates: from image.0 to image.5 See details below. .. _Without-Foundation-CSS: Without Foundation CSS ^^^^^^^^^^^^^^^^^^^^^^ If you don't like to use the Foundation framework and no Foundation CSS, you should add the TypoScript snippet from below to your installation. You get rid of the circle in front of an image with this snippet. page.cssInline { 10 = TEXT 10 { value ( ul.clearing-thumbs { list-style-type: none; margin: 0; padding:0; } figure.tx-browser-pi1-figure { margin:0; } ) } } .. _Templating-in-principle: Templating in principle ----------------------- If you are deal with images, you like to deal with headers and texts too. You find details at - HTML: `http://typo3.org/extensions/repository/view/browser\_tut\_templ ating\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_tut\_templating\_ en/doc/manual.pdf `_ .. _FAL: FAL --- There are to possibilities for managing images in the backend: - Without the FAL (File Abstraction Layer) - With the FAL The managing of images in the backend is independent of the Browser – TYPO3 without PHP. .. _Without-FAL: Without FAL ^^^^^^^^^^^ Extensions usually manage images without the FAL, which were developed for TYPO3 4.x. If images are managed without the FAL, the Browser – TYPO3 without PHP – has some templates for managing images for the frontend. .. _Features: Features """""""" - You can manage the output by the TypoScript Constant Editor. - Image code should be responsive. - The Browser – TYPO3 without PHP – can manage the type of links. These types are - record: link to the single view - page: link to an internal page - url: link to an external url - notype: no link, record is dispplayed in list views only. - The Browser – TYPO3 without PHP – is compatible with tt\_news and respects these values too: - 1: link to an internal page - 2: link to an external url .. _Sample-with-tt-news: Sample with tt\_news """""""""""""""""""" The code below is based on a sample with tt\_news. The sample has a tutorial. 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 `_ .. _Adapt-it-to-your-needs: Adapt it to your needs """""""""""""""""""""" Please adapt the code from below to your needs. Replace the labels for the table and the fields with the lables of your database of your extension. .. _Code-snippet: Code snippet """""""""""" .. _Constants: Constants ~~~~~~~~~ plugin.tx\_browser\_pi1 { navigation { showUid = newsUid } templates { listview { header { 0 { crop = 40\|...\|1 field = tt\_news.title tag = div } } image { 0 { #default = file = tt\_news.image height = 40c path = uploads/pics/ seo = tt\_news.imagealttext // tt\_news.imagetitletext width = 40 } } text { 0 { crop = 56\|...\|1 field = tt\_news.short } } url { 0 { key = tt\_news.type page = tt\_news.page record = tt\_news.uid showUid = newsUid #singlePid = url = tt\_news.ext\_url } } } singleview { image { 0 { caption = tt\_news.imagecaption file = tt\_news.image height = heightDefault = imagecols = imageorient = path = uploads/pics/ seo = tt\_news.imagealttext // tt\_news.imagetitletext width = widthDefault = 300 } } } } } .. _Setup: Setup ~~~~~ plugin.tx\_browser\_pi1 { views { list { 1000 { tt\_news { ... image < plugin.tx\_browser\_pi1.displayList.master\_templates.tableFie lds.image.0 title < plugin.tx\_browser\_pi1.displayList.master\_templates.tableFie lds.header.0 } } } } } .. _With-FAL: With FAL ^^^^^^^^ If images are managed with the FAL, the Browser – TYPO3 without PHP – hasn't any template currently, but an example. See: Tutorial with tt\_content - HTML: `http://typo3.org/extensions/repository/view/browser\_manual\_en/ `_ - PDF: `http://typo3-browser.de/typo3conf/ext/browser\_manual\_en/doc/ma nual.pdf `_ .. _Adapt-it-to-your-needs: Adapt it to your needs """""""""""""""""""""" Please adapt the code from below to your needs. Replace the labels for the table and the fields with the lables of your database of your extension. .. _Code-snippet: Code snippet """""""""""" .. _Constants: Constants ~~~~~~~~~ plugin.tx\_browser\_pi1 { navigation { showUid = contentUid } templates { listview { image { 0 { default = file = tt\_content.image height = 80 path = seo = tt\_content.header width = 80c } } url { 0 { key = page = record = tt\_content.uid showUid = contentUid #singlePid = url = } } } singleview { image { 0 { caption = file = tt\_content.image height = tt\_content.imageheight imagecols = imageorient = path = seo = tt\_content.header width = tt\_content.imagewidth } } } } } .. _Setup: Setup ~~~~~ plugin.tx\_browser\_pi1 { views { list { 43746 { tt\_content { image = FILES image { references { table = tt\_content uid { field = tt\_content.uid } fieldName = image } begin = 0 maxItems = 1 renderObj < plugin.tx\_browser\_pi1.displayList.master\_templates.tabl eFields.image.0.default renderObj { file { import { data = file:current:uid stdWrap > } treatIdAsReference = 1 } } } } } } } } .. _Constant-Editor: Constant Editor --------------- .. _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 13 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 14 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 15 above. .. _Update: Update ------ .. _From-6-x-7-0: From < 6.x/7.0 ^^^^^^^^^^^^^^ The Browser – TYPO3 without PHP – has lost the capability, to detect images automatically. If you haven't configured your image in the TypoScript for the Browser, you have to configure it now. See the samples - "Without FAL" on page 9 above and - "With FAL" on page 11 above .. _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.8 **Update** #i0002: New section: Examples. 7.0.7 **Update** #i0001: Browser 6.x/7.x, TYPO3 6.x 3.6.1 svn revision 43034 **New Features** - 12756: Images got full tt\_content support 3.6.0 **New Features** - #11211: Wrap for image and image caption with the image number- #11204: If a record hasn't any image, a alternate image will be displayed by default 3.0.3: **Improvement** Extending the tutorial with an example with jQuery FancyBox (jq\_fancybox) 3.0.1: **Initial release** .. _Illustration-Index: Illustration Index ------------------ Illustration 1: Images above the text and centered 5 Illustration 2: Configuration in the backend 5 Illustration 3: Images beside right of the text 5 Illustration 4: Configuration in the backend 5 Illustration 5: Images below the text on the left 6 Illustration 6: Configuration in the backend 6 Illustration 7: Responsive lightbox 6 Illustration 8: Configuration in the backend 6 Illustration 9: Link types 7 .. _Alphabetical-Index: Alphabetical Index ------------------ 20 .. ######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: Frame1 .. :align: bottom .. :id: Frame1 .. :name: Frame1