README

Adds a vertical timeline content element to TYPO3. Timeline items support a title, rich text, and up to two images each.

Features

TYPO3 v13 and v14 compatible (Site Set ready)
Vertical or horizontal timeline layout (configurable via JavaScript)
Timeline items with title, rich text, and up to two images
IRRE-based item management in the backend
Timeline JavaScript from squarechip/timeline (vendored)

Requirements

Requirement	Version
TYPO3	^13.4 \| ^14.3
PHP	>=8.2

Installation

composer require oliverthiele/ot-timeline

After installation, activate the Site Set "OtTimeline" for your site in the TYPO3 backend.

Configuration

TypoScript

TypoScript is auto-included via the Site Set. For manual integration without Site Set:

@import 'EXT:ot_timeline/Configuration/TypoScript/setup.typoscript'

JavaScript Options

The timeline is initialised with a default vertical configuration. To customise the behaviour, override the template and adjust the timeline() call:

timeline(document.querySelectorAll('.timeline'), {
    verticalStartPosition: 'right',  // 'left' | 'right'
    visibleItems: 2,
    verticalTrigger: '150px',        // px or % from bottom of viewport
    mode: 'vertical'                 // 'vertical' | 'horizontal'
});

For a full list of options see the squarechip/timeline documentation.

Template Override

To customise the output, override the template in your sitepackage:

tt_content.ot_timeline.templateRootPaths.10 = EXT:your_sitepackage/Resources/Private/Templates/

Styles

The extension does not ship compiled CSS. Include the SCSS source from Resources/Private/Scss/Timeline.scss in your frontend build, or use the styles from the squarechip/timeline repository.

Usage

Create a new Timeline content element in the TYPO3 backend.
Add timeline items via the IRRE interface. Each item can have a title, rich text, and up to two images.

oliverthiele / ot-timeline

Maintainers

Package info

Statistics

Security