EXT: Multiple Content¶

What does it do?¶

With this extension you're able to show multiple content elements in one content.

There are seven possibility's:

Multiple contents, like the sub columns in yaml

Tabulator

Accordion

Sider

SlideDeck

easyAccordion

Booklet

Screenshots¶

Multiple Columns¶

If you choose “2 columns” you have to select the “Column class 1” and the “Column class 2”. The sum of these values should be 100%. This applies to 3 and 4 columns also.

For 3 columns the following combinations are possible:

33 | 33 | 33
25 | 25 | 50
25 | 50 | 25
20 | 20 | 60

and so on...

This will generate, in normal configuration, classes to the content like in YAML:

class=”c33l” | class=”c33l” | class=”c33r”

The class name can be defined in constant editor by the integrator and will be wrapped with the number you choose.

Attributes¶

You can define additional attributes to the contents. Go to the “Attributes”-tab and write one attribute per line.

It's possible to define multiple attributes per line:

style=”width: 20em;” class=”myclass”

Overwrite Title¶

For “Tabs”, “Accordion”, “Slider”, “SlideDeck“, “easyAccordion”, “booklet”-style you can overwrite the titles by defining theme in “Overwrite titles”.

This example would produce an output like this:

The second tab shows the title of the content, because only filled lines will be taken to overwrite the title of the content.

Options¶

Here you can define your own Javascript options.

Be aware, that you have to know what you are doing!

See the following pages for possible options:

For “Tab”-style: http://jqueryui.com/demos/tabs/

For “Accordion”-style: http://jqueryui.com/demos/accordion/

For “Slider”-style: http://css-tricks.com/anythingslider-jquery- plugin/

For “SlideDeck”-style: http://www.slidedeck.com/usage- documentation/usage_available_options/

For “easyAccordion”: http://www.madeincima.eu/blog/jquery-plugin- easy-accordion/

For “booklet”: http://builtbywill.com/code/booklet/options

If you select the “override all options”, all defines options in the “General”-tab will be overridden by your options, elsewhere it will be appended to the other options defined in “General”-tab.

Tab¶

After you select “Tab”-style, the system ask you to reload the content.

After reload you can change the following options:

• “Collapsible”: You can “close” all tabs, if you click the active tab again
• “Opened content”: Defines the content witch is opened at startup. If define “0” no tab is active (closed at startup)
• “Open random content”: Check if you like to show the content randomly
• “Event”: Defines the event on witch the accordion will be opened (click or mouseover)
• “Height Style”: Defines how the contents height will be rendered (auto, fill or content)
• “Cookie expiration”: Defines the days to Keep the cookie
• “Set cookie path to root”: Set the domain for the cookie to “/”
• “Hide Effect”: Defines the effect to use for hide (none, fade, slide)
• “Hide Transition”: Configure your own animation (3 options: type, direction, duration)
• “Show Effect”: Defines the effect to use for show (none, fade, slide)
• “Show Transition”: Configure your own animation (3 options: type, direction, duration)

Accordion¶

After you select “Accordion”-style, the system ask you to reload the content.

After reload you can change the following options:

• “Collapsible”: If set, accordion will be collapsible
• “Closed at startup”: The accordion will be closed by default
• “Opened content”: Defines the content witch is opened at startup (will not work, if “Closed at startup” is active)
• “Open random content”: Check if you like to show the content randomly
• “Event”: Defines the event on witch the accordion will be opened (click or mouseover)
• “Height Style”: Defines how the contents height will be rendered (auto, fill or content)
• “Animation”: Activate the animation, settings can be done in “Transition”
• “Transition”: Configure your own animation (3 options: type, direction, duration)

Slider¶

After you select “Slider”-style, the system ask you to reload the content.

After reload you can change the following options:

• “Width”: Defines the width of the slider
• “Height”: Defines the height of the slider
• “Resize contents”: If true, solitary images/objects in the panel will expand to fit the viewport
• “Theme”: Used theme for slider
• “Opened content”: Defines the content witch is opened at startup
• “Open random content”: Check if you like to show the content randomly
• “Change URL (hash tag)”: If set, the URL will change if you choose a panel
• “Build Arrows”: If true, builds the forwards and backwards buttons
• “Toggle Arrows”: If true, side navigation arrows will slide out on hovering & hide at other times
• “Show navigation”: If set, the panels will be displayed
• “Paneltext from title”: Override the paneltext with the title from content
• “Toggle Controls”: If true, slide in controls (navigation + play/stop button) on hover and slide change, hide at other times
• “Start autoplay”: If set, the autoplay button will be on
• “Pause on mouseover”: If set, the autoplay will pause when mouse over
• “Resume on video end”: If true & the slideshow is active & a youtube video is playing, it will pause the autoplay until the video is complete
• “Stop at end”: If true & the slideshow is active, the slideshow will stop on the last page
• “Play rtl”: If true, the slideshow will move right-to-left
• “Transition”: Configure your own animation (3 options: type, direction, duration)
• “Delay for autoplay (in ms)”: Delay in milliseconds before the the next content is shown

SlideDeck¶

