DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

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

Extension Key: multicolumn

Copyright 2011,snowflake productions gmbh, <typo3@snowflake.ch>,

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

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

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

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

  • 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

Please refer to this website :underline:``http://blog.snowflake.ch <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 <mailto:dbrander@snowflake.ch>`_` .

Thanks for sticking to the rules!

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

Content element wizard showing the new multicolumn container

img-1

Selecting a preset layout

img-2

TYPO3 backend showing a 3-column-preset layout

img-3

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

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

img-6 Five column custom layout frontend view.

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

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

((generated))

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

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

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

The default TSconfig location is here: “EXT:multicolumn/tsconfig.txt” and it's included automatically by the extension.

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

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

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

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

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 <http://bugs.typo3.org/view.php?id=13641>`_` for more information.

Changelog

See EXT:multicolumn/ChangeLog

img-10 MULTICOLUMN - 13