Fix non-local images on client interface

css/osticket.css

@@ -27,3 +27,19 @@
 .pull-right {
     float: right;
 }
+
+.non-local-image {
+    display: inline-block;
+    border: 5px dashed #eee;
+}
+
+.non-local-image:after {
+    background: url(../assets/default/images/logo.png) center left no-repeat;
+    background-size: cover;
+    content: "";
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    display: block;
+    opacity: 0.3;
+}

include/client/view.inc.php

@@ -71,9 +71,9 @@ if($ticket->getThreadCount() && ($thread=$ticket->getClientThread())) {
         if($entry['thread_type']=='R' && ($cfg->hideStaffName() || !$entry['staff_id']))
             $poster = ' ';
         ?>
-        <table class="<?php echo $threadType[$entry['thread_type']]; ?>" cellspacing="0" cellpadding="1" width="800" border="0">
-            <tr><th><?php echo Format::db_datetime($entry['created']); ?> &nbsp;&nbsp;<span><?php echo $poster; ?></span></th></tr>
-            <tr><td class="thread-body"><?php echo Format::display($entry['body']); ?></td></tr>
+        <table class="thread-entry <?php echo $threadType[$entry['thread_type']]; ?>" cellspacing="0" cellpadding="1" width="800" border="0">
+            <tr><th><?php echo Format::db_datetime($entry['created']); ?> &nbsp;&nbsp;<span class="textra"></span><span><?php echo $poster; ?></span></th></tr>
+            <tr><td class="thread-body"><?php echo Format::viewableImages(Format::display($entry['body'])); ?></td></tr>
             <?php
             if($entry['attachments']
                     && ($tentry=$ticket->getThreadEntry($entry['id']))
@@ -105,7 +105,7 @@ if($ticket->getThreadCount() && ($thread=$ticket->getClientThread())) {
     <h2>Post a Reply</h2>
     <input type="hidden" name="id" value="<?php echo $ticket->getExtId(); ?>">
     <input type="hidden" name="a" value="reply">
-    <table border="0" cellspacing="0" cellpadding="3" width="800">
+    <table border="0" cellspacing="0" cellpadding="3" style="width:100%">
         <tr>
             <td colspan="2">
                 <?php

js/osticket.js

@@ -130,4 +130,60 @@ showImagesInline = function(urls, thread_id) {
             e.appendTo(caption);
         }
     });
+
+    var showNonLocalImage = function(div) {
+        var $div = $(div),
+            $img = $div.append($('<img>')
+              .attr('src', $div.data('src'))
+              .attr('alt', $div.attr('alt'))
+              .attr('title', $div.attr('title'))
+              .attr('style', $div.data('style'))
+            );
+        if ($div.attr('width'))
+            $img.width($div.attr('width'));
+        if ($div.attr('height'))
+            $img.height($div.attr('height'));
+    };
+
+    // Optionally show external images
+    $('.thread-entry').each(function(i, te) {
+        var extra = $(te).find('.textra'),
+            imgs = $(te).find('div.non-local-image[data-src]');
+        if (!extra) return;
+        if (!imgs.length) return;
+        extra.append($('<a>')
+          .addClass("action-button show-images")
+          .css({'font-weight':'normal'})
+          .text(' Show Images')
+          .click(function(ev) {
+            imgs.each(function(i, img) {
+              showNonLocalImage(img);
+              $(img).removeClass('non-local-image')
+                // Remove placeholder sizing
+                .css({'display':'inline-block'})
+                .width('auto')
+                .height('auto')
+                .removeAttr('width')
+                .removeAttr('height');
+              extra.find('.show-images').hide();
+            });
+          })
+          .prepend($('<i>')
+            .addClass('icon-picture')
+          )
+        );
+        imgs.each(function(i, img) {
+            var $img = $(img);
+            // Save a copy of the original styling
+            $img.data('style', $img.attr('style'));
+            $img.removeAttr('style');
+            // If the image has a 'height' attribute, use it, otherwise, use
+            // 40px
+            $img.height(($img.attr('height') || '40') + 'px');
+            // Ensure the image placeholder is visible width-wise
+            if (!$img.width())
+                $img.width(($img.attr('width') || '80') + 'px');
+            // TODO: Add a hover-button to show just one image
+        });
+    });
 }

js/redactor-osticket.js

@@ -76,7 +76,6 @@ RedactorPlugins.draft = {
 
         var self = this;
         getConfig().then(function(c) {
-            console.log(c);
             if (c.allow_attachments) {
                 self.opts.clipboardUploadUrl =
                 self.opts.imageUpload =