After you select “SlideDeck”-style, the system ask you to reload the content.

After reload you can change the following options:

• “Height in px”: Sets the height of the SlideDeck
• “Transition”: Configure your own animation (3 options: type, direction, duration)
• “Opened content“: Defines the content witch is opened at startup
• “Add indicator for overlapping“: If set, there will be a overlaped indicator for active slide
• “Active slide indexes“: If set, every slide gets a number
• “Activate mousewheel“: If set, the slides can be moved with the mousewheel
• “Activate activation keys“: If set, every slide can be activated by a shortcut
• “Hide spine“: If set, the spines will not be displayed
• “Delay for autoplay (in ms)”: Delay in milliseconds before the the next content is shown
• “Cycle”: If set, the autoplay will start over after last slide

easyAccordion¶

After you select “easyAccordion”-style, the system ask you to reload the content.

After reload you can change the following options:

• “Skin”: Defines the used skin for this accordion
• “Opened content”: Defines the content witch is opened at startup
• “Width”: Sets the width of the accordion (the height is defined in css!)
• “Show numbers”: If set, the slide numbers will be displayed
• “Delay for autoplay (in ms)”: Delay in milliseconds before the the next content is shown

Booklet¶

After you select “booklet”-style, the system ask you to reload the content.

After reload you can change the following options:

• “Width”: Container width
• “Height”: Container height
• “Speed (in ms)”: Speed of the transition between pages
• “Starting page”: Index of the first page to be displayed
• “Direction right to left”: If set, the direction of the overall content organization will be right to left
• “Type of transition”: Type of transition ('swing', 'linear', 'Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Bounce' or 'Elastic')
• “Direction of transition”: Direction of transition ('In', 'Out' or 'InOut')
• “Page padding”: Padding for each page wrapper
• “Show page numbers”: Display page numbers on each page
• “Manual page turning”: Enables manual page turning, requires jQuery UI to function
• “Show shadows”: Display shadows on page animations
• “Booklet closed”: Start with the book "closed", will add empty pages to beginning and end of book
• “Show covers”: Used with "closed", makes first and last pages into covers, without page numbers (if enabled)
• “Center closed booklet”: Used with “closed”, makes book position in centre of container when closed
• “Use hash”: Enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
• “Use keyboard”: Enables navigation with arrow keys (left: previous, right: next)
• “Autoplay”: Enables automatic navigation, requires “Delay for autoplay”
• “Delay for autoplay”: Amount of time between automatic page flipping
• “Activate overlay”: Enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
• “Show arrows”: Adds arrows overlayed over the book edges
• “Hide arrows if mouseout”: Auto hides arrows when controls are not hovered
• “Hover effect”: Enables preview pageturn hover animation, shows a small preview of previous or next page on hover

Typoscript¶

After you select “typoscript”-style, the system ask you to reload the content.

All settings in the general-tab will be taken from typoscript, you cant change any settings in FlexForm

useStoragePidOnly¶

ttNewsCodes¶

frontendErrorMsg¶

useSelectInsteadCheckbox¶

useOwnUserFuncForPages¶

openExternalLink¶

showEmptyContent¶

addBrowseLinks¶

tabSelectByHash¶

colPosOfIrreContent¶

style.2column¶

style.3column¶

style.4column¶

style.5column¶

style.tab¶

style.accordion¶

style.slider¶

style.slidedeck¶

style.easyaccordion¶

style.booklet¶

style.typoscript¶

classInner¶

anythingSliderThemeFolder¶

easyAccordionSkinFolder¶

anythingSliderModes¶

Page configuration¶

Your able to configure the available styles by pageTS.

mod.jfmulticontent {
  availableStyles = 2column,3column,tab
  classInner = 16,33,50
  anythingSliderModes = horizontal,vertical
}

In this case in the backend are only these three styles available:

Updater¶

If you update from prior versions, you should go to the updater of this plugin to prevent problems.

After installing the extension, choose “UPDATE!” from the dropdown or use the link in the updater message box.

You will get a list of jobs to be done.

Please read the warning carefully!

To do the update of a job, you have to click the “DO IT” button.

Reference¶

plugin.tx_jfmulticontent_pi1

.equalize{
  overflow: visible;
  display: table;
  table-layout: fixed;
}

plugin.tx_jfmulticontent_pi1.columnWrap {
  wrap = <div class="subcl">|</div> |*| <div class="subcl">|</div> |*| <div class="subcr">|</div>
}

plugin.tx_jfmulticontent_pi1 {
  tabKey = TEXT
  tabKey {
    value = {register:key}-{register:id}
    insertData = 1
  }
}

plugin.tx_jfmulticontent_pi1 {
  additionalMarkers = contentmarker
  additionalContentMarkers = itemmarker
}

plugin.tx_jfmulticontent_pi1 {
  additionalMarkerConf {
    contentmarker = TEXT
    contentmarker {
      field = header
      fieldRequired = header
      if.equals.field = header_layout
      if.value = 100
      if.negate = 1
      wrap = <span> | </span>
    }
    itemmarker = RECORDS
    itemmarker {
      source.data = register:content_id
      tables = tt_content
      dontCheckPid = 1
      conf.tt_content = TEXT
      conf.tt_content {
        field = header
        wrap = <p>Header: |</p>
      }
    }
  }
}

