Merge pull request #1290 from mattermost/fixed-embed-height

PLT-991 Fixing height of embeded images

5 files changed, 34 insertions, 3 deletions

diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index e1f495d54..e4094daf3 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -77,12 +77,12 @@ export default class PostBody extends React.Component {
         this.isGifLoading = true;
 
         const gif = new Image();
-        gif.src = src;
         gif.onload = (
             () => {
                 this.setState({gifLoaded: true});
             }
         );
+        gif.src = src;
     }
 
     createGifEmbed(link) {
@@ -92,7 +92,12 @@ export default class PostBody extends React.Component {
 
         if (!this.state.gifLoaded) {
             this.loadGif(link);
-            return null;
+            return (
+                <img
+                    className='gif-div placeholder'
+                    height='500px'
+                />
+            );
         }
 
         return (
diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx
index 179416ea0..f9416b2de 100644
--- a/web/react/utils/markdown.jsx
+++ b/web/react/utils/markdown.jsx
@@ -34,6 +34,11 @@ const highlightJsIni = require('highlight.js/lib/languages/ini.js');
 const Constants = require('../utils/constants.jsx');
 const HighlightedLanguages = Constants.HighlightedLanguages;
 
+function markdownImageLoaded(image) {
+    image.style.height = 'auto';
+}
+window.markdownImageLoaded = markdownImageLoaded;
+
 class MattermostInlineLexer extends marked.InlineLexer {
     constructor(links, options) {
         super(links, options);
@@ -132,6 +137,16 @@ class MattermostMarkdownRenderer extends marked.Renderer {
         return super.br();
     }
 
+    image(href, title, text) {
+        let out = '<img src="' + href + '" alt="' + text + '"';
+        if (title) {
+            out += ' title="' + title + '"';
+        }
+        out += ' onload="window.markdownImageLoaded(this)" class="markdown-inline-img"';
+        out += this.options.xhtml ? '/>' : '>';
+        return out;
+    }
+
     heading(text, level, raw) {
         const id = `${this.options.headerPrefix}${raw.toLowerCase().replace(/[^\w]+/g, '-')}`;
         return `<h${level} id="${id}" class="markdown__heading">${text}</h${level}>`;
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index feb392234..5c8313454 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -1,5 +1,6 @@
 #channel-header {
     padding: 3px 0;
+    height: 58px;
 }
 .row {
 	&.header {
@@ -42,6 +43,9 @@
 			text-overflow: ellipsis;
 			margin-top: 2px;
 			max-height: 45px;
+            .markdown-inline-img {
+                max-height: 45px
+            }
 		}
 		&.popover {
 			white-space: normal;
diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss
index 70c99f504..87e809694 100644
--- a/web/sass-files/sass/partials/_markdown.scss
+++ b/web/sass-files/sass/partials/_markdown.scss
@@ -8,6 +8,10 @@
 		margin-left: 4px;
 	}
 }
+.markdown-inline-img {
+    max-height: 500px;
+    height: 500px;
+}
 .post-body {
 	hr {
 		height: 4px;
diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss
index f6999d15c..bcfc28f19 100644
--- a/web/sass-files/sass/partials/_videos.scss
+++ b/web/sass-files/sass/partials/_videos.scss
@@ -56,5 +56,8 @@
     max-width: 450px;
     max-height: 500px;
     margin-bottom: 8px;
-    border-radius:5px
+    border-radius:5px;
+    &.placeholder {
+        height: 500px;
+    }
 }