files: render images inside the file view.

- instead of displaying binary message, render images icons and gifs
inside the preview pane.

rhodecode/lib/helpers.py

@@ -1812,9 +1812,24 b' def urlify_commit_message(commit_text, r'
     return literal(newtext)
 
 
+def render_binary(repo_name, file_obj):
+    """
+    Choose how to render a binary file
+    """
+    filename = file_obj.name
+
+    # images
+    for ext in ['*.png', '*.jpg', '*.ico', '*.gif']:
+        if fnmatch.fnmatch(filename, pat=ext):
+            alt = filename
+            src = url('files_raw_home', repo_name=repo_name,
+                      revision=file_obj.commit.raw_id, f_path=file_obj.path)
+            return literal('<img class="rendered-binary" alt="{}" src="{}">'.format(alt, src))
+
+
 def renderer_from_filename(filename, exclude=None):
     """
-    choose a renderer based on filename
+    choose a renderer based on filename, this works only for text based files
     """
 
     # ipython

rhodecode/public/css/code-block.less

@@ -199,7 +199,6 b' div.diffblock {'
     // BEGIN CODE-BODY STYLES
 
     .code-body {
-        background: white;
         padding: 0;
         background-color: #ffffff;
         position: relative;
@@ -491,6 +490,11 b' div.codeblock {'
         // to have the intended size and to scroll. Should be simplified.
         width: 100%;
         overflow-x: auto;
+
+        img.rendered-binary {
+            height: auto;
+            width: 100%;
+        }
     }
 }
 

rhodecode/templates/files/files_source.mako

@@ -57,9 +57,14 b''
     <div id="file_history_container"></div>
     <div class="code-body">
      %if c.file.is_binary:
+           <% rendered_binary = h.render_binary(c.repo_name, c.file)%>
+           % if rendered_binary:
+               ${rendered_binary}
+           % else:
            <div>
            ${_('Binary file (%s)') % c.file.mimetype}
            </div>
+           % endif
      %else:
         % if c.file.size < c.cut_off_limit:
             %if c.renderer and not c.annotate: