From 716a44b2d7f72d190121fa1e15da1f0b17ec147c Mon Sep 17 00:00:00 2001
From: Jonathon Menz <jonomenz@gmail.com>
Date: Tue, 3 Jan 2017 07:34:33 -0800
Subject: [PATCH] NEW Preview size configurable

Preview size can now be configured, and field can be initialised without waiting for image to load.
---
 _config/config.yml           |  2 ++
 code/FocusPointField.php     | 19 ++++++++++++++++++-
 code/FocusPointImage.php     |  1 +
 css/FocusPointField.css      |  3 ---
 docs/en/advanced-usage.md    | 10 ++++++++++
 templates/FocusPointField.ss |  4 ++--
 6 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/_config/config.yml b/_config/config.yml
index 8ee7933..01fda5a 100644
--- a/_config/config.yml
+++ b/_config/config.yml
@@ -8,6 +8,8 @@ Image:
 
 #FocusPointField:
 #  debug: true
+#  max_width: 500
+#  max_height: 300
 #Injector:
 #  ImagickBackend:
 #    class: "FPImagickBackend"
diff --git a/code/FocusPointField.php b/code/FocusPointField.php
index d24b673..58b58b2 100755
--- a/code/FocusPointField.php
+++ b/code/FocusPointField.php
@@ -16,6 +16,22 @@ class FocusPointField extends FieldGroup
      */
     private static $debug = false;
 
+    /**
+     * Maximum width of preview image
+     *
+     * @var integer
+     * @config
+     */
+    private static $max_width = 300;
+
+    /**
+     * Maximum height of preview image
+     *
+     * @var integer
+     * @config
+     */
+    private static $max_height = 150;
+
     public function __construct(Image $image)
     {
         // Load necessary scripts and styles
@@ -25,8 +41,9 @@ public function __construct(Image $image)
         Requirements::css(FOCUSPOINT_DIR.'/css/FocusPointField.css');
 
         // Create the fields
+        $previewImage = $image->FitMax($this->config()->get('max_width'), $this->config()->get('max_height'));
         $fields = array(
-            LiteralField::create('FocusPointGrid', $image->renderWith('FocusPointField')),
+            LiteralField::create('FocusPointGrid', $previewImage->renderWith('FocusPointField')),
             TextField::create('FocusX'),
             TextField::create('FocusY'),
         );
diff --git a/code/FocusPointImage.php b/code/FocusPointImage.php
index 0b679da..f5ef4d7 100755
--- a/code/FocusPointImage.php
+++ b/code/FocusPointImage.php
@@ -213,6 +213,7 @@ public function calculateCrop($width, $height)
      * Get an image for the focus point CMS field.
      *
      * @return Image|null
+     * @deprecated 3.0
      */
     public function FocusPointFieldImage()
     {
diff --git a/css/FocusPointField.css b/css/FocusPointField.css
index a8aa973..ed3e119 100644
--- a/css/FocusPointField.css
+++ b/css/FocusPointField.css
@@ -7,7 +7,6 @@
 	position: relative;
 	left: 0;
 	top: 0;
-	max-width: 300px;
 }
 
 .focuspoint-field img {
@@ -15,8 +14,6 @@
 	margin: 0;
 	width: auto;
 	height: auto;
-	max-width: 100%;
-	max-height: 150px;
 }
 
 .focuspoint-field .grid {
diff --git a/docs/en/advanced-usage.md b/docs/en/advanced-usage.md
index c913121..d1fea8a 100644
--- a/docs/en/advanced-usage.md
+++ b/docs/en/advanced-usage.md
@@ -59,6 +59,16 @@ Ever made an image in a tile zoom in on roll over? You can make sure the zoom or
 <img src="$Link" style="transform-origin: $PercentageX% $PercentageY%" />
 ```
 
+## Make the CMS preview bigger or smaller
+
+You can change the preview size like so:
+
+```yml
+FocusPointField:
+  max_width: 500
+  max_height: 300
+```
+
 ## Partial cache busting
 
 If you are caching page content that includes a FocusFill and you edit the image (i.e. by changing the focus point) but not the page, you may want to invalidate the page's cache as the updated FocusFill will have a different filename. Gordon Banderson has written a [robust extension](https://github.com/gordonbanderson/weboftalent-imageeditpartialcachebust) to help you achieve this.
diff --git a/templates/FocusPointField.ss b/templates/FocusPointField.ss
index d911044..c248e85 100644
--- a/templates/FocusPointField.ss
+++ b/templates/FocusPointField.ss
@@ -1,4 +1,4 @@
-<div class="focuspoint-field">
-	<% with $FocusPointFieldImage %><img src="$link" alt="" width="$Width" height="$Height" /><% end_with %>
+<div class="focuspoint-field" style="width: {$Width}px; height: {$Height}px">
+	<img src="$Link" alt="" width="$Width" height="$Height" />
 	<div class="grid" title="Click on the subject of the image to ensure it is not lost during cropping"></div>
 </div>