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.