Changed ways user posted images are handled.

static/cranefly/css/cranefly.css

@@ -956,12 +956,7 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .markdown blockquote blockquote{background-color:#ffffff;border:1px solid #f2f2f2;border-radius:3px;padding:14px;}
 .markdown code{background-color:#333333;border:none;color:#eeeeee;font-size:14px;}
 .markdown pre{background-color:#222222;padding:7px 14px;}.markdown pre code{background:none;border:none;color:#eeeeee;font-size:11.9px;}
-.markdown img{background-color:#ffffff;border-radius:3px;box-shadow:0px 0px 3px #555555;margin:10px 0px;}
-.markdown .md-img{overflow:auto;margin:10px 0px;padding:4px;position:relative;right:4px;}.markdown .md-img .md-img-span{float:none;margin:0px;}.markdown .md-img .md-img-span .md-img-wrap{float:left;max-width:600px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg img{margin:0px;}
-.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error{background:url('../img/img_broken.jpg');border-radius:3px;padding:50px 0px;width:160px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error span{background-color:#333333;border-radius:3px;opacity:0.8;filter:alpha(opacity=80);padding:7px 14px;margin:0px auto;color:#ffffff;text-shadow:0px 1px 0px #000000;}
-.markdown .md-img .md-img-span .md-img-wrap .md-img-label{background:rgba(0, 0, 0, 0.8);border-radius:0px 0px 3px 3px;display:block;position:relative;bottom:26px;margin-bottom:-20px;opacity:0.5;filter:alpha(opacity=50);color:#eeeeee;font-size:10.5px;text-align:left;padding:3px 9px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-label:hover,.markdown .md-img .md-img-span .md-img-wrap .md-img-label:active{color:#ffffff;text-decoration:none;}
-.markdown .md-img .md-img-span .md-img-wrap:hover .md-img-label{opacity:1;filter:alpha(opacity=100);}
-.markdown blockquote .md-img-label{bottom:19px !important;}
+.markdown img{background-color:#ffffff;border-radius:3px;margin:10px 0px;}
 .markdown pre,.markdown blockquote,.markdown iframe{margin-top:20px;margin-bottom:20px;}.markdown pre>:first-child,.markdown blockquote>:first-child,.markdown iframe>:first-child{margin-top:0px;}
 .markdown pre>:last-child,.markdown blockquote>:last-child,.markdown iframe>:last-child{margin-bottom:0px;}
 .index-sidebar{position:relative;bottom:9px;}

static/cranefly/css/cranefly/markdown.less

@@ -95,85 +95,9 @@
   img {
     background-color: @white;
     border-radius: @baseBorderRadius;
-    box-shadow: 0px 0px 3px @gray;
     margin: (@baseLineHeight / 2) 0px;
   }
 
-  .md-img {
-    overflow: auto;
-    margin: (@baseLineHeight / 2) 0px;
-    padding: 4px;
-    position: relative;
-    right: 4px;
-
-    .md-img-span {
-      float: none;
-      margin: 0px;
-
-      .md-img-wrap {
-        float: left;
-        max-width: 600px;
-
-        .md-img-bg {
-          img {
-            margin: 0px;
-          }
-
-          .md-img-error {
-            background: url('../img/img_broken.jpg');
-            border-radius: @baseBorderRadius;
-            padding: (@baseLineHeight * 2.5) 0px;
-            width: 160px;
-
-            span {
-              background-color: @grayDark;
-              border-radius: @baseBorderRadius;
-              .opacity(80);
-              padding: (@baseFontSize / 2) @baseFontSize;
-              margin: 0px auto;
-
-              color: @white;
-              text-shadow: 0px 1px 0px @black;
-            }
-          }
-        }
-
-        .md-img-label {
-          background: fadeout(@black, 20);
-          border-radius: 0px 0px @baseBorderRadius @baseBorderRadius;
-          display: block;
-          position: relative;
-          bottom: @baseLineHeight + 6px;
-          margin-bottom: @baseLineHeight * -1;
-          .opacity(50);
-
-          color: @grayLighter;
-          font-size: @fontSizeMini;
-          text-align: left;
-          padding: 3px 9px;
-
-          &:hover, &:active {
-            color: @white;
-            text-decoration: none;
-          }
-        }
-
-        &:hover {
-          .md-img-label {
-            .opacity(100);
-          }
-        }
-      }
-    }
-  }
-
-  // Quoted image label
-  blockquote {
-    .md-img-label {
-      bottom: @baseLineHeight - 1px !important;
-    }
-  }
-
   // Blocks margins
   pre, blockquote, iframe {
     margin-top: @baseLineHeight;

static/cranefly/js/cranefly.js

@@ -76,11 +76,9 @@ function EnhancePostsMD() {
     // Add labels to images
     $('.markdown.js-extra img').each(function() {
       $(this).addClass('img-rounded');
-      $(this).wrap(function() { return '<div class="md-img" />'; });
-      $(this).wrap(function() { return '<div class="span5 md-img-span" />'; });
-      $(this).wrap(function() { return '<div class="md-img-wrap" />'; });
-      $(this).after('<a href="' + $(this).attr('src') + '" class="md-img-label" target="_blank">' + $(this).attr('alt') + '</a>');
-      $(this).wrap(function() { return '<div class="md-img-bg" />'; });
+      $(this).attr('title', $(this).attr('alt'));
+      $(this).tooltip({placement: 'top', container: 'body'});
+      $(this).wrap('<a href="' + $(this).attr('src') + '" target="_blank"/>');
     });
 
     // Handle prokened images