Prettify images in posts.

static/sora/css/sora.css

@@ -1028,6 +1028,8 @@ td.lead-cell{color:#555555;font-weight:bold;}
 .markdown blockquote{background-color:#fcfcfc;border:1px solid #cccccc;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;padding:14px 16px;width:90%;margin-left:auto;margin-right:auto;}.markdown blockquote h3{margin:0px;margin-top:-10px;padding:0px;color:#555555;font-size:100%;}
 .markdown blockquote blockquote,.markdown blockquote pre{display:block;}
 .markdown pre{display:inline-block;width:90%;margin-left:auto;margin-right:auto;}.markdown pre pre{display:block;}
+.markdown .md-img{text-align:center;margin:24px auto;padding:0px;float:none;}.markdown .md-img img{-webkit-box-shadow:0px 0px 3px #999999;-moz-box-shadow:0px 0px 3px #999999;box-shadow:0px 0px 3px #999999;}
+.markdown .md-img .md-img-label{display:block;opacity:0.5;filter:alpha(opacity=50);padding:6px 0px;color:#333333;font-weight:bold;}.markdown .md-img .md-img-label:hover{opacity:1;filter:alpha(opacity=100);text-decoration:none;}
 .post-content{font-size:100%;}
 .signature{font-size:90%;}
 .clickable{cursor:pointer;}

static/sora/css/sora/markdown.less

@@ -41,6 +41,31 @@
       display: block;
     }
   }
+  
+  .md-img {
+    text-align: center;
+    margin: 24px auto;
+    padding: 0px;
+    float: none;
+    
+    img {
+      .box-shadow(0px 0px 3px @grayLight); 
+    }
+               
+    .md-img-label {
+      display: block;
+      .opacity(50);
+      padding: 6px 0px;
+      
+      color: @textColor;
+      font-weight: bold;
+      
+      &:hover {
+        .opacity(100);
+        text-decoration: none;
+      }
+    }
+  }
 }
 
 .post-content {

static/sora/js/sora.js

@@ -54,4 +54,13 @@ $(function () {
 	$('.go-back').on('click', function (e) {
 	  history.go(-1)
 	})
+	
+	// Add labels to images
+	$('.markdown img').each(function() {
+        $(this).addClass('img-rounded');
+        $(this).wrap(function() {
+            return '<div class="md-img span5" />';
+        });
+        $(this).after('<a href="' + $(this).attr('src') + '" class="md-img-label"><i class="icon-picture"></i> ' + $(this).attr('alt') + '</a>');
+	});
 })