Image cropping support

MediaflowPlugin.php

@@ -6,19 +6,53 @@
 
 class MediaflowPlugin extends BasePlugin {
 
+    public function init()
+    {
+        craft()->on('entries.onBeforeSaveEntry', function($event)
+        {
+            $entry = $event->params['entry'];
+            $fieldLayout = $entry->getFieldLayout();
+            $fields = $fieldLayout->getFields();
+
+            foreach ($fields as $fieldLayoutField) {
+                $field = $fieldLayoutField->getField();
+                $isMediaField = $field->getFieldType() instanceof Mediaflow_MediaFieldType;
+                if (!$isMediaField) {
+                    continue;
+                }
+
+                $handle = $field->handle;
+                $fieldValue = $entry->$handle;
+                $supportsCrop = is_array($fieldValue->version) || $fieldValue->version instanceof \Traversable;
+                if ($supportsCrop) {
+                    $urls = $fieldValue->urls ?: array();
+                    foreach ($fieldValue->version as $name => $version) {
+                        $hash = null;
+                        if (isset($urls[$name]) && isset($urls[$name]['hash'])) {
+                            $hash = $urls[$name]['hash'];
+                        }
+                        $urls[$name] = $fieldValue->saveVersion($name, $entry->slug, $hash);
+                    }
+                    $fieldValue->urls = $urls;
+                    $entry->getContent()->setAttribute($handle, $fieldValue);
+                }
+            }
+        });
+    }
+
     public function getName()
     {
         return Craft::t('Mediaflow');
     }
 
     public function getVersion()
     {
-        return '0.1.2';
+        return '1.0.0-rc1';
     }
 
     public function getDeveloper()
     {
-        return 'KeyTeq Labs';
+        return 'Keyteq Labs';
     }
 
     public function getDeveloperUrl()
@@ -29,10 +63,11 @@ public function getDeveloperUrl()
 
     protected function defineSettings()
     {
+        $string = AttributeType::String;
         return array(
-            'url' => array(AttributeType::String, 'required' => true, 'label' => 'URL', 'default' => Craft::t('Mediaflow URL')),
-            'username' => array(AttributeType::String, 'required' => true, 'label' => 'Username', 'default' => Craft::t('Username')),
-            'apiKey' => array(AttributeType::String, 'required' => true, 'label' => 'API Key', 'default' => Craft::t('API key'))
+            'url' => array($string, 'required' => true, 'label' => 'URL', 'default' => Craft::t('Mediaflow URL')),
+            'username' => array($string, 'required' => true, 'label' => 'Username', 'default' => Craft::t('Username')),
+            'apiKey' => array($string, 'required' => true, 'label' => 'API Key', 'default' => Craft::t('API key'))
         );
     }
 

README.md

@@ -40,6 +40,9 @@ Craft CMS Keyteq Mediaflow plugin. Read more [Visit Mediaflow!](http://getmediaf
 </noscript>
 ```
 
-### Using Picturefill.js
-```
+If you use Interchange and have set crops for your image you can
+have Mediaflow build the interchange string straightup for you by specifying the crop aliases:
+
+```smarty
+<img data-interchange="{{media.interchange(['default','large'])}}">
 ```

composer.json

@@ -16,7 +16,7 @@
     ],
     "require": {
         "php": ">=5.3.0",
-        "keyteqlabs/keymedia": "~1.1",
+        "keyteqlabs/keymedia": "~1.2",
         "composer/installers": "~1.0"
     },
     "autoload": {

fieldtypes/Mediaflow_MediaFieldType.php

@@ -8,6 +8,11 @@ public function getName()
         return Craft::t('Mediaflow item');
     }
 
+    public function getSearchKeywords($value)
+    {
+        return 'mediaflow';
+    }
+
     public function getInputHtml($name, $value)
     {
         $id = craft()->templates->namespaceInputId($name);
@@ -17,16 +22,24 @@ public function getInputHtml($name, $value)
         return craft()->templates->render('mediaflow/input', array(
             'id' => $id,
             'name'  => $name,
+            'settings' => $this->getSettings(),
             'value' => $value ? $value->getAttributes() : $emptyDefaults,
             'emptyDefaults' => $emptyDefaults
         ));
     }
 
+    public function getStaticHtml($value)
+    {
+        $inputHtml = $this->getInputHtml($this->model->attributes['handle'], $value);
+        $inputHtml = preg_replace('/<(?:input|textarea|select|button)\s[^>]*/i', '$0 disabled', $inputHtml);
+
+        return $inputHtml;
+    }
+
     public function prepValue($value) {
         if (!$value) {
             return null;
         }
-        $data = array();
         $copy = array(
             'name' => 'name',
             'host' => 'host',
@@ -36,13 +49,19 @@ public function prepValue($value) {
             'thumbnailUrl' => 'thumb',
             'thumb' => 'thumb',
             '_id' => 'id',
-            'id' => 'id'
+            'id' => 'id',
+            'version' => 'version',
+            'versions' => 'versions',
+            'urls' => 'urls'
         );
+        $data = array();
         foreach ($copy as $now => $key) {
             if (isset($value[$now])) {
                 $data[$key] = $value[$now];
             }
         }
+        $data['fieldtype-settings'] = $this->getSettings();
+        $data['versions'] = $data['fieldtype-settings']['versions'];
         if (isset($value['file'])) {
             $file = $value['file'];
             $data['file'] = array(
@@ -56,6 +75,13 @@ public function prepValue($value) {
             );
         }
         $model = Mediaflow_MediaModel::populateModel($data);
+        if (!isset($data['shareUrl'])) {
+            $model->shareUrl = $model->url(array(
+                'width' => 2000,
+                'height' => 2000,
+                'crop' => false
+            ));
+        }
         return $model;
     }
 
@@ -70,6 +96,31 @@ public function prepValueFromPost($value)
         return $value;
     }
 
+    public function prepSettings($settings)
+    {
+        return array(
+            'versions' => json_decode($settings['versions']) ?: array()
+        );
+    }
+
+    public function defineSettings()
+    {
+        return array('versions' => AttributeType::Mixed);
+    }
+
+    /**
+	 * @inheritDoc ISavableComponentType::getSettingsHtml()
+	 *
+	 * @return string|null
+	 */
+	public function getSettingsHtml()
+	{
+		// If they are both selected or nothing is selected, the select showBoth.
+        return craft()->templates->render('mediaflow/fieldtype-settings', array(
+			'settings' => $this->getSettings()
+		));
+	}
+
     public function defineContentAttribute()
     {
         return AttributeType::Mixed;

models/Mediaflow_MediaModel.php

@@ -1,5 +1,6 @@
 <?php
 namespace Craft;
+use Keyteq\Keymedia\KeymediaClient;
 
 class Mediaflow_MediaModel extends BaseModel
 {
@@ -18,10 +19,80 @@ protected function defineAttributes()
 			'uploaded'    => AttributeType::Number,
 			'shareUrl'    => AttributeType::String,
 			'file' => AttributeType::Mixed,
+			'version' => AttributeType::Mixed,
+			'versions' => AttributeType::Mixed,
+			'urls' => AttributeType::Mixed,
 		));
 	}
 
-    public function url(array $options = array()) {
+    public function saveVersion($name, $slug, $checksum)
+    {
+        if (!isset($this->version[$name])) {
+            return null;
+        }
+        $data = $this->version[$name];
+        if (!is_array($data)) {
+            return null;
+        }
+        if (!isset($data['coords'])) {
+            $data = array('coords' => $data, 'width'=>100,'height'=>100);
+        }
+        list($x, $y, $w, $h) = $data['coords'];
+        list($basename) = explode('.', $this->name);
+        $hash = $this->getHash(array($x, $x+$w, $y, $y+$h));
+        if ($hash === $checksum) {
+            return null;
+        }
+        $payload = array(
+            'slug' => $slug . '-' . $basename . '-' . $name,
+            'width' => $data['width'],
+            'height' => $data['height'],
+            'coords' => array($x, $y, $x + $w, $y + $h)
+        );
+        $result = $this->_client()->addMediaVersion($this->id, $payload);
+        $response = $result['version'];
+        $response['hash'] = $hash;
+        return $response;
+    }
+
+    public function getHash($coords)
+    {
+        return md5(implode('-', $coords));
+    }
+
+    /**
+     * Example usage:
+     * <img data-interchange="{{image.interchange(['default','large'])}}">
+     * This only works if you have specified crops with these names, and those crops have been set
+     */
+    public function interchange($versions = array())
+    {
+        $output = array();
+        foreach ($versions as $name) {
+            $output[] = '[' . $this->versionUrl($name) . " ($name)]";
+        }
+        return implode(', ', $output);
+    }
+
+    public function versionUrl($name)
+    {
+        if (isset($this->urls[$name])) {
+            $data = $this->urls[$name]; $host = craft()->plugins->getPlugin('mediaflow')->getSettings()->url;
+            $path = $data['media'] . '/' . $data['slug'];
+            return $host . $path . $this->file['ending'];
+        }
+        else {
+            $version = $this->versions[$name];
+            list($width, $height) = $version;
+            return $this->url(compact('width', 'height'));
+        }
+    }
+
+    public function url($options = array())
+    {
+        if (is_string($options)) {
+            return $this->versionUrl($options);
+        }
         $options += array(
             'width' => false,
             'height' => false,
@@ -52,4 +123,9 @@ public function url(array $options = array()) {
         }
         return $url;
     }
+
+    protected function _client() {
+        $s = craft()->plugins->getPlugin('mediaflow')->getSettings();
+        return new KeymediaClient($s->username, $s->url, $s->apiKey);
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediaflow-craft",
-  "version": "0.0.6",
+  "version": "1.0.0-rc1",
   "description": "Mediaflow plugin for Craft",
   "main": "index.js",
   "scripts": {

resources/_mixin.scss

@@ -33,7 +33,6 @@
 	$color: #666;
 	background-color: #eee;
 	background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color), 
-	linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color);
-	background-size: 8px;
-	background-position:0 0, 4px 4px;
+	linear-gradient(135deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color);
+	background-size: 16px 16px;
 }