From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 18 May 2017 14:47:51 +0000 (+0000)
Subject: WIP #1406 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a70f1e377e2595d7c5690a5daf588746b62fe496;p=fluidbook-v3.git

WIP #1406 @2
---

diff --git a/framework/application/views/helpers/BackgroundBlock.php b/framework/application/views/helpers/BackgroundBlock.php
index 8abf9ce..6924c31 100644
--- a/framework/application/views/helpers/BackgroundBlock.php
+++ b/framework/application/views/helpers/BackgroundBlock.php
@@ -25,9 +25,26 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract
 				$image_ratio = $image_height / $image_width;
 				$attributes['data-bg-ratio'] = $image_ratio;
 
-				$mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $image_width * 0.55, $image_height, array(), 'C', 'R', 'M');
+				// Create a cropped version of the image for mobile that cuts off the left 45% of the image
+                // Make sure image is not wider than 900px when finished
+                $mobile_max_width = 900;
+                // Scale image, factoring in crop that will take place...
+                // Image will be cropped to 900px wide so ensure that we have 45% extra and then determine the target height
+                $target_height = ($mobile_max_width / 0.55) * $image_ratio;
+                //$mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $image_width * 0.55, $image_height, array(), 'C', 'R', 'M');
+                $mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');
 
-				$bg = $this->htmlElement($this->picture(array(array('src' => $image_path, "width" => 1680), array("src" => $mobile, "width" => 1680, 'media' => '(max-width: 900px)'))), 'div', array('class' => 'picture'));
+				$bg = $this->htmlElement($this->picture([
+				    [
+				        'src' => $image_path,
+                        'width' => 1680
+                    ],
+                    [
+                        'src' => $mobile,
+                        'width' => 900,
+                        'media' => '(max-width: 900px)'
+                    ]
+                ]), 'div', array('class' => 'picture'));
 				$content = $bg . $content;
 			}
 		}