Tag Cover Images

Closes #4506

Works just like the Post Cover Images (and uses the same component)
Tiny changes to the component ensures that we can reuse it across Ghost

core/client/assets/lib/uploader.js

@@ -147,6 +147,7 @@ UploadUi = function ($dropzone, settings) {
 
             // This is the start point if no image exists
             $dropzone.find('img.js-upload-target').css({display: 'none'});
+            $dropzone.find('div.description').show();
             $dropzone.removeClass('pre-image-uploader image-uploader-url').addClass('image-uploader');
             this.removeExtras();
             this.buildExtras();
@@ -170,6 +171,7 @@ UploadUi = function ($dropzone, settings) {
             $dropzone.find('.js-cancel').on('click', function () {
                 $dropzone.find('.js-url').remove();
                 $dropzone.find('.js-fileupload').removeClass('right');
+                $dropzone.trigger('imagecleared');
                 self.removeExtras();
                 self.initWithDropzone();
             });
@@ -211,10 +213,12 @@ UploadUi = function ($dropzone, settings) {
             // This is the start point if an image already exists
             $dropzone.removeClass('image-uploader image-uploader-url').addClass('pre-image-uploader');
             $dropzone.find('div.description').hide();
+            $dropzone.find('img.js-upload-target').show();
             $dropzone.append($cancel);
             $dropzone.find('.js-cancel').on('click', function () {
                 $dropzone.find('img.js-upload-target').attr({src: ''});
                 $dropzone.find('div.description').show();
+                $dropzone.trigger('imagecleared');
                 $dropzone.delay(2500).animate({opacity: 100}, 1000, function () {
                     self.init();
                 });

core/client/components/gh-uploader.js

@@ -18,7 +18,7 @@ var PostImageUploader = Ember.Component.extend({
             }
         });
 
-        $this.find('.js-cancel').on('click', function () {
+        $this.on('imagecleared', function () {
             self.sendAction('canceled');
         });
     }.on('didInsertElement'),

core/client/controllers/settings/tags.js

@@ -153,6 +153,14 @@ var TagsController = Ember.ArrayController.extend(PaginationMixin, {
 
         closeSubview: function () {
             this.set('isViewingSubview', false);
+        },
+
+        setCoverImage: function (image) {
+            this.saveActiveTagProperty('image', image);
+        },
+
+        clearCoverImage: function () {
+            this.saveActiveTagProperty('image', '');
         }
     }
 });

core/client/models/tag.js

@@ -10,7 +10,8 @@ var Tag = DS.Model.extend(NProgressSaveMixin, ValidationEngine, {
     description: DS.attr('string'),
     parent_id: DS.attr('number'),
     meta_title: DS.attr('string'),
-    meta_description: DS.attr('string')
+    meta_description: DS.attr('string'),
+    image: DS.attr('string')
 });
 
 export default Tag;

core/client/templates/components/gh-uploader.hbs

@@ -2,5 +2,5 @@
     <span class="hidden">Image Upload</span>
 </span>
 <img class="js-upload-target" {{bind-attr src=image}}>
-<div class="description">Add post image <strong></strong></div>
+<div class="description">{{description}}<strong></strong></div>
 <input data-url="upload" class="js-fileupload main fileupload" type="file" name="uploadimage">

core/client/templates/post-settings-menu.hbs

@@ -7,7 +7,7 @@
             <button class="close icon-x settings-menu-header-action" {{action "closeSettingsMenu"}}><span class="hidden">Close</span></button>
         </div>
         <div class="settings-menu-content">
-            {{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" image=image uploaderReference=uploaderReference tagName="section"}}
+            {{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" description="Add post image" image=image uploaderReference=uploaderReference tagName="section"}}
             <form>
             <div class="form-group">
                 <label for="url">Post URL</label>

core/client/templates/settings/tags/settings-menu.hbs

@@ -8,6 +8,7 @@
             </button>
         </div>
         <div class="settings-menu-content">
+            {{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" description="Add tag image" image=activeTag.image uploaderReference=uploaderReference tagName="section"}}
             <form>
                 <div class="form-group">
                     <label>Tag Name</label>
@@ -72,4 +73,4 @@
             </div>{{! .settings-menu-content }}
         {{/gh-tab-pane}}
     </div>{{! .settings-menu-pane }}
-{{/gh-tabs-manager}}
+{{/gh-tabs-manager}}

core/client/views/settings/tags/settings-menu.js

@@ -3,6 +3,21 @@ var TagsSettingsMenuView = Ember.View.extend({
         return this.get('controller.model.isNew') ?
             'Add Tag' :
             'Save Tag';
+    }),
+
+    // This observer loads and resets the uploader whenever the active tag changes,
+    // ensuring that we can reuse the whole settings menu.
+    updateUploader: Ember.observer('controller.activeTag.image', 'controller.uploaderReference', function () {
+        var uploader = this.get('controller.uploaderReference'),
+            image = this.get('controller.activeTag.image');
+
+        if (uploader && uploader[0]) {
+            if (image) {
+                uploader[0].uploaderUi.initWithImage();
+            } else {
+                uploader[0].uploaderUi.initWithDropzone();
+            }
+        }
     })
 });