NEW Preview size configurable

Preview size can now be configured, and field can be initialised without waiting for image to load.

_config/config.yml

@@ -8,6 +8,8 @@ Image:
 
 #FocusPointField:
 #  debug: true
+#  max_width: 500
+#  max_height: 300
 #Injector:
 #  ImagickBackend:
 #    class: "FPImagickBackend"

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'),
         );

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()
     {

css/FocusPointField.css

@@ -7,16 +7,13 @@
 	position: relative;
 	left: 0;
 	top: 0;
-	max-width: 300px;
 }
 
 .focuspoint-field img {
 	display: block;
 	margin: 0;
 	width: auto;
 	height: auto;
-	max-width: 100%;
-	max-height: 150px;
 }
 
 .focuspoint-field .grid {

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.

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>