FEATURE: create hyperlinked images from the image insertion dialog

app/assets/javascripts/discourse/controllers/upload_selector_controller.js

@@ -10,10 +10,14 @@
 Discourse.UploadSelectorController = Discourse.Controller.extend(Discourse.ModalFunctionality, {
   remote: Em.computed.not("local"),
   local: false,
+  showMore: false,
 
   init: function() {
     this._super();
-    this.set("local", this.get("allowLocal"));
+    this.setProperties({
+      local: this.get("allowLocal"),
+      showMore: false
+    });
   },
 
   allowLocal: function() {
@@ -21,8 +25,9 @@ Discourse.UploadSelectorController = Discourse.Controller.extend(Discourse.Modal
   }.property(),
 
   actions: {
-    useLocal: function() { this.set("local", true); },
+    useLocal: function() { this.setProperties({ local: true, showMore: false}); },
-    useRemote: function() { this.set("local", false); }
+    useRemote: function() { this.set("local", false); },
+    toggleShowMore: function() { this.toggleProperty("showMore"); }
   }
 
 });

app/assets/javascripts/discourse/templates/modal/upload_selector.js.handlebars

@@ -16,11 +16,19 @@
     <label class="radio" for="remote">{{i18n upload_selector.from_the_web}}</label>
     {{#if remote}}
       <div class="inputs">
-        <input type="text" id="fileurl-input"><br>
+        <input type="text" id="fileurl-input" placeholder="http://example.com/image.png"><br>
         <span class="description">{{unbound view.tip}}</span>
       </div>
     {{/if}}
   </div>
+  {{#if showMore}}
+    <div class="radios">
+      <div class="inputs">
+        <input type="text" id="link-input" placeholder="http://example.com"><br>
+        <span class="description">{{i18n upload_selector.image_link}}</span>
+      </div>
+    </div>
+  {{/if}}
   <div class="radios">
     <div class="inputs">
       <p class="hint">{{unbound view.hint}}</p>
@@ -34,4 +42,5 @@
     {{i18n upload}}
   </button>
   <a {{action closeModal}}>{{i18n cancel}}</a>
+  {{#if remote}}<a {{action toggleShowMore}} class="pull-right">{{i18n show_more}}</a>{{/if}}
 </div>

app/assets/javascripts/discourse/views/modal/upload_selector_view.js

@@ -47,7 +47,14 @@ Discourse.UploadSelectorView = Discourse.ModalBodyView.extend({
       if (this.get("controller.local")) {
         $('#reply-control').fileupload('add', { fileInput: $('#filename-input') });
       } else {
-        this.get('controller.composerView').addMarkdown($('#fileurl-input').val());
+        var imageUrl = $('#fileurl-input').val();
+        var imageLink = $('#link-input').val();
+        var composerView = this.get('controller.composerView');
+        if (this.get("controller.showMore") && imageLink.length > 3) {
+          composerView.addMarkdown("<a href='" + imageLink + "'>\n  <img src='" + imageUrl + "'>\n</a>");
+        } else {
+          composerView.addMarkdown(imageUrl);
+        }
         this.get('controller').send('closeModal');
       }
     }

app/assets/stylesheets/desktop/upload.scss

@@ -6,7 +6,7 @@
   position: relative;
   left: -5px;
   bottom: -5px;
-  text-shadow: 
+  text-shadow:
    -1px -1px 0 $btn-primary-background-color,
     1px 1px 0 $btn-primary-background-color,
     1px -1px 0 $btn-primary-background-color,
@@ -19,7 +19,7 @@
     padding-left: 10px;
   }
   .radios {
-    margin: 0 0 25px 0;
+    height: 60px;
     .inputs {
       float: right;
       width: 75%;
@@ -40,4 +40,7 @@
       }
     }
   }
+  .radios:last-child {
+    height: 20px;
+  }
 }

config/locales/client.en.yml

@@ -611,6 +611,7 @@ en:
       hint: "(you can also drag & drop into the editor to upload them)"
       hint_for_chrome: "(you can also drag and drop or paste images into the editor to upload them)"
       uploading: "Uploading"
+      image_link: "enter the link you want your image to point to"
 
     search:
       title: "search for topics, posts, users, or categories"