diff --git a/app/assets/images/trans_bg.gif b/app/assets/images/trans_bg.gif
new file mode 100644
index 00000000000..c7e98e044f5
Binary files /dev/null and b/app/assets/images/trans_bg.gif differ
diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss
index 440bfed7b58..9cce5bd0389 100644
--- a/app/assets/stylesheets/sections/commits.scss
+++ b/app/assets/stylesheets/sections/commits.scss
@@ -133,9 +133,12 @@
.image {
display: inline-block;
margin:50px;
- padding:1px;
max-width:400px;
+ img{
+ background: url('trans_bg.gif');
+ }
+
&.diff_removed {
img{
border: 1px solid #C00;
diff --git a/app/views/commit/show.html.haml b/app/views/commit/show.html.haml
index d12fff96835..432d55b19e3 100644
--- a/app/views/commit/show.html.haml
+++ b/app/views/commit/show.html.haml
@@ -7,4 +7,19 @@
:javascript
$(function(){
PerLineNotes.init();
+ var w, h;
+ $('.diff_file').each(function(){
+ $('.image.diff_removed img', this).on('load', $.proxy(function(event){
+ var w = event.currentTarget.naturalWidth
+ , h = event.currentTarget.naturalHeight;
+ $('.image.diff_removed .image-info', this).append(' | W: ' + w + 'px | H: ' + h + 'px');
+ }, this));
+ $('.image.diff_added img', this).on('load', $.proxy(function(event){
+ var w = event.currentTarget.naturalWidth
+ , h = event.currentTarget.naturalHeight;
+ $('.image.diff_added .image-info', this).append(' | W: ' + w + 'px | H: ' + h + 'px');
+ }, this));
+
+ });
+
});