Presets of the Slick-Modal for TYPO3
The Slick-Modal Extension for TYPO3 makes use of easy to configure Presets, so that your editor doesn't have to tackle with complicated configuration settings. You just prepare the required presets for your Website and the editor creates simply Slick-Modals with their Content in desired look and feel.
Create Slick-Modal Preset configuration.
To configure a Preset for a Slick-Modal, you only needs TypoScript. The following example defines a preset with name MyPreset. The description of all configuration values you find in Slick-Modal documentation.
plugin.tx_slickmodal {
settings {
presets {
MyPreset {
# Hide on pages
hideOnPages = /foo/page1/, /foo/page2/, /foo/page3/
# Popup type
popupType = delayed
delayTime = 1000
scrollTopDistance = 400
# Auto closing
autoClose= false
autoCloseDelay = 3000
# Statistics
enableStats = false
fileLocation = slickStats/collect.php
modalName = My awesome modal 1
modalSummary = Lorem ipsum dolor sit amet
callToAction = cta
# Popup cookies
setCookie = false
cookieDays = 30
# cookieTriggerClass = slick-modal-cookie-UID
# cookieName = slick-modal-UID
cookieScope = domain
# Overlay styling
overlayVisible = true
overlayClosesModal = true
overlayColor = rgba(255,255,255,0.85)
overlayAnimationDuration = 0.4
overlayAnimationEffect = fadeIn
# Background effects
pageAnimationDuration = 0.4
pageAnimationEffect = none
pageBlurRadius = 1px
pageScaleValue = 0.9
pageMoveDistance = 30%
# Popup styling
popupWidth = 385px
popupHeight = 445px
popupLocation = center
popupAnimationDuration = 0.4
popupAnimationEffect = unFold
popupBoxShadow = none
popupBackground = transparent
popupRadius = 0
popupMargin = 30px
popupPadding = 0
# Mobile rules
showOnMobile = true
responsive = true
mobileBreakPoint = 480px
mobileLocation = center
mobileWidth = 100%
mobileHeight = 280px
mobileRadius = 0
mobileMargin = 0
mobilePadding = 24px
# Animate content
contentAnimation = true
contentAnimationEffect = fadeIn
contentAnimationDuration = 0.4
contentAnimationDelay = 0.4
# Youtube videos
videoSupport = true
videoAutoPlay = true
videoStopOnClose = true
# Close and reopen button
addCloseButton = true
buttonStyle = icon
enableESC = true
# reopenClass = open-slick-modal-UID
# Additional events
onSlickLoad (
function() {
// Your code goes here
//console.log('onSlickLoad');
}
)
onSlickClose (
function() {
// Your code goes here
//console.log('onSlickClose');
}
)
}
}
}
}
registering the Preset in TYPO3 Backend
The new configuration preset must be registered, so that you are able to select them in TYPO3 backend. This can be done by using Page-TypoScript (tsconfig):
TCEFORM.tt_content {
tx_slickmodal_preset {
addItems {
Default = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_default
Delayed = LLL:EXT:slick_modal/Resources/Private/Language/locallang_db.xlf:tx_slickmodal_label.preset_delayed
MyPreset = The label for my preset in backend
}
}
}
Create Slick-Modal Fluid-Templates
Each of this Presets owned an own Fluid-Partial.
The Default.html Fluid-Partial looks like:
<button class="btn btn-primary open-slick-modal-{contentObject.uid}">OPEN</button>
<div id="slick-modal-{contentObject.uid}" class="slickModal">
<div class="slickWindow">
<f:format.raw><slickmodal:renderContent uid="{contentUid}" /></f:format.raw>
</div>
</div>
The first line defines a button, which is used for opening the Slick-Modal. The following last lines defines the content of the Slick-Modal. In this case we only inserting the result of the content element rendering.
For our new preset with name MyPreset we create a Fluid-Partial with name MyPreset.html. In this template you can modify your HTML as you need.