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

PLT-991 Fixing height of embeded images

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 (

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}>`;

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;

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;

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;
+    }
 }