EXT: FlexSlider

It simply brings WooThemes awesome fully responsive jQuery Slider Plugin to TYPO3 – as a Frontend Plugin, of course.

Installation

Via Git

Clone into typo3conf/ext/

git clone [email protected]:sotastudio/typo3.extbase.flexslider.git /path/to/project/typo3conf/ext/flexslider/

Install via Extension Manager as usual.

Via TER

Jump to TER

Configuration

• Include static Extension Template
• Create Frontend plugin
  • Adjust the Plugin Settings to your needs
  • Setup Record Storage Page where the Slider Items come from
• Create Slider Items on the Record Storage Page
• Check the Frontend!

TypoScript Constants

plugin.tx_flexslider {
	view {
		# Necessary options, if you plan to manipulate the templates
		templateRootPath = EXT:flexslider/Resources/Private/Templates/
		partialRootPath = EXT:flexslider/Resources/Private/Partials/
		layoutRootPath = EXT:flexslider/Resources/Private/Layouts/
	}
	persistence {
		# Here you can set up the Record Storage Page globally
		storagePid =
	}
	settings {
		# String: File reference to the FlexSlider's Css file - empty this value if you want to include this at your own
		css = EXT:flexslider/Resources/Public/Css/flexslider.css
		lib {
			# String: File reference to alternative jQuery library if EXT t3jquery is not in use
			jQuery = EXT:flexslider/Resources/Public/Js/jquery-min.js
			# String: File reference to flexslider library
			flexslider = EXT:flexslider/Resources/Public/Js/jquery.flexslider-min.js
			# Bool: Flag to define whether the script shoul be moved to the footer or not
			moveToFooter = 0
		}
	}
}

TypoScript Setup

plugin.tx_flexslider {
	settings {
			# Boolean: Define whether the image caption should be shown or not
 		showCaption = 1
			# String: Select your animation type, "fade" or "slide"
		animation = fade
			# String: Select the sliding direction, "horizontal" or "vertical"
		slideDirection = horizontal
			# Boolean: Animate slider automatically
		slideshow = 0
			# Integer: Set the speed of the slideshow cycling, in milliseconds
		slideshowSpeed = 7000
			# Integer: Set the speed of animations, in milliseconds
		animationDuration = 600
			# Boolean: Display control navigation
		controlNav = 1
			# Boolean: Create navigation for previous/next navigation? (true/false)
		directionNav = 1
			# Boolean: Allow slider navigating via keyboard left/right keys
		keyboardNav = 1
			# Boolean: Allow slider navigating via mousewheel
		mousewheel = 0
			# Boolean: Create pause/play dynamic element
		pausePlay = 0
			# Boolean: Randomize slide order
		randomize = 0
			# Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
		animationLoop = 1
			# Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
		pauseOnHover = 0
			# Image settings in px - experimental!
			# If you don't really NEED them, just keep the options empty!
			# Cropping works - just type something like width = 960c
		images {
			width =
			height =
			minWidth =
			minHeight =
			maxWidth =
			maxHeight =
		}
	}
}

Language Overrides

Use the following TS Setup Object Path to override localizations.

plugin.tx_flexslider._LOCAL_LANG.en {
	languageLabel = value
}

Miscellaneous

Take a look at

• /Configuration/Typoscript/constants.txt
• /Configuration/Typoscript/setup.txt

to get further infos about settings and language labels.

Fluid Templating

Hint at the beginning: If you want to use special objects/vars in Partials, you'll need to pass them through as an argument, e.g.

<f:render 
   partial="JavaScript" 
   arguments="{settings: settings, data: data, configuration: configuration}"/>

Storing the templates somewhere else

Really? That's easy - just adjust the following lines to fit your needs and put them into the TypoScript Constants.

plugin.tx_flexslider {
	view {
		# Necessary options, if you plan to manipulate the templates
		templateRootPath = fileadmin/res/tpl/ext/flexslider/Templates/
		partialRootPath = fileadmin/res/tpl/ext/flexslider/Partials/
		layoutRootPath = fileadmin/res/tpl/ext/flexslider/Layouts/
	}
}

Accessing Frontend data

Using the object {data}, you can access everything regarding the Content Element (containing the FlexSlider Plugin):

cObject Data Array
data.uid	The Uid
data.pid	Page ID containing this Content Element
data.sys_language_uid	ID of the records language

And, of course, many more. Just use the Debug Viewhelper to get a clue about other variables:

<f:debug>{data}</f:debug>

Accessing Extension Configuration

Using the object {configuration}, you can access all options from the Extension Configuration, defined through Extension Manager (stored in the localconf.php):

Extension Configuration
extendSubtitleByRTE	Boolean - defines whether the subtitle is an RTE or not; if it is, it can contain HTML

How to

… use the Plugin in a Library

… to e.g. refer it to the page template:

lib.example < temp.flexslider
lib.example.persistence.storagePid = 73
lib.example.settings.randomize = 1

You just need to adjust the Records Storage Page ID (storagePid) - required! Of course you can adjust the TypoScript Setup to fit your need via lib.example.settings. Just dig into /Configuration/Typoscript/setup.txt to get a clue about the possibilities.

… throw Inline JS into Head or to closing body tag

Visit the Main Template in typo3conf/ext/flexslider/Resources/Private/Templates/FlexSlider/List.html and replace

<f:render
   partial="JavaScript"
   arguments="{settings: settings, data: data}"/>

with

<fs:AddJsInline
    code="<f:render partial='JavaScriptRaw'
    arguments='{settings: settings, data: data}'/>"
    name="fs-{data.uid}"
    moveToFooter="{settings.lib.moveToFooter}" />

Roadmap and Tasks

Plaese take a look at the Github Issue Tracker for this project.

Contribute

If you have any ideas, features or bug requests, don't hesitate to report them in the Issue Tracker.

Feel free to fork and pull.

Contributors

Simon Rauterberg

• Hotfix for DynLinkViewHelper)

Xaver Maierhofer

• Improvement for AddCssJsViewHelper
• Improvement for AddJQueryViewHelper
• New AddJsInlineViewHelper