diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000000000000000000000000000000000..9ab59b180fb670006ac910a2bc4524a1376dcea0
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,15 @@
+
+# Ignore developer files when exporting
+.gitattributes         export-ignore
+.gitignore             export-ignore
+.gitlab-ci.yml         export-ignore
+.phive                 export-ignore
+captainhook.json       export-ignore
+phpcs.xml.dist         export-ignore
+phpstan-baseline.neon  export-ignore
+phpstan.dist.neon      export-ignore
+phpunit.dist.xml       export-ignore
+tests                  export-ignore
+
+# Explicitly set file type and line endings for PHP files, improves git diff output
+*.php     text eol=lf diff=php
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..b9f7c5c4723a7ff60166164bae8afaeec189067a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+
+tools/
+
+phpstan.neon
+
+.phpunit.result.cache
+
+phpunit.xml
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000000000000000000000000000000000000..958e6dbe58befe8c34f0133df3c67aea44810b20
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,19 @@
+include:
+  - component: dev.quiqqer.com/quiqqer/stabilization/ci-cd-components/quiqqer-package-bundle/quiqqer-package-bundle@2
+    inputs:
+      quiqqer-major-version: 1
+
+# Remove the entire phpunit-php8.1 block, to allow PHPUnit to run on PHP 8.1 in your pipeline
+phpunit-php8.1:
+  rules:
+    - when: never
+
+# Remove the entire phpunit-php8.2 block, to allow PHPUnit to run on PHP 8.2 in your pipeline
+phpunit-php8.2:
+  rules:
+    - when: never
+
+# Remove the entire phpunit-php8.3 block, to allow PHPUnit to run on PHP 8.3 in your pipeline
+phpunit-php8.3:
+  rules:
+    - when: never
\ No newline at end of file
diff --git a/.phive/phars.xml b/.phive/phars.xml
new file mode 100644
index 0000000000000000000000000000000000000000..5bfa092bfad10dad9d23240281a5a2041acb815b
--- /dev/null
+++ b/.phive/phars.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phive xmlns="https://phar.io/phive">
+  <phar name="phpstan" version="1.11.8" installed="1.11.8" location="./tools/phpstan" copy="false"/>
+  <phar name="phpunit" version="^10.5.20" installed="10.5.20" location="./tools/phpunit" copy="false"/>
+  <phar name="phpcs" version="^3.10.1" installed="3.10.1" location="./tools/phpcs" copy="false"/>
+  <phar name="phpcbf" version="^3.10.1" installed="3.10.1" location="./tools/phpcbf" copy="false"/>
+  <phar name="captainhook" version="^5.23.3" installed="5.23.3" location="./tools/captainhook" copy="false"/>
+</phive>
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000000000000000000000000000000000000..4a69a59b440e5beec561eca1e341509bd5a18688
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,3 @@
+# Contributing
+
+This package follows the [QUIQQER contribution guidelines](https://dev.quiqqer.com/quiqqer/stabilization/documentation/-/wikis/home).
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/bricks.xml b/bricks.xml
new file mode 100644
index 0000000000000000000000000000000000000000..7db7645b0305747048a7ba12c67294abcb92e959
--- /dev/null
+++ b/bricks.xml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<quiqqer>
+    <bricks>
+        <!-- available standard bricks -->
+        <brick control="\QUI\Timeline\Bricks\Timeline">
+
+            <title>
+                <locale group="quiqqer/timeline" var="brick.timeline.title"/>
+            </title>
+            <description>
+                <locale group="quiqqer/timeline" var="brick.timeline.description"/>
+            </description>
+
+            <settings>
+                <setting name="site" data-qui="controls/projects/project/site/Select">
+                    <locale group="quiqqer/timeline" var="brick.timeline.setting.site"/>
+                </setting>
+
+                <setting name="image" type="select">
+                    <locale group="quiqqer/timeline"
+                            var="brick.timeline.setting.image"/>
+
+                    <option value="original">
+                        <locale group="quiqqer/timeline"
+                                var="brick.timeline.setting.image.original"/>
+                    </option>
+                    <option value="cover">
+                        <locale group="quiqqer/timeline"
+                                var="brick.timeline.setting.image.cover"/>
+                    </option>
+                </setting>
+
+                <setting name="order" type="select">
+                    <locale group="quiqqer/timeline"
+                            var="brick.timeline.setting.order"/>
+
+                    <option value="c_date ASC">
+                        <locale group="quiqqer/timeline"
+                                var="brick.timeline.setting.order.original"/>
+                    </option>
+                    <option value="c_date DESC">
+                        <locale group="quiqqer/timeline"
+                                var="brick.timeline.setting.order.inverted"/>
+                    </option>
+                </setting>
+
+                <setting name="showLinks" type="checkbox">
+                    <locale group="quiqqer/timeline" var="brick.timeline.setting.showLinks"/>
+                </setting>
+
+                <setting name="template" type="select">
+                    <locale group="quiqqer/timeline"
+                            var="brick.timeline.setting.order"/>
+
+                    <option value="VerticalBothSides">
+                        <locale group="quiqqer/timeline"
+                                var="brick.timeline.setting.template.verticalBothSides"/>
+                    </option>
+                </setting>
+
+                <setting name="limit" type="number">
+                    <locale group="quiqqer/timeline"
+                            var="brick.timeline.setting.limit"/>
+                </setting>
+            </settings>
+
+        </brick>
+
+    </bricks>
+</quiqqer>
diff --git a/captainhook.json b/captainhook.json
new file mode 100644
index 0000000000000000000000000000000000000000..3702e1a358868bedd5ff4c7eae40bb1abb589267
--- /dev/null
+++ b/captainhook.json
@@ -0,0 +1,13 @@
+{
+    "pre-commit": {
+        "enabled": true,
+        "actions": [
+            {
+                "action": "\\CaptainHook\\App\\Hook\\PHP\\Action\\Linting"
+            },
+            {
+                "action": "composer test"
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/composer.json b/composer.json
index 4201f5da4caf9f0a3734b4c89a1882805845d53e..cfa846d5b6623418baec141e0710d8247435aaef 100644
--- a/composer.json
+++ b/composer.json
@@ -1,5 +1,5 @@
 {
-    "name": "quiqqer\/timeline",
+    "name": "quiqqer/timeline",
     "type": "quiqqer-module",
     "description": "This package contains some templates to simply create time lines and road maps.",
     "license": "",
@@ -7,23 +7,65 @@
         {
             "name": "Michael Danielczok",
             "email": "michael@pcsg.de",
-            "homepage": "http:\/\/www.pcsg.de",
+            "homepage": "http://www.pcsg.de",
             "role": "Developer"
         }
     ],
     "support": {
         "email": "support@pcsg.de",
-        "url": "http:\/\/www.pcsg.de"
+        "url": "http://www.pcsg.de"
     },
     "require": {
-        "quiqqer\/quiqqer": "*@dev",
-        "quiqqer\/utils": ">=1.7|dev-dev",
-        "quiqqer\/fontawesome": "*@dev",
-        "quiqqer\/buttons": ">=1.0.0|dev-master|dev-dev"
+        "quiqqer/quiqqer": "*@dev",
+        "quiqqer/utils": ">=1.7|dev-dev",
+        "quiqqer/fontawesome": "*@dev",
+        "quiqqer/buttons": ">=1.0.0|dev-master|dev-dev"
     },
     "autoload": {
         "psr-4": {
-            "QUI\\Timeline\\": "src\/QUI\/Timeline"
+            "QUI\\Timeline\\": "src/QUI/Timeline"
         }
+    },
+    "scripts": {
+        "test": [
+            "@dev:lint",
+            "@dev:phpunit"
+        ],
+        "dev:phpunit": "./tools/phpunit",
+        "dev:lint": [
+            "@dev:lint:phpstan",
+            "@dev:lint:style"
+        ],
+        "dev:lint:phpstan": "./tools/phpstan",
+        "dev:lint:style": "./tools/phpcs",
+        "dev:lint:style:fix": "./tools/phpcbf",
+        "dev:init": [
+            "@dev:init:check-requirements",
+            "@dev:init:tools",
+            "@dev:init:git-hooks"
+        ],
+        "dev:init:check-requirements": [
+            "which composer > /dev/null || (echo 'Error: composer has to be globally installed'; exit 1)",
+            "which phive > /dev/null || (echo 'Error: PHIVE has to be globally installed'; exit 1)"
+        ],
+        "dev:init:tools": "phive install --temporary",
+        "dev:init:git-hooks": "./tools/captainhook install --only-enabled --force"
+    },
+    "scripts-aliases": {
+        "test": [
+            "dev:test"
+        ]
+    },
+    "scripts-descriptions": {
+        "test": "Runs linting, static analysis, and unit tests.",
+        "dev:phpunit": "Run PHPUnit test suites",
+        "dev:lint": "Run PHPStan and code style check",
+        "dev:lint:phpstan": "Run PHPStan",
+        "dev:lint:style": "Run code style check (PHP_CodeSniffer)",
+        "dev:lint:style:fix": "Try to fix code style errors automatically",
+        "dev:init": "Initialize the developer tooling (tools and git hooks)",
+        "dev:init:check-requirements": "Check if the necessary requirements are met",
+        "dev:init:tools": "Install all developer tools (requires PHIVE)",
+        "dev:init:git-hooks": "Install all git hooks (may require tools to be installed)"
     }
 }
\ No newline at end of file
diff --git a/locale.xml b/locale.xml
index b23c002d8c92a125c705a4b58a11a07d62f84a10..00967f507abfd74d9bc1c2ecdf9a5818c8f04ac6 100644
--- a/locale.xml
+++ b/locale.xml
@@ -4,14 +4,18 @@
         <locale name="package.title">
             <de><![CDATA[QUIQQER - Timeline]]></de>
             <en><![CDATA[QUIQQER - Timeline]]></en>
+            <en><![CDATA[QUIQQER - Linia czasu]]></en>
         </locale>
         <locale name="package.description" html="true">
             <de><![CDATA[
-                (...)
+                Das Paket ermöglicht das einfache Erstellen von Timelines oder Roadmaps.
             ]]></de>
             <en><![CDATA[
-                (...)
+                The package allows you to easily create timelines or roadmaps.
             ]]></en>
+            <pl><![CDATA[
+                Za pomocą tego rozszerzenia możliwe jest szybie i proste dodanie do Twojego projekt dtzw. linni czasu albo "road map".
+            ]]></pl>
         </locale>
 
         <!-- timeline -->
@@ -21,9 +25,79 @@
             <pl><![CDATA[Linnia czasu]]></pl>
         </locale>
         <locale name="admin.types.timeline.desc">
-            <de><![CDATA[(...)]]></de>
-            <en><![CDATA[(...)]]></en>
-            <pl><![CDATA[(...)]]></pl>
+            <de><![CDATA[Die Seite wird alle ihre Unterseite in Form von einer Timeline auflisten. Um gutes Ergebnis zu bekommen ist es notwendig, jede Unterseite mit Titel, Kurzbeschreibung und einer Icon bzw. Seitenbild zu versehen.]]></de>
+            <en><![CDATA[This site type will list all of its subpages in the form of a timline. It is necessary to add a title, short description and an icon or page image to each subpage.]]></en>
+            <pl><![CDATA[Ta strona wylistuje wszystkie jej podstrony w formie tzw. linni czasowej. Żeby uzyskać najlepszy efekt, musisz ustawić każdej stronie tytuł, krótki opis oraz ikonę lub obrazek.]]></pl>
+        </locale>
+
+        <!--  timeline brick  -->
+        <locale name="brick.timeline.title">
+            <de><![CDATA[Brick: Timeline]]></de>
+            <en><![CDATA[Brick: Timeline]]></en>
+        </locale>
+
+        <locale name="brick.timeline.description">
+            <de><![CDATA[
+                Das Paket ermöglicht das einfache Erstellen von Timelines oder Roadmaps.
+            ]]></de>
+            <en><![CDATA[
+                The package allows you to easily create timelines or roadmaps.
+            ]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.site">
+            <de><![CDATA[Seite(n) auswählen]]></de>
+            <en><![CDATA[Select site(s)]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.image">
+            <de><![CDATA[Bild]]></de>
+            <en><![CDATA[Image]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.image.original">
+            <de><![CDATA[Original]]></de>
+            <en><![CDATA[Original]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.image.cover">
+            <de><![CDATA[Cover (Bild kann gestreckt werden)]]></de>
+            <en><![CDATA[Cover (image can be stretched)]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.order">
+            <de><![CDATA[Befehl]]></de>
+            <en><![CDATA[Original]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.order.original">
+            <de><![CDATA[Original]]></de>
+            <en><![CDATA[Original]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.order.inverted">
+            <de><![CDATA[Invertiert]]></de>
+            <en><![CDATA[Inverted]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.showLinks">
+            <de><![CDATA[Hyperlinks für jede Site anzeigen?]]></de>
+            <en><![CDATA[Show hyperlinks for each site?]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.template">
+            <de><![CDATA[Vorlage]]></de>
+            <en><![CDATA[Template]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.template.verticalBothSides">
+            <de><![CDATA[Vertikale Zeitleiste mit Inhalt und Symbol (Bild)]]></de>
+            <en><![CDATA[Vertical timeline wiht content and icon (image)]]></en>
+        </locale>
+
+        <locale name="brick.timeline.setting.limit">
+            <de><![CDATA[Limit (Grundlimit 10)]]></de>
+            <en><![CDATA[Limit (basic limit it 10)]]></en>
         </locale>
 
     </groups>
@@ -48,13 +122,31 @@
                 <pl><![CDATA[Wertykalna linnia czasu z treścią i ikona (obrazkiem)]]></pl>
             </locale>
 
-        <!-- show short -->
+        <!-- show url -->
         <locale name="timeline.showLinks">
             <de><![CDATA[Links zu den Seiten anzeigen?]]></de>
             <en><![CDATA[Show hyerlinks for each site?]]></en>
             <pl><![CDATA[]]></pl>
         </locale>
 
+        <!-- image fit -->
+        <locale name="timeline.imageFit">
+            <de><![CDATA[Bild]]></de>
+            <en><![CDATA[Image]]></en>
+        </locale>
+        <locale name="timeline.imageFit.desc">
+            <de><![CDATA[Die Einstellung bezieht sich nur auf die Bilder, nicht auf die Icons]]></de>
+            <en><![CDATA[The setting refers only to the images, not to the icons]]></en>
+        </locale>
+        <locale name="timeline.imageFit.original">
+            <de><![CDATA[Original]]></de>
+            <en><![CDATA[Original]]></en>
+        </locale>
+        <locale name="timeline.imageFit.cover">
+            <de><![CDATA[Decken (Bild kann gestreckt werden)]]></de>
+            <en><![CDATA[Cover (image can be stretched)]]></en>
+        </locale>
+
         <!-- counter text -->
         <locale name="timeline.verticalBothSides.counterText">
             <de><![CDATA[STEP]]></de>
@@ -62,5 +154,12 @@
             <pl><![CDATA[STEP]]></pl>
         </locale>
 
+        <!-- more button -->
+        <locale name="timeline.more">
+            <de><![CDATA[mehr]]></de>
+            <en><![CDATA[more]]></en>
+            <pl><![CDATA[więcej]]></pl>
+        </locale>
+
     </groups>
 </locales>
\ No newline at end of file
diff --git a/package.xml b/package.xml
new file mode 100644
index 0000000000000000000000000000000000000000..b483a79af18a65bab5bcbd36250e8b5c0a6573ea
--- /dev/null
+++ b/package.xml
@@ -0,0 +1,33 @@
+<quiqqer>
+    <package>
+        <title>
+            <locale group="quiqqer/timeline" var="package.title"/>
+        </title>
+
+        <description>
+            <locale group="quiqqer/timeline" var="package.description"/>
+        </description>
+
+        <image src="URL_OPT_DIR/quiqqer/timeline/bin/images/Logo.jpg"/>
+
+        <preview>
+            <image src="URL_OPT_DIR/quiqqer/timeline/bin/images/preview/1.jpg"/>
+            <image src="URL_OPT_DIR/quiqqer/timeline/bin/images/preview/2.jpg"/>
+        </preview>
+
+
+        <support>
+            <email>support@pcsg.de</email>
+            <forum>https://community.quiqqer.com</forum>
+            <source>https://dev.quiqqer.com/quiqqer/timeline</source>
+            <issues>https://dev.quiqqer.com/quiqqer/timeline/issues</issues>
+            <wiki>https://dev.quiqqer.com/quiqqer/timeline/wikis/home</wiki>
+        </support>
+
+        <copyright>
+            <name><![CDATA[PCSG - Computer & Internet Service OHG]]></name>
+            <license>PCSG QL-1.0</license>
+            <license>CC BY-NC-SA 4.0</license>
+        </copyright>
+    </package>
+</quiqqer>
\ No newline at end of file
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
new file mode 100644
index 0000000000000000000000000000000000000000..d48084fbdc86a2dbfb78dd89ab2e0b0ff2322ba7
--- /dev/null
+++ b/phpcs.xml.dist
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<ruleset>
+    <!-- Use PSR-12 ruleset -->
+    <rule ref="PSR12"/>
+
+    <!-- Only scan *.php files -->
+    <arg name="extensions" value="php"/>
+
+    <!-- Ignore warnings -->
+    <arg name="warning-severity" value="0"/>
+
+    <!-- Process 64 (or number of CPU cores) files in parallel -->
+    <arg name="parallel" value="64"/>
+
+    <!-- Output relative file paths, by setting the current folder as the basepath -->
+    <arg name="basepath" value="."/>
+
+    <!-- Show colored output -->
+    <arg name="colors"/>
+
+    <!-- Scan everything in the current folder -->
+    <file>.</file>
+</ruleset>
diff --git a/phpstan-baseline.neon b/phpstan-baseline.neon
new file mode 100644
index 0000000000000000000000000000000000000000..91a9452b0b2edcf8c15ee911219e7bffe05710a9
--- /dev/null
+++ b/phpstan-baseline.neon
@@ -0,0 +1,16 @@
+parameters:
+	ignoreErrors:
+		-
+			message: "#^Parameter \\#2 \\$val of method QUI\\\\QDOM\\:\\:setAttribute\\(\\) expects array\\|bool\\|object\\|string, int given\\.$#"
+			count: 1
+			path: src/QUI/Timeline/Bricks/Timeline.php
+
+		-
+			message: "#^Variable \\$Engine might not be defined\\.$#"
+			count: 1
+			path: types/timeline.php
+
+		-
+			message: "#^Variable \\$Site might not be defined\\.$#"
+			count: 4
+			path: types/timeline.php
diff --git a/phpstan.dist.neon b/phpstan.dist.neon
new file mode 100644
index 0000000000000000000000000000000000000000..541ee5f2241d098cb33fda0395d3fdd0c0570c64
--- /dev/null
+++ b/phpstan.dist.neon
@@ -0,0 +1,11 @@
+includes:
+	- phpstan-baseline.neon
+
+parameters:
+    level: 5
+    paths:
+        - src
+        - types
+    bootstrapFiles:
+        - tests/phpstan-bootstrap.php
+    tipsOfTheDay: false
diff --git a/phpunit.dist.xml b/phpunit.dist.xml
new file mode 100644
index 0000000000000000000000000000000000000000..f6c7becf0c12757beb871a9333e2d81e02aa7cae
--- /dev/null
+++ b/phpunit.dist.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit bootstrap="tests/phpunit-bootstrap.php">
+    <testsuites>
+        <testsuite name="Tests">
+            <directory>tests/</directory>
+        </testsuite>
+    </testsuites>
+</phpunit>
diff --git a/site.xml b/site.xml
index 254d30d13ff3f2cb77953e674291c3e6c76668b6..b17d8db41db1db7c9bb97df5265f62f68c6ff02b 100644
--- a/site.xml
+++ b/site.xml
@@ -13,6 +13,7 @@
             <attributes>
                 <attribute default="VerticalBothSides">quiqqer.timeline.display</attribute>
                 <attribute default="1">quiqqer.timeline.showLinks</attribute>
+                <attribute default="original">quiqqer.timeline.imageFit</attribute>
             </attributes>
 
             <!-- list settings -->
@@ -43,6 +44,26 @@
                             </text>
                         </input>
 
+                        <select conf="quiqqer.timeline.imageFit">
+                            <text>
+                                <locale group="quiqqer/timeline"
+                                        var="timeline.imageFit"/>
+                            </text>
+                            <description>
+                                <locale group="quiqqer/timeline"
+                                        var="timeline.imageFit.desc"/>
+                            </description>
+
+                            <option value="original">
+                                <locale group="quiqqer/timeline"
+                                        var="timeline.imageFit.original"/>
+                            </option>
+                            <option value="cover">
+                                <locale group="quiqqer/timeline"
+                                        var="timeline.imageFit.cover"/>
+                            </option>
+                        </select>
+
                     </settings>
                 </category>
             </settings>
diff --git a/src/QUI/Timeline/Bricks/Timeline.html b/src/QUI/Timeline/Bricks/Timeline.html
new file mode 100644
index 0000000000000000000000000000000000000000..c0ff3c7f23bb4295ea412e19e38adc5f5a18ee47
--- /dev/null
+++ b/src/QUI/Timeline/Bricks/Timeline.html
@@ -0,0 +1 @@
+{$body}
diff --git a/src/QUI/Timeline/Bricks/Timeline.php b/src/QUI/Timeline/Bricks/Timeline.php
new file mode 100644
index 0000000000000000000000000000000000000000..4865c4e2cbdc020d13767624840025f5141383f1
--- /dev/null
+++ b/src/QUI/Timeline/Bricks/Timeline.php
@@ -0,0 +1,78 @@
+<?php
+
+/**
+ * This file contains QUI\Timeline\Bricks\Timeline
+ */
+
+namespace QUI\Timeline\Bricks;
+
+use QUI;
+
+/**
+ * Class Timeline
+ *
+ * @package quiqqer/timeline
+ */
+class Timeline extends QUI\Control
+{
+    /**
+     * constructor
+     *
+     * @param array $attributes
+     */
+    public function __construct($attributes = [])
+    {
+        // default options
+        $this->setAttributes([
+            'image'     => 'original', // original, cover
+            'order'     => 'c_date ASC',
+            'showLinks' => true,
+            'template'  => 'VerticalBothSides',
+            'limit'     => 10
+        ]);
+
+        parent::__construct($attributes);
+
+        $this->setAttribute('cacheable', 0);
+    }
+
+    /**
+     * Return the inner body of the element
+     * Can be overwritten
+     *
+     * @return String
+     */
+    public function getBody()
+    {
+        $Engine  = QUI::getTemplateManager()->getEngine();
+        $Control = new QUI\Timeline\Controls\Timeline();
+
+        $limit = $this->getAttribute('limit');
+
+        if ($limit === '') {
+            $limit = 10;
+        }
+
+        if ($limit <= 0) {
+            $limit = 1;
+        }
+
+        $Control->setAttribute('parentInputList', $this->getAttribute('site'));
+        $Control->setAttribute('imageFit', $this->getAttribute('image'));
+        $Control->setAttribute('order', $this->getAttribute('order'));
+        $Control->setAttribute('showLinks', $this->getAttribute('showLinks'));
+        $Control->setAttribute('display', $this->getAttribute('template'));
+        $Control->setAttribute('limit', $limit);
+        $result = $Control->create();
+
+        $this->addCSSFiles($Control->getCSSFiles());
+
+        $options = [
+            'body' => $result
+        ];
+
+        $Engine->assign($options);
+
+        return $Engine->fetch(\dirname(__FILE__) . '/Timeline.html');
+    }
+}
diff --git a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
index 4aee19ba9450c37871fd39727bc39df809024dc3..b086e397d47e72db0c32e058baec59d292a36bf7 100644
--- a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
+++ b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
@@ -33,7 +33,6 @@
     justify-content: center;
     align-items: center;
     border-radius: 50%;
-    padding: 20px;
     position: relative;
     margin-top: 12px;
 }
@@ -45,13 +44,31 @@
     top: calc(50% - 20px);
     background: none;
     width: 0;
-    height: 0px;
+    height: 0;
     border-right: none;
     border-bottom: 20px solid transparent;
     border-top: 20px solid transparent;
     border-left: 30px solid #aaa;
 }
 
+/* image */
+.timeline-entry-icon-wrapper picture {
+    overflow: hidden;
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.timeline-entry-icon-wrapper picture img.image-fit-cover {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+
+}
+
 /* line - middle */
 .timeline-entry-line {
     width: 60px;
diff --git a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
index 5a8a7074407e726be87d8dd83618f6c62f3cc665..11a45b2bdbb365b68373e5495c07f940fa1dd7fb 100644
--- a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
+++ b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
@@ -6,7 +6,7 @@
 {/if}
 
 {if $this->getAttribute('content') != ""}
-<div class="control-content">
+<div class="control-content default-content">
     {$this->getAttribute('content')}
 </div>
 {/if}
@@ -26,13 +26,18 @@
                  itemtype="{$this->getAttribute('child-itemtype')}"
                  class="timeline-entry"
         >
+            {assign var=imageFitClass value=''}
+            {if $imageFit == 'cover'}
+                {assign var=imageFitClass value='image-fit-cover'}
+            {/if}
 
             <!-- Entry Icon -->
             <div class="timeline-entry-icon">
                 {if $Child->getAttribute('image_site')}
                 <div class="timeline-entry-icon-wrapper">
-                    {image src=$Child->getAttribute('image_site') width="500" type="resize"
-                    title="{$Child->getAttribute('title')}"}
+                    {image src=$Child->getAttribute('image_site') max-width="500" max-height="500" type="resize"
+                    title="{$Child->getAttribute('title')}"
+                    class="$imageFitClass"}
                 </div>
                 {/if}
             </div>
@@ -67,15 +72,18 @@
                     {/if}
                 </header>
 
-                <p>
-                    {$Child->getAttribute('short')|nl2br}
-                    {if $showLinks}
-                    <a itemprop="url" href="{url site=$Child}"
-                       class="timeline-entry-desc-link">
-                        {locale group="quiqqer/sitetypes" value="list.more"}
-                    </a>
-                    {/if}
-                </p>
+                <div class="default-content">
+                    <p>
+                        {$Child->getAttribute('short')|nl2br}
+                        {if $showLinks}
+                        <a itemprop="url" href="{url site=$Child}"
+                           class="timeline-entry-desc-link">
+                            {locale group="quiqqer/timeline" value="timeline.more"}
+                        </a>
+                        {/if}
+                    </p>
+                </div>
+
             </div>
 
         </article>
diff --git a/src/QUI/Timeline/Controls/Timeline.php b/src/QUI/Timeline/Controls/Timeline.php
index d245adea8307a63f104aeef47e94148e28f455e8..1d67604f68a0fa556920f61fabcb19adaed1a2d6 100644
--- a/src/QUI/Timeline/Controls/Timeline.php
+++ b/src/QUI/Timeline/Controls/Timeline.php
@@ -30,7 +30,9 @@ public function __construct($attributes = array())
             'order'           => 'c_date ASC',
             'parentInputList' => false, //todo später für brick
             'showLinks'       => true,
+            'imageFit'        => 'original', // original, cover
             'display'         => 'VerticalBothSides',
+            'limit'           => 10,
             // Custom children template (path to html file); overwrites "display"
             'displayTemplate' => false,
             // Custom children template css (path to css file); overwrites "display"
@@ -72,7 +74,8 @@ public function getBody()
             // for bricks
             $children = Utils::getSitesByInputList($Project, $parents, array(
                 'where' => $where,
-                'order' => $this->getAttribute('order')
+                'order' => $this->getAttribute('order'),
+                'limit' => $this->getAttribute('limit')
             ));
         } else {
             // for site types
@@ -86,14 +89,17 @@ public function getBody()
             'Site'      => $Site,
             'Project'   => $this->getProject(),
             'children'  => $children,
-            'showLinks' => $this->getAttribute('showLinks')
+            'showLinks' => $this->getAttribute('showLinks'),
+            'imageFit'  => $this->getAttribute('imageFit')
         ));
 
         // load custom template (if set)
-        if ($this->getAttribute('displayTemplate')
+        if (
+            $this->getAttribute('displayTemplate')
             && file_exists($this->getAttribute('displayTemplate'))
         ) {
-            if ($this->getAttribute('displayCss')
+            if (
+                $this->getAttribute('displayCss')
                 && file_exists($this->getAttribute('displayCss'))
             ) {
                 $this->addCSSFile($this->getAttribute('displayCss'));
diff --git a/tests/phpstan-bootstrap.php b/tests/phpstan-bootstrap.php
new file mode 100644
index 0000000000000000000000000000000000000000..b61ff4b8300a965e0f46025ba64745a22b118e74
--- /dev/null
+++ b/tests/phpstan-bootstrap.php
@@ -0,0 +1,13 @@
+<?php
+
+if (!defined('QUIQQER_SYSTEM')) {
+    define('QUIQQER_SYSTEM', true);
+}
+
+if (!defined('QUIQQER_AJAX')) {
+    define('QUIQQER_AJAX', true);
+}
+
+putenv("QUIQQER_OTHER_AUTOLOADERS=KEEP");
+
+require_once __DIR__ . '/../../../../bootstrap.php';
diff --git a/tests/phpunit-bootstrap.php b/tests/phpunit-bootstrap.php
new file mode 100644
index 0000000000000000000000000000000000000000..eca92fd67bed8ae4ec424ed82d300119d792f042
--- /dev/null
+++ b/tests/phpunit-bootstrap.php
@@ -0,0 +1,11 @@
+<?php
+
+if (!defined('QUIQQER_SYSTEM')) {
+    define('QUIQQER_SYSTEM', true);
+}
+
+if (!defined('QUIQQER_AJAX')) {
+    define('QUIQQER_AJAX', true);
+}
+
+require_once __DIR__ . '/../../../../bootstrap.php';
diff --git a/types/timeline.php b/types/timeline.php
index a18795dd3d65d1e68192d2e40a10e48671acf2a9..fcfd450f90cb673cde6545f2b35dedad6b056ec5 100644
--- a/types/timeline.php
+++ b/types/timeline.php
@@ -9,7 +9,8 @@
     'showLinks'       => $Site->getAttribute('quiqqer.timeline.showLinks'),
     'itemtype'       => 'http://schema.org/ItemList',
     'child-itemtype' => 'http://schema.org/ListItem',
-    'display'        => $Site->getAttribute('quiqqer.timeline.display')
+    'display'        => $Site->getAttribute('quiqqer.timeline.display'),
+    'imageFit' => $Site->getAttribute('quiqqer.timeline.imageFit')
 ));
 
 $Engine->assign(array(