From 1619238ee687a324a142d25d030134a2236f482c Mon Sep 17 00:00:00 2001
From: Karl Hobley <karl@torchbox.com>
Date: Wed, 12 Nov 2014 16:56:37 +0000
Subject: [PATCH 1/2] Fixed focal point indicator positioning

The focal point indicator is always positioned as a percentage inside
the div.focal-point-chooser block.

For thin images, the image may not exactly fill this block causing the
indicated focal point to be too wide and often not even cover the image.

This commit fixes this by making sure the width and height of the
div.focal-point-chooser block are always the same as the image, even if
the image is too small.
---
 .../wagtailimages/templates/wagtailimages/images/edit.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html
index 20a00511d..cd36f9f5c 100644
--- a/wagtail/wagtailimages/templates/wagtailimages/images/edit.html
+++ b/wagtail/wagtailimages/templates/wagtailimages/images/edit.html
@@ -50,13 +50,18 @@
         <div class="col5">
             <h2 class="label">{% trans "Focal point (optional)" %}</h2>
             <p>{% trans "To define this image's most important region, drag a box over the image below." %} {% if image.focal_point %}({% trans "Current focal point shown" %}){% endif %}</p>
+
+            {% image image max-800x600 as rendition %}
+
             <div class="focal-point-chooser"
+                style="max-width: {{ rendition.width }}px; max-height: {{ rendition.height }}px;"
                 data-focal-point-x="{{ image.focal_point_x }}"
                 data-focal-point-y="{{ image.focal_point_y }}"
                 data-focal-point-width="{{ image.focal_point_width }}"
                 data-focal-point-height="{{ image.focal_point_height }}">
 
-                {% image image max-800x600 data-original-width=image.width data-original-height=image.height %}
+                <img {{ rendition.attrs }} data-original-width="{{ image.width }}" data-original-height="{{ image.height }}">
+
                 <div class="current-focal-point-indicator{% if not image.focal_point %} hidden{% endif %}"></div>
             </div>
 

From af6bd8e195fb20b4761e6c32c1ad19bbcf8da321 Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Sat, 15 Nov 2014 16:55:55 +0100
Subject: [PATCH 2/2] Release note for #807

---
 CHANGELOG.txt           | 1 +
 docs/releases/0.8.2.rst | 1 +
 2 files changed, 2 insertions(+)

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index d9899672f..fdc4473b7 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -9,6 +9,7 @@ Changelog
  * Fix: Page system check for on_delete actions of ForeignKeys now only raises warnings, not errors
  * Fixed a regression where form builder submissions containing a number field would fail with a JSON serialisation error
  * Fix: Resizing an image with a focal point equal to the image size would result in a divide-by-zero error
+ * Fix: Focal point indicator would sometimes be positioned incorrectly for small or thin images
  * Fix: Elasticsearch configuration now supports specifying HTTP authentication parameters as part of the URL, and defaults to ports 80 (HTTP) and 443 (HTTPS) if port number not specified
 
 
diff --git a/docs/releases/0.8.2.rst b/docs/releases/0.8.2.rst
index 20072c7ee..b5eef25fd 100644
--- a/docs/releases/0.8.2.rst
+++ b/docs/releases/0.8.2.rst
@@ -19,6 +19,7 @@ Bug fixes
  * Page system check for on_delete actions of ForeignKeys now only raises warnings, not errors
  * Fixed a regression where form builder submissions containing a number field would fail with a JSON serialisation error
  * Resizing an image with a focal point equal to the image size would result in a divide-by-zero error
+ * Focal point indicator would sometimes be positioned incorrectly for small or thin images
  * Elasticsearch configuration now supports specifying HTTP authentication parameters as part of the URL, and defaults to ports 80 (HTTP) and 443 (HTTPS) if port number not specified