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 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, 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

Selecting a preset layout

TYPO3 backend showing a 3-column-preset layout

Example of a frontend view using a 3-column-preset layout

Yeah! The images are automatically scaled to the column width. Please note: The boarders comes from the included layout CSS.

Settings for advanced layouts

This is really cool! Configure layouts within the content element. This example shows the configuration for the page footer.

Advanced layout frontend view

Five column custom layout frontend view.

Nested multicolumn containers

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.

Now continue with the chapter “Configuration” to learn how to customize your newly installed Multicolumn extension. Have fun!

Configuration

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

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” is enabled. The installer warns you about this issue. Please refer to http://bugs.typo3.org/view.php?id=13641 for more information.

Changelog

See EXT:multicolumn/ChangeLog

MULTICOLUMN - 13

MULTICOLUMN

Michael Birchler

2010-07-01T09:29:38

Christoph Buchli