feat: Image fit setting.

#1

locale.xml

@@ -52,13 +52,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>

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>

src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css

@@ -62,7 +62,7 @@
     justify-content: center;
 }
 
-.timeline-entry-icon-wrapper picture img.fill-image {
+.timeline-entry-icon-wrapper picture img.image-fit-cover {
     object-fit: cover;
     width: 100%;
     height: 100%;

src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html

@@ -26,6 +26,10 @@
                  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">
@@ -33,7 +37,7 @@
                 <div class="timeline-entry-icon-wrapper">
                     {image src=$Child->getAttribute('image_site') max-width="500" max-height="500" type="resize"
                     title="{$Child->getAttribute('title')}"
-                    class="fill-image"}
+                    class="$imageFitClass"}
                 </div>
                 {/if}
             </div>

src/QUI/Timeline/Controls/Timeline.php

@@ -30,6 +30,7 @@ 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',
             // Custom children template (path to html file); overwrites "display"
             'displayTemplate' => false,
@@ -86,7 +87,8 @@ 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)

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(