.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt .. role:: underline =========== MULTICOLUMN =========== :Author: Michael Birchler :Created: 2010-07-01T09:29:38 :Changed by: Christoph Buchli :Changed: 2012-03-15T16:04:55.890000000 :Email: typo3@snowflake.ch :Info 2: :Info 3: :Info 4: .. _MULTICOLUMN: MULTICOLUMN =========== Extension Key: **multicolumn** Copyright 2011,snowflake productions gmbh, , Sponsoring,Visual FX – `http://www.visual-fx.ch/ `_ 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.com .. _Table-of-Contents: Table of Contents ----------------- **multicolumn 1** **Introduction 3** What does it do? 3 Requirements 3 Features – a huge bunch of compelling features 3 Support 3 Compatibility 3 Screenshots 4 **Installation 8** **Configuration 9** Advanced layouts 10 Customize HTML markup 10 Automatic image shrink to column size 10 **Known problems 11** **Changelog 12** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ The Multicolumn extension expands TYPO3 with a new content element called Multicolumn. The goal of the Multicolumn content element is to display content in multiple columns. It offers new properties for content managers to specify in how many columns the content should appear in the frontend. With the Multicolumn content element it has never been easier to do multicolumn layouts with TYPO3. .. _Requirements: Requirements ^^^^^^^^^^^^ The Multicolumn extension requires TYPO3 4.3 or above. The Multicolumn extension works only with the classic page module. .. _Features-a-huge-bunch-of-compelling-features: Features – a huge bunch of compelling features ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - Extends TYPO3 with powerful multicolumn abilities - Easy integration – install and add static TypoScript and you’re ready to go! - Define preset layouts by Page TSconfig or set up a custom layout within the Multicolumn content element - Fully customizable HTML markup with TypoScript - Possibility to add a custom CSS-class to each container for unique identification - Auto shrink of images to multicolumn column width - Possibility to force all elements to an equal height - Add effects to the elements - Suitable for grid layouts .. _Support: Support ^^^^^^^ Please refer to this website :underline:``http://blog.snowflake.ch `_` and look for the corresponding entries and comments. On this blog you have the possibility to send us your comments and feedback, thank us, or just to read what is planned in next releases. But it is not the right place to get support! Please send all your questions to the "English" TYPO3 mailing list. Many very experienced TYPO3 users will help you with installation, debugging or customization. And in case of bugs please refer to the Multicolumn site at TYPO3 Forge which can be found at `http://forge.typo3.org/projects/extension-multicolumn/issues/ `_ . Please do not send support requests to the authors of this extension. Except if you prefer to receive (commercial) support, feel free to get in touch with snowflake productions gmbh, Dominic Brander, :underline:``dbrander@snowflake.ch `_` . Thanks for sticking to the rules! .. _Compatibility: Compatibility ^^^^^^^^^^^^^ The Multicolumn extension works only with TYPO3 4.3 (or above) and the classic page module. Templavoila is not supported. If you want to add Templavoila support for the Multicolumn extension please contact us. .. _Screenshots: Screenshots ^^^^^^^^^^^ .. _Content-element-wizard-showing-the-new-multicolumn-container: Content element wizard showing the new multicolumn container """""""""""""""""""""""""""""""""""""""""""""""""""""""""""" |img-1| .. _Selecting-a-preset-layout: Selecting a preset layout """"""""""""""""""""""""" |img-2| .. _TYPO3-backend-showing-a-3-column-preset-layout: TYPO3 backend showing a 3-column-preset layout """""""""""""""""""""""""""""""""""""""""""""" |img-3| .. _Example-of-a-frontend-view-using-a-3-column-preset-layout: Example of a frontend view using a 3-column-preset layout """"""""""""""""""""""""""""""""""""""""""""""""""""""""" |img-4| *Yeah! The images are automatically scaled to the column width. Please note: The boarders comes from the included layout CSS.* .. _Settings-for-advanced-layouts: Settings for advanced layouts """"""""""""""""""""""""""""" |img-5| *This is really cool! Configure layouts within the content element. This example shows the configuration for the page footer.* .. _Advanced-layout-frontend-view: Advanced layout frontend view """"""""""""""""""""""""""""" |img-6| *Five column custom layout frontend view.* .. _Nested-multicolumn-containers: Nested multicolumn containers """"""""""""""""""""""""""""" |img-7| *It's also possible to create a multicolumn container inside a multicolumn containers. Also the context-menu gets automatically expanded with the multicolumn columns.* .. _Installation: Installation ------------ Install the extension "multicolumn" by using the extension manager. The extension will extend the tt\_content table with one field and make a quick compatibility test. As soon as the system has installed the extension, TYPO3 has a new content element called Multicolumn. For the frontend view you must include the static Multicolumn TypoScript template. |img-8| Now continue with the chapter “Configuration” to learn how to customize your newly installed Multicolumn extension. Have fun! .. _Configuration: Configuration ------------- .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Preconfigured-layouts: Preconfigured layouts """"""""""""""""""""" By default 4 preset layouts are preconfigured by Page TSconfig. - Two columns layout - Three columns layout - Four columns layout - Two columns (75% \| 25%) layout .. _Define-a-new-preset-layout: Define a new preset layout """""""""""""""""""""""""" Go to page properties and expand the TSconfig field with your custom preset layout. Here is an example for a six column layout: :: tx_multicolumn.layoutPreset { # Define a unique key for the layout sixColumnLayout { # Backend label (path to a locallang file) label = LLL:EXT:multicolumn/res/layout/locallang.xml:layout.1 # Icon (file resource or a path to fileadmin) icon = EXT:multicolumn/res/layout/1.gif config { # CSS file(file resource or a path to fileadmin) layoutCss = EXT:multicolumn/res/layout/1.css # Width of multicolumn container (px or %) containerMeasure = px # Width of multicolumn container measure(integer, 100) containerWidth = 300 # Container CSS-Class to add containerClass = sixColumnContainer # Number of columns(integer) columns = 6 # Column measure (px or %) columnMeasure = 6 # Column width (integer, optionSplit) columnWidth = 200 |*| 100 |*| 200 # Column margin (string, optionSplit) columnMargin = 0 10px 0 0|*| 0 10px |*| 0 0 0 10px # Column padding (string, optionSplit) columnPadding = 0 5px 0 0|*| 0 5px |*| 0 0 0 5px # Disable auto image shrink for columns (boolean, 0) disableImageShrink = 0 } } } .. _Delete-preconfigured-preset-layouts: Delete preconfigured preset layouts """"""""""""""""""""""""""""""""""" If you want to delete preconfigured preset layouts, go to page properties and expand the TSconfig field with: :: tx_multicolumn.layoutPreset > Keep in mind if you clear all preset layouts the effect box is also gone. .. _Default-TSconfig-location: Default TSconfig location """"""""""""""""""""""""" The default TSconfig location is here: “EXT:multicolumn/tsconfig.txt” and it's included automatically by the extension. .. _Advanced-layouts: Advanced layouts ^^^^^^^^^^^^^^^^ By default the max number of columns for advanced layouts is 10. You can set this value by TSconfig. :: tx_multicolumn { config { advancedLayouts { maxNumberOfColumns = 10 } } } .. _Customize-HTML-markup: Customize HTML markup ^^^^^^^^^^^^^^^^^^^^^ If you want to customize the HTML markup, please have a look at the default TypoScript setup from the Multicolumn extension and you will get the idea how the rendering in the frontend works. You will find the default TyposScript definition here: “EXT:multicolumn/pi1/static/setup.txt”. Paste your customized TypoScript setup into the template record of your site. .. _Automatic-image-shrink-to-column-size: Automatic image shrink to column size ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ To get the most out of the automatic image shrink feature, you should configure the base width constant of the default TYPO3 columns. Following constants are available: - $styles.content.imgtext.colPos1.maxW (left column) - $styles.content.imgtext.colPos2.maxW (main column) - $styles.content.imgtext.colPos3.maxW (left column) If you have more than three base columns you can expand the “columnWidth” TypoScript object with your base column. It's also possible to do your own base column width calculation. Just use the “columnWidth” TypoScript object. .. _Effectbox: Effectbox """"""""" |img-9| Multicolumn version 2.1 introduces a powerful new feature called effect box. By default two effects are preconfigured: :: tx_multicolumn { effectBox { sudoSliderTabSliding { label = LLL:EXT:multicolumn/res/effects/locallang.xml:effectBox.effect.slidingTab config { effectBoxClass = sudoSlider jsFiles { jQuery = EXT:multicolumn/res/javascript/jQuery.js jQuery { priority = 1 } sudoSliderJs = EXT:multicolumn/res/effects/sudoSlider/jquery.sudoSlider.min.js sudoSliderEffectbox = EXT:multicolumn/res/effects/sudoSlider/sudoSliderEffectbox.js } cssFiles { sudoSlider = EXT:multicolumn/res/effects/sudoSlider/style.css } defaultOptions ( numeric: true ,fade: false ,controlsAttr: 'class="sudoControls"' ,prevNext : false ,convertHeadingToNavigation : true ,insertAfter : false ) } } sudoSliderTabFade { label = LLL:EXT:multicolumn/res/effects/locallang.xml:effectBox.effect.fadingTab config { effectBoxClass = sudoSlider jsFiles { jQuery = EXT:multicolumn/res/javascript/jQuery.js jQuery { priority = 1 } sudoSliderJs = EXT:multicolumn/res/effects/sudoSlider/jquery.sudoSlider.min.js sudoSliderEffectbox = EXT:multicolumn/res/effects/sudoSlider/sudoSliderEffectbox.js } cssFiles { sudoSlider = EXT:multicolumn/res/effects/sudoSlider/style.css } defaultOptions ( numeric: true ,fade: true ,controlsAttr: 'class="sudoControls"' ,prevNext : false ,convertHeadingToNavigation : true ,insertAfter : false ) } } } } .. _Known-problems: Known problems -------------- The Multicolumn extension is incompatible with dam\_ttcontent 1.1 if“add\_page\_mod\_xclass” isenabled. The installer warns you about this issue. Please refer to:underline:``http://bugs.typo3.org/view.php?id=13641 `_` for more information. .. _Changelog: Changelog --------- See EXT:multicolumn/ChangeLog |img-10| MULTICOLUMN - 13 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: bottom .. :border: 0 .. :height: 232 .. :id: graphics1 .. :name: graphics1 .. :width: 662 .. |img-2| image:: img-2.png .. :align: bottom .. :border: 0 .. :height: 209 .. :id: graphics2 .. :name: graphics2 .. :width: 669 .. |img-3| image:: img-3.png .. :align: bottom .. :border: 0 .. :height: 553 .. :id: graphics3 .. :name: graphics3 .. :width: 451 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 305 .. :id: graphics4 .. :name: graphics4 .. :width: 668 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 737 .. :id: Grafik3 .. :name: Grafik3 .. :width: 636 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 115 .. :id: Grafik1 .. :name: Grafik1 .. :width: 669 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 647 .. :id: Grafik5 .. :name: Grafik5 .. :width: 669 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 163 .. :id: Grafik2 .. :name: Grafik2 .. :width: 669 .. |img-9| image:: img-9.jpeg .. :align: left .. :border: 0 .. :height: 217 .. :id: Grafik4 .. :name: Grafik4 .. :width: 669 .. |img-10| image:: img-10.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102