Update

.jshintrc

@@ -0,0 +1,16 @@
+{
+  "bitwise": true,
+  "browser": true,
+  "curly": true,
+  "eqeqeq": true,
+  "eqnull": true,
+  "esnext": true,
+  "immed": true,
+  "jquery": true,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "node": true,
+  "strict": false,
+  "trailing": true
+}

Gruntfile.js

@@ -0,0 +1,119 @@
+'use strict';
+module.exports = function (grunt) {
+    require('load-grunt-tasks')(grunt);
+    require('time-grunt')(grunt);
+
+    var jsFileList = [
+        'bower_components/jquery.facedetection/dist/jquery.facedetection.js',
+        'assets/js/main.js'
+    ];
+
+    grunt.initConfig({
+        makepot: {
+            options: {
+                type: 'wp-plugin',
+                domainPath: 'languages',
+                potHeaders: {
+                    'report-msgid-bugs-to': 'https://github.com/interconnectit/my-eyes-are-up-here/issues',
+                    'language-team': 'LANGUAGE <EMAIL@ADDRESS>'
+                }
+            },
+            dist: {
+                options: {
+                    potFilename: 'my-eyes-are-up-here.pot',
+                    exclude: [
+                        'assets/.*'
+                    ]
+                }
+            }
+        },
+        checktextdomain: {
+            options: {
+                text_domain: 'my-eyes-are-up-here',
+                keywords: [
+                    '__:1,2d',
+                    '_e:1,2d',
+                    '_x:1,2c,3d',
+                    'esc_html__:1,2d',
+                    'esc_html_e:1,2d',
+                    'esc_html_x:1,2c,3d',
+                    'esc_attr__:1,2d',
+                    'esc_attr_e:1,2d',
+                    'esc_attr_x:1,2c,3d',
+                    '_ex:1,2c,3d',
+                    '_n:1,2,4d',
+                    '_nx:1,2,4c,5d',
+                    '_n_noop:1,2,3d',
+                    '_nx_noop:1,2,3c,4d'
+                ]
+            },
+            files: {
+                src: [
+                    '**/*.php',
+                    '!assets/**',
+                    '!bower_components/**',
+                    '!node_modules/**',
+                ],
+                expand: true
+            }
+        },
+        autoprefixer: {
+            options: {
+                browsers: [
+                    'last 2 versions',
+                    'ie 8',
+                    'ie 9',
+                    'android 2.3',
+                    'android 4',
+                    'opera 12'
+                ]
+            },
+            dist: {
+                src: 'assets/css/main.min.css'
+            }
+        },
+        cssmin: {
+            options: {
+                compatibility: 'ie8',
+                keepSpecialComments: '*',
+                noAdvanced: true
+            },
+            dist: {
+                files: [{
+                    expand: true,
+                    cwd: 'assets/css',
+                    src: ['*.css', '!*.min.css'],
+                    dest: 'assets/css',
+                    ext: '.min.css'
+                }]
+            }
+        },
+        jshint: {
+            options: {
+                jshintrc: '.jshintrc'
+            },
+            all: [
+                'Gruntfile.js',
+                'assets/js/*.js',
+                '!assets/js/scripts.min.js'
+            ]
+        },
+        uglify: {
+            options: {
+                preserveComments: 'some'
+            },
+            dist: {
+                src: jsFileList,
+                dest: 'assets/js/scripts.min.js'
+            }
+        },
+    });
+
+    grunt.registerTask('build', [
+        'makepot',
+        'autoprefixer',
+        'cssmin',
+        'jshint',
+        'uglify'
+    ]);
+};

README.md

@@ -0,0 +1,44 @@
+My eyes are up here
+===================
+
+Face detection for generating cropped thumbnails in WordPress. Avoiding automatically generated crotch shots since 2013.
+
+## Why would I want this?
+
+Consider a common problem with automatically generated thumbnails in WordPress themes. You need an image of a precise width and height to fit into the design but you never know what images people are uploading.
+
+You could control the width and height of the standard WP thumbnail sizes and let folks alter the crop as necessary themselves but if you have more than a few custom image sizes you can't alter the crop of those.
+
+Let's say you have a portrait image of someone and your theme needs a landscape crop of the image. WP centers the crop so you'll get an image of the persons crotch... Not ideal. I assume.
+
+This plugin detects faces in an image and centers the crop using an average of all the faces it finds.
+
+```
+Portrait image:
+
++-----------+
+|           |
+|     O     |
+|   --|--   |
+|     |     |
+|    | |    |
+|    | |    |
+|           |
++-----------+
+
+Cropped landscape version with default WP cropping:
+
++-----------+
+|   --|--   |
+|     |     |
+|    | |    |
++-----------+
+
+Cropped landscape version using this plugin:
+
++-----------+
+|           |
+|     O     |
+|   --|--   |
++-----------+
+```

assets/css/main.css

@@ -0,0 +1,108 @@
+.face-detect-panel {
+    margin-bottom: 15px;
+}
+
+.face-detection-ui {
+    overflow: hidden;
+}
+
+.face-detection-image {
+    position: relative;
+    overflow: hidden;
+    float: left;
+    max-width: 100%;
+}
+
+.face-detection-image.active {
+    cursor: crosshair;
+}
+
+.face-detection-image img {
+    max-width: 100%;
+    vertical-align: middle;
+    height: auto;
+    width: auto;
+}
+
+.face-detection-image .hotspot {
+    position: absolute;
+    max-width: 150px;
+    min-width: 10px;
+    height: 0;
+    border: 0px solid #ccc;
+    border: solid 1px rgba(230, 230, 230, .85);
+    background: rgba(255, 155, 155, .5);
+    border-radius: 50%;
+}
+
+.hotspot.face {
+    background: rgba(155, 155, 255, .5);
+}
+
+.hotspot.normal {
+    cursor: pointer;
+}
+
+.face-detect-panel .button {
+    margin-right: 5px;
+    margin-bottom: 5px;
+    display: inline-block;
+}
+
+.status.loading {
+    padding-left: 20px;
+    background: url(../img/spin.gif) no-repeat left center;
+    background-size: contain;
+}
+
+.found-faces img,
+.found-faces canvas {
+    position: static;
+    width: 40px;
+    height: auto;
+    margin: 10px 10px 0 0;
+    display: inline-block;
+}
+
+.post-thumbnail-preview {
+    background: #f5f5f5;
+    background-image: -webkit-gradient(linear, left bottom, left top, from(#f5f5f5), to(#fafafa));
+    background-image: -webkit-linear-gradient(bottom, #f5f5f5, #fafafa);
+    background-image: -moz-linear-gradient(bottom, #f5f5f5, #fafafa);
+    background-image: -o-linear-gradient(bottom, #f5f5f5, #fafafa);
+    background-image: linear-gradient(to top, #f5f5f5, #fafafa);
+    overflow: auto;
+    margin-bottom: 10px;
+    padding: 10px;
+    border: 1px solid #dfdfdf;
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 0.9;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.post-thumbnail-preview .preview-wrap {
+    display: inline-block;
+    margin-top: 5px;
+    margin-right: 5px;
+    background: url(../img/spin.gif) no-repeat center;
+}
+
+.post-thumbnail-preview .preview-wrap img {
+    max-width: 100%;
+    width: auto;
+    max-height: 50px;
+    height: auto;
+}
+
+.media-modal .compat-field-face_detection .label {
+    margin-right: 0;
+}
+
+.face-detect-large-hidden,
+.face-detect-large-hidden-copy {
+    position: absolute;
+    left: 9999px;
+    top: -9999px;
+}