Requirements

Contao 4

Contao 4 requires a web server such as Apache or NGINX with PHP and MySQL support. Animated Timeline requires Contao 4.4 or higher and PHP 5.6.

Contao Manager

Animated Timeline is easy to install with the Contao Manager. Just search for animated-timeline-bundle.

The extension in the extension directory on contao.org.

Installation

1 / Open the Contao Manager

First open the Contao Manager at the following URL: https://www.your-domain.com/contao-manager.phar.php. Click Discover and enter animated-timeline in the search field. Add the bundle pdir/animated-timeline-bundle, go to Packages and click Apply changes at the bottom. The installation should now start.

2 / Update the database

Then update the database.

Configuration

1 / Placing the content elements

Wrapper elements

First place an element of type Wrapper (start) and Wrapper (end) in an article. You find them under Animated Timeline (see the following screenshot).

The element type Wrapper (start) has the following settings:

• Orientation:
  • Horizontal: The slider is displayed horizontally but not optimized for mobile devices.
  • Vertical: The slider is displayed vertically and optimized for mobile devices.
  • Auto: The slider is displayed horizontally on desktop devices and vertically on mobile devices.
• Elements per slide: Number of elements shown per page. If there are more elements than this number, a navigation for showing the other elements is displayed.
• Back button: Defines the back button if there are more elements than shown per slide. You can also insert HTML, e.g. an icon from an icon font library.
• Next button: Defines the next button if there are more elements than shown per slide. You can also insert HTML, e.g. an icon from an icon font library.
• Custom template: Select a template here if you want to copy and customize it.

Timeline element

Inside the wrapper elements, place an element of type Timeline element. There you can enter a headline and a text.

You can also add a single image or an image slider.

This is what it could look like in the back end:

Demo

You find a demo on demo.pdir.de

Issues

If you ran into problems during installation or setup, or if you found a bug in the extension, please open a new ticket:

All tickets Create a new ticket