]> _ Git - fluidbook-v3.git/commitdiff
wait #7830 @3:30
authorsoufiane <soufiane@cubedesigners.com>
Mon, 24 Nov 2025 19:10:18 +0000 (20:10 +0100)
committersoufiane <soufiane@cubedesigners.com>
Mon, 24 Nov 2025 19:10:18 +0000 (20:10 +0100)
framework/application/forms/CMS/Sub/Home/Block.php
framework/application/views/helpers/BackgroundBlock.php
js/210-home.js
less/210-home.less

index f16962f49fd83236f4597fb2bd3467c017ae7714..89055c4481fdcb9cb7f46fde6de23bdab801ef5d 100644 (file)
@@ -43,7 +43,7 @@ class Fluidbook_Form_CMS_Sub_Home_Block extends CubeIT_Form_SubForm {
 
                $backgroundImage = new CubeIT_Form_Element_File_Image('backgroundimage');
                $backgroundImage->setLabel('Image de fond');
-               $backgroundImage->setMaxItems(1);
+               $backgroundImage->setMaxItems(5);
                $backgroundImage->setOrder(60);
                $this->addElement($backgroundImage);
 
index f6060f8361004edf120acf8db84a01a09c781df4..d247d2c38489f348c827df8a61072803d012bdc4 100644 (file)
@@ -23,66 +23,67 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract
         }\r
         if (isset($data['bg_image'])) {\r
 \r
-            $bgimage = CubeIT_Util_Cms::extractFile($data['bg_image']);\r
             $extra_attributes = array();\r
-            if ($bgimage) {\r
-                $image_path = CubeIT_View_Helper_ImageCms::getPath($bgimage);\r
+            $bg = '';\r
+            if ($data['bg_image']) {\r
+                foreach ($data['bg_image'] as $img) {\r
+                    $bgimage = CubeIT_Util_Cms::extractFile($img);\r
+                    $image_path = CubeIT_View_Helper_ImageCms::getPath($bgimage);\r
 \r
-                // Work out the ratio of the background image\r
-                CubeIT_Image::getDimensions($image_path, $image_width, $image_height);\r
-                $image_ratio = $image_height / $image_width;\r
-                $attributes['data-bg-ratio'] = $image_ratio;\r
+                    // Work out the ratio of the background image\r
+                    CubeIT_Image::getDimensions($image_path, $image_width, $image_height);\r
+                    $image_ratio = $image_height / $image_width;\r
+                    $attributes['data-bg-ratio'] = $image_ratio;\r
 \r
-                // Create a cropped version of the image for mobile that cuts off the left 45% of the image\r
-                // Make sure image is not wider than 900px when finished\r
-                $mobile_max_width = 900;\r
-                // Scale image, factoring in crop that will take place...\r
-                // Image will be cropped to 900px wide so ensure that we have 45% extra and then determine the target height\r
-                $target_height = ($mobile_max_width / 0.55) * $image_ratio;\r
+                    // Create a cropped version of the image for mobile that cuts off the left 45% of the image\r
+                    // Make sure image is not wider than 900px when finished\r
+                    $mobile_max_width = 900;\r
+                    // Scale image, factoring in crop that will take place...\r
+                    // Image will be cropped to 900px wide so ensure that we have 45% extra and then determine the target height\r
+                    $target_height = ($mobile_max_width / 0.55) * $image_ratio;\r
 \r
-                if (stripos($image_path, '.oam') !== false || stripos($image_path, '.zip') !== false) {\r
-                    if (!isset($data['backgroundmobileimage'])) {\r
-                        $pict = $this->view->imageCms($image_path);\r
+                    if (stripos($image_path, '.oam') !== false || stripos($image_path, '.zip') !== false) {\r
+                        if (!isset($data['backgroundmobileimage'])) {\r
+                            $pict = $this->view->imageCms($image_path);\r
+                        } else {\r
+                            $pict = '<div class="desktopr">' . $this->view->imageCms($image_path) . '</div>';\r
+                            $pict .= '<div class="mobiler">' . $this->view->imageCms(CubeIT_View_Helper_ImageCms::getPath(CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']))) . '</div>';\r
+                        }\r
                     } else {\r
-                        $pict = '<div class="desktopr">' . $this->view->imageCms($image_path) . '</div>';\r
-                        $pict .= '<div class="mobiler">' . $this->view->imageCms(CubeIT_View_Helper_ImageCms::getPath(CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']))) . '</div>';\r
-                    }\r
-                } else {\r
-                    if (isset($data['backgroundmobileimage'])) {\r
-                        $bgmobileimage = CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']);\r
-                        if ($bgmobileimage) {\r
-                            $attributes['data-has-mobile'] = '1';\r
-                            $mobile_path = CubeIT_View_Helper_ImageCms::getPath($bgmobileimage);\r
-                            CubeIT_Image::getDimensions($mobile_path, $image_width, $image_height);\r
-                            $image_ratio = $image_height / $image_width;\r
-                            $attributes['data-mobile-ratio'] = $image_ratio;\r
-                            $target_height = $mobile_max_width * $image_ratio;\r
-                            $mobile = $this->imageProcess()->imageProcessGetURL($mobile_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');\r
+                        if (isset($data['backgroundmobileimage'])) {\r
+                            $bgmobileimage = CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']);\r
+                            if ($bgmobileimage) {\r
+                                $attributes['data-has-mobile'] = '1';\r
+                                $mobile_path = CubeIT_View_Helper_ImageCms::getPath($bgmobileimage);\r
+                                CubeIT_Image::getDimensions($mobile_path, $image_width, $image_height);\r
+                                $image_ratio = $image_height / $image_width;\r
+                                $attributes['data-mobile-ratio'] = $image_ratio;\r
+                                $target_height = $mobile_max_width * $image_ratio;\r
+                                $mobile = $this->imageProcess()->imageProcessGetURL($mobile_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');\r
+                            } else {\r
+                                $mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');\r
+                            }\r
                         } else {\r
                             $mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');\r
                         }\r
-                    } else {\r
-                        $mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');\r
-                    }\r
 \r
-                    $pict = $this->picture([\r
-                        [\r
-                            'src' => $image_path,\r
-                            'width' => 2560\r
+                        $pict = $this->picture([\r
+                            [\r
+                                'src' => $image_path,\r
+                                'width' => 2560\r
+                            ],\r
+                            [\r
+                                'src' => $mobile,\r
+                                'width' => $mobile_max_width,\r
+                                'media' => '(max-width: 900px)'\r
+                            ]\r
                         ],\r
-                        [\r
-                            'src' => $mobile,\r
-                            'width' => $mobile_max_width,\r
-                            'media' => '(max-width: 900px)'\r
-                        ]\r
-                    ],\r
-                        [\r
-                            'alt' => $data['title']\r
-                        ]);\r
-\r
-\r
+                            [\r
+                                'alt' => $data['title']\r
+                            ]);\r
+                    }\r
+                    $bg .= $this->htmlElement($pict, 'div', array('class' => 'picture'));\r
                 }\r
-                $bg = $this->htmlElement($pict, 'div', array('class' => 'picture'));\r
                 $content = $bg . $content;\r
             }\r
         }\r
index 4949d4a90c2d54b4c68b0ec84c01b3a3a847509b..854156e155e6185fba1bf76371840f264392321a 100644 (file)
@@ -5,6 +5,7 @@ function load_home() {
     $(window).on('fluidbookresize', resizeHome);\r
     resizeHome();\r
     initScrollify();\r
+    carouselIntro();\r
 \r
 \r
     // Bouncing scroll down arrow\r
@@ -246,3 +247,15 @@ function resizeHomeContact(ww, wh) {
     }\r
 \r
 }\r
+\r
+function carouselIntro() {\r
+    var tl = new TimelineMax({\r
+        repeat: -1,\r
+        repeatDelay: 5\r
+    });\r
+\r
+    tl.staggerTo(".intro .picture", 1.2, {\r
+        opacity: 1,\r
+    }, 5)\r
+\r
+}\r
index 0d1a6fa6d1f2bd94a7cf81ad1c56d047b34977f6..89a8a0142fbf89ea4d0bdace7b622fee5e23f8cf 100644 (file)
 \r
     // Make picture element behave like a background image so it doesn't overlap\r
     // the header area (image itself should have necessary whitespace included)\r
+    .picture {\r
+      opacity: 0;\r
+    }\r
+\r
     .picture picture img {\r
       height: 100%; // Needed along with width:100% so that object-fit works\r
       object-fit: contain;\r