Image preparation and styling. Refactor CSS to use inline `<style>` blocks and prepar...

diff --git a/framework/application/views/helpers/FeaturesSection.php b/framework/application/views/helpers/FeaturesSection.php
index 01e8bbdc61120909875783782a37bcb0926b7959..6fdc52acd84147655940e4baa2520552078ec381 100644 (file)
--- a/framework/application/views/helpers/FeaturesSection.php
+++ b/framework/application/views/helpers/FeaturesSection.php
@@ -12,11 +12,16 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
 
         foreach ($blocks as $block) {
 
-            $gradient = $this->_gradient($block['background_gradient']);
-            $background_colour = empty($block['background_gradient']['color1']) ? '' : 'background-color: '. $block['background_gradient']['color1'] .';';
-            $text_colour = $gradient ? 'light' : 'dark';
+            // Generate ID for CSS
+            $id = 'block-' . strtolower(CubeIT_Util_Text::str2URL($block['title']));
+
+            // Text colour is based on whether block has a gradient or not
+            $text_colour = $this->hasGradient($block) ? 'light' : 'dark';
+
+            $res .= '<div class="feature-block text-'. $text_colour .' '. $block['layout'] .'" id="'. $id .'">';
+
+            $res .= $this->_CSS($id, $block);
 
-            $res .= '<div class="feature-block text-'. $text_colour .' '. $block['layout'] .'" style="'. $background_colour . $gradient .'">';
             $res .= '<div class="feature-inner">';
 
             if (is_array($block['icon'])) {
@@ -38,10 +43,70 @@ class Fluidbook_View_Helper_FeaturesSection extends CubeIT_View_Helper_Abstract
         return $res;
     }
 
+    protected function hasGradient($block) {
+        $gradient = $block['background_gradient'];
+        return !(empty($gradient['color1']) || empty($gradient['color2']));
+    }
+
+    protected function hasBGImage($block) {
+        return is_array($block['background_image']);
+    }
+
+    protected function _CSS($id, $block) {
+
+        $gradient = $block['background_gradient'];
+        $res  = '<style scoped>';
+
+        $res .= "#$id {";
+        $res .= $this->_backgroundColour($block);
+
+        // Main CSS - block can have a bg image, a gradient, both or neither.
+        if ($this->hasBGImage($block)) {
+            $res .= $this->_backgroundImage($block);
+        } elseif ($this->hasGradient($block)) {
+            $res .= $this->_gradient($block);
+        }
+        
+        $res .= '}';
+
+        // Mobile version - swap background images for a gradient / solid colour
+        // Todo: consider using breakpoints instead of relying on .m class (to be decided depending on how other breakpoints are handled)
+        $res .= ".m #$id {";
+
+        if ($this->hasGradient($block)) {
+            $res .= $this->_gradient($block);
+        } else {
+            $res .= 'background-image: none;';
+        }
+
+        $res .= '}';
+        $res .= '</style>';
+
+        return $res;
+    }
+
+    protected function _backgroundColour($block) {
+        if (empty($block['background_gradient']['color1'])) {
+            return '';
+        }
+
+        return 'background-color: '. $block['background_gradient']['color1'] .';';
+    }
+
+    protected function _backgroundImage($block) {
+        if (!is_array($block['background_image'])) return '';
+
+        $path = CubeIT_View_Helper_ImageCms::getPath($block['background_image']);
+        
+        return "background-image: url('$path');";
+    }
+
+    protected function _gradient($block) {
+
+        $gradient = $block['background_gradient'];
 
-    protected function _gradient($gradient) {
         if (empty($gradient['color1']) || empty($gradient['color2'])) {
-            return false;
+            return '';
         }
         
         $angle = '45deg';

diff --git a/less/410-features.less b/less/410-features.less
index ba6def82e4348372228cd751e045d223f66fb9b1..4959a3e54c620ec4a845bc864945dfb5be45a72b 100644 (file)
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -7,16 +7,28 @@
 .feature-block {
   position: relative;
   overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 100%;
 
   // Block layouts
   &.rectangle-right, &.rectangle-bottom {
     width: percentage(3/6);
     padding-bottom: percentage(2/6); // 3:2 aspect ratio
   }
+  &.rectangle-right {
+    background-position: center right;
+  }
+  &.rectangle-bottom, &.square-bottom {
+    background-position: center bottom;
+  }
+
   &.square-top, &.square-bottom {
     width: percentage(2/6);
     padding-bottom: percentage(2/6); // 1:1 aspect ratio
   }
+  &.square-top {
+    background-position: center top;
+  }
 
   &.small-rectangle-tall {
     width: percentage(1/6);
@@ -52,7 +64,7 @@
 
   .square-top & {
     margin-top: 50%;
-
+    padding-top: 30px;
   }
 }