FAQ¶

plugin.tx_jfmulticontent_pi1._LOCAL_LANG.en {
  default_quote_title_template = Welcome to “###TITLE###” on ###ID###
  tab_quote_title_template = Welcome to “###TITLE###” on tab ###ID###
  accordion_quote_title_template = Welcome to “###TITLE###” on accordion ###ID###
}

includeLibs.jfmulticontent = EXT:jfmulticontent/class.tx_jfmulticontent.php
plugin.tx_jfmulticontent_pi1 {
  views.page >
  views {
    page {
      content = COA
      content {
      10 = USER
        10 {
          userFunc = tx_jfmulticontent->getContentFromTemplavoilaField
          field = field_feature
          pageID.data = register:pid
          contentRender = RECORDS
          contentRender {
            tables = tt_content
            source.data = register:uid
            dontCheckPid = 1
          }
        }
        20 < .10
        20 {
          field = field_content_block_1
        }
      }
      title = TEXT
      title.data = register:page_title
    }
  }
}

plugin.tx_jfmulticontent_pi1 {
  tabKey = TEXT
  tabKey {
    data = register:title
    stdWrap {
      case = lower
      split {
        token.char = 32
        cObjNum = 1
        1.current = 1
        1.wrap = |_
      }
      substring = 0,-1
      wrap = |
    }
  }
}

plugin.tx_jfmulticontent_pi1.views.content.content.conf.tt_content < tt_content
plugin.tx_jfmulticontent_pi1.views.content.content.conf.tt_content {
  header.10 >
  text.10 >
  image.10 >
  textpic.10 >
  bullets.10 >
  table.10 >
  uploads.10 >
  multimedia.10 >
  swfobject.10 >
  qtobject.10 >
  media.10 >
  mailform.10 >
  search.10 >
  menu.10 >
  list.10 >
}

Additional tt_news codes¶

To add the tt_news codes, its very important, that you copy the templatecode from EXT:jfmulticontent/pi1/tt_news.tmpl into your tt_news template. You can change the three new template sections as you do normally in tt_news (Marker and subsets).

Enable the feature „Activate tt_news codes“ in the configuration of this extension.

After the configuration is done, you are able to choose three new codes in the backend.

I'd like to translate these items, but there is a small bug in tt_news ( http://bugs.typo3.org/view.php?id=14417 ) so it is called „LIST_ACCORDION”, „LIST_SLIDER”, „LIST_SLIDEDECK” and “LIST_EASYACCORDION”, perhaps in a later version of tt_news it will be possible to translate...

0.0.1¶

0.1.0¶

0.2.0¶

0.3.0¶

0.3.1¶

0.3.2¶

0.4.0¶

0.4.1¶

0.4.2¶

0.4.3¶

0.4.4¶

0.4.5¶

0.4.6¶

0.5.0¶

0.5.1¶

0.5.2¶

0.5.3¶

0.6.0¶

0.6.1¶

0.6.2¶

0.6.3¶

0.6.4¶

0.6.5¶

0.6.6¶

0.6.7¶

0.6.8¶

0.7.0¶

0.7.1¶

0.7.2¶

0.8.0¶

0.8.1¶

1.0.0¶

1.0.1¶

1.1.0¶

1.2.0¶

1.3.0¶

1.4.0¶

1.4.1¶

1.4.2¶

1.4.3¶

1.5.0¶

1.5.1¶

1.6.0¶

1.6.1¶

1.6.2¶

1.6.3¶

1.7.0¶

1.8.0¶

1.8.1¶

1.8.2¶

1.8.3¶

1.8.4¶

1.8.5¶

1.9.0¶

1.9.1¶

1.9.2¶

1.9.3¶

1.9.4¶

1.9.5¶

1.10.0¶

1.10.1¶

1.10.2¶

1.11.0¶

1.12.0¶

1.12.1¶

1.12.2¶

1.12.3¶

2.0.0¶

2.1.0¶

2.1.1¶

2.1.2¶

2.1.3¶

2.2.0¶

2.2.1¶

2.2.2¶

2.3.0¶

2.3.1¶

2.4.0¶

2.4.1¶

2.5.0¶

2.5.1¶

2.5.2¶

2.5.3¶

2.5.4¶

2.5.5¶

2.5.6¶

2.5.7¶

2.5.8¶

2.5.9¶

2.6.0¶

2.6.1¶

2.6.2¶

2.6.3¶

2.6.4¶

2.6.5¶

2.7.0¶

2.7.1¶

2.7.2¶

2.7.3¶

2.7.4¶

2.8.0¶

2.8.1¶

2.8.2¶

2.8.3¶

2.8.4¶

2.8.5¶

2.8.6¶

2.8.7¶

2.9.0¶

2.9.1¶

2.9.2¶

2.9.3¶

2.9.4¶

2.9.5¶

2.9.6¶

2.9.7¶

2.9.8¶

2.9.9¶

35