Move docs from gh-pages branch.

1 files changed, 34 insertions, 0 deletions

diff --git a/docs/_posts/2016-12-14-v2.0-exif-rotation-preview.md b/docs/_posts/2016-12-14-v2.0-exif-rotation-preview.md
new file mode 100644
index 000000000..8cbb9549d
--- /dev/null
+++ b/docs/_posts/2016-12-14-v2.0-exif-rotation-preview.md
@@ -0,0 +1,34 @@
+---
+layout: post
+title: Version 2.0 – EXIF rotation in JavaScript
+author: matthew
+---
+
+FixMyStreet has had a nice multiple image uploader since version 1.8. This uses
+multiple `input type=file` fields, progressively enhanced to add
+drag'n'drop, image preview, and uploading in the background whilst you fill in
+the rest of the form.
+
+<img src="https://cloud.githubusercontent.com/assets/739624/11398421/76c7c856-9378-11e5-9c25-971de271bd0c.gif" alt="">
+
+In version 1.8.4, we
+[patched](https://github.com/mysociety/fixmystreet/commit/4023ee86708f825b64e5f10bef31519ebfb0c5f8)
+the third party library we use, [dropzone](http://www.dropzonejs.com), to
+correctly orient photos in the image preview. We did this by including a
+cut-down version of [exif-js](https://github.com/exif-js/exif-js) to read in
+the EXIF orientation data, and then make sure we rotated the image as
+instructed in JavaScript before drawing the thumbnail preview. The rotation was
+accomplished by moving the image so its centre was over (0,0), rotating the
+appropriate amount, and then re-translating it back.
+
+<img src="https://cloud.githubusercontent.com/assets/8081877/16151581/b808b924-3495-11e6-8573-5e9828b3fa49.png" alt="" align="right" hspace="8">
+
+For this new version, we had a different bug to fix. If the user had uploaded a
+picture, submitted the form, and was shown the form again due to a server side
+error of some sort (some validation not caught by client-side validation, for
+example, or because you were logging in during the reporting process), the
+image for the preview was then being loaded from the server (where it had
+already been uploaded), not the client, and not displaying. We
+[patched the exif-js library](https://github.com/mysociety/fixmystreet/commit/7684ee064c717722003e920baed08d0230eb0d9e).,
+Now, if it is given a URL rather than a data: string, it will go off and fetch
+the image so that it can read out the orientation data.