Image handling in posts

static/cranefly/css/cranefly.css

@@ -926,7 +926,7 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .error-page .error-ban-expires{color:#cf402e;font-weight:bold;}
 .error-page .error-protips{margin-top:40px;}.error-page .error-protips a:link,.error-page .error-protips a:visited{background-color:#333333;border:1px solid #000000;border-radius:5px;margin:2px 10px;opacity:0.7;filter:alpha(opacity=70);padding:11px 19px;color:#ffffff;font-weight:bold;text-decoration:none;}
 .error-page .error-protips a:hover,.error-page .error-protips a:active{opacity:1;filter:alpha(opacity=100);}
-.markdown{margin:0px;}.markdown>:first-child{margin-top:0px;}
+.markdown{margin:0px;overflow:auto;}.markdown>:first-child{margin-top:0px;}
 .markdown>:last-child{margin-bottom:0px;}
 .markdown h1{font-size:28px;}
 .markdown h2{font-size:23.8px;}
@@ -938,6 +938,10 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .markdown blockquote>:last-child{margin-bottom:0px;}
 .markdown blockquote p{margin:0 0 10px;font-size:11.9px;}
 .markdown blockquote blockquote{background-color:#ffffff;border:1px solid #f2f2f2;border-radius:3px;padding:14px;}
+.markdown img{border-radius:3px;box-shadow:0px 0px 4px #555555;}
+.markdown .md-img{overflow:auto;}.markdown .md-img .md-img-span{margin:0px auto;float:none;}.markdown .md-img .md-img-span .md-img-wrap{background-color:#222222;border:1px solid #ffffff;border-radius:4px;box-shadow:0px 0px 2px #999999;margin:3px;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg{background-color:#ffffff;border-radius:3px;text-align:center;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg img{border-radius:3px;box-shadow:none;}
+.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;}.markdown .md-img .md-img-span .md-img-wrap .md-img-bg .md-img-error span{background-color:#333333;border-radius:5px;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{display:block;padding:7px 14px;text-align:center;color:#999999;font-weight:bold;}.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;}
 .index-sidebar{position:relative;bottom:9px;}
 .index-category{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.index-category table{margin:0px;}.index-category table caption{background-color:#3c85a3;border:1px solid #357690;border-radius:2px 2px 0px 0px;margin:-1px;padding:2px 10px;color:#ffffff;font-size:11.9px;font-weight:bold;text-align:left;text-shadow:0px 1px 0px #1a3946;}
 .index-category table .forum-icon{width:1%;}.index-category table .forum-icon .forum-icon-wrap{background-color:#555555;border:1px solid #3b3b3b;border-radius:3px;padding:3px 4px;}.index-category table .forum-icon .forum-icon-wrap.forum-icon-new{background-color:#cf402e;border:1px solid #a53325;}
@@ -1047,7 +1051,7 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .forum-threads-list .threads-actions{background-color:#fbfbfb;border-top:1px solid #d5d5d5;border-radius:0px 0px 2px 2px;overflow:auto;padding:4px;color:#999999;font-size:11.9px;}.forum-threads-list .threads-actions form{margin-bottom:0px;}
 .forum-threads-extra{overflow:auto;}.forum-threads-extra.extra-top{margin-bottom:20px;}
 .thread-buttons{overflow:auto;}.thread-buttons .pull-right{margin-left:14px;}
-.thread-body .post-wrapper .post-body{margin-bottom:20px;overflow:auto;}.thread-body .post-wrapper .post-body .user-avatar{border-radius:3px;float:left;width:100px;height:100px;}
+.thread-body .post-wrapper .post-body{margin-bottom:20px;overflow:auto;}.thread-body .post-wrapper .post-body .user-avatar{border-radius:5px;float:left;width:100px;height:100px;}
 .thread-body .post-wrapper .post-body .post-content{background-color:#ffffff;border:1px solid #e7e7e7;border-radius:5px;margin-left:121px;}.thread-body .post-wrapper .post-body .post-content .post-header{padding:7px 14px;padding-bottom:0px;color:grayLighter;}.thread-body .post-wrapper .post-body .post-content .post-header .post-author{color:#333333;font-weight:bold;}
 .thread-body .post-wrapper .post-body .post-content .post-header .post-author-label{text-shadow:none;}.thread-body .post-wrapper .post-body .post-content .post-header .post-author-label.post-label-guest{background-color:#eeeeee;color:#999999;}
 .thread-body .post-wrapper .post-body .post-content .post-header .separator{color:#eeeeee;font-size:17.5px;line-height:5px;}
@@ -1080,7 +1084,7 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .thread-body .post-checkpoints .post-checkpoint{text-align:center;margin-bottom:20px;}.thread-body .post-checkpoints .post-checkpoint hr{background-color:#999999;background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);-webkit-background-size:10px 10px;-moz-background-size:10px 10px;background-size:10px 10px;border:none;height:4px;margin-bottom:-12px;}
 .thread-body .post-checkpoints .post-checkpoint span{background-color:#fbfbfb;padding:0px 14px;color:#999999;}.thread-body .post-checkpoints .post-checkpoint span a{color:#333333;}
 .thread-body .post-checkpoints .post-checkpoint span i{opacity:0.43;filter:alpha(opacity=43);}
-.thread-moderation{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;overflow:auto;padding:7px;}.thread-moderation form{margin:0px;}
+.thread-moderation{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:3px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;overflow:auto;padding:7px;}.thread-moderation form{margin:0px;}
 .thread-quick-reply{overflow:auto;margin-top:20px;}.thread-quick-reply .user-avatar{border-radius:3px;float:left;width:125px;height:125px;}
 .thread-quick-reply .arrow{border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:14px solid #ffffff;float:left;width:0;height:0;position:relative;top:7px;left:15px;z-index:999;}
 .thread-quick-reply .editor{margin-left:153px;}

static/cranefly/css/cranefly/markdown.less

@@ -3,6 +3,7 @@
 
 .markdown {
   margin: 0px;
+  overflow: auto;
 
   &>:first-child {
     margin-top: 0px;
@@ -68,4 +69,68 @@
       padding: @baseFontSize;
     }
   }
+
+  img {
+    border-radius: @baseBorderRadius;
+    box-shadow: 0px 0px 4px @gray;
+  }
+
+  .md-img {
+    overflow: auto;
+
+    .md-img-span {
+      margin: 0px auto;
+      float: none;
+
+      .md-img-wrap {
+        background-color: @grayDarker;
+        border: 1px solid @white;
+        border-radius: @baseBorderRadius + 1px;
+        box-shadow: 0px 0px 2px @grayLight;
+        margin: 3px;
+
+        .md-img-bg {
+          background-color: @white;
+          border-radius: @baseBorderRadius;
+          text-align: center;
+
+          img {
+            border-radius: @baseBorderRadius;
+            box-shadow: none;
+          }
+
+          .md-img-error {
+            background: url('../img/img_broken.jpg');
+            border-radius: @baseBorderRadius;
+            padding: (@baseLineHeight * 2.5) 0px;
+
+            span {
+              background-color: @grayDark;
+              border-radius: @borderRadiusLarge;
+              .opacity(80);
+              padding: (@baseFontSize / 2) @baseFontSize;
+              margin: 0px auto;
+
+              color: @white;
+              text-shadow: 0px 1px 0px @black;
+            }
+          }
+        }
+
+        .md-img-label {
+          display: block;
+          padding: (@baseFontSize / 2) @baseFontSize;
+          text-align: center;
+
+          color: @grayLight;
+          font-weight: bold;
+
+          &:hover, &:active {
+            color: @white;
+            text-decoration: none;
+          }
+        }
+      }
+    }
+  }
 }

static/cranefly/css/cranefly/thread.less

@@ -18,7 +18,7 @@
       overflow: auto;
 
       .user-avatar {
-        border-radius: @baseBorderRadius;
+        border-radius: @borderRadiusLarge;
         float: left;
         width: 100px;
         height: 100px;
@@ -363,7 +363,7 @@
 .thread-moderation {
   background-color: @categoryBackground;
   border: 1px solid @categoryBorder;
-  border-radius: @borderRadiusSmall;
+  border-radius: @baseBorderRadius;
   .box-shadow(0px 0px 0px 3px @categoryShadow);
   margin-bottom: @baseLineHeight;
   overflow: auto;

static/cranefly/js/cranefly.js

@@ -52,15 +52,22 @@ $(function () {
 	
 	// Go back one page
 	$('.go-back').on('click', function (e) {
-	  history.go(-1)
+	    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>');
+    $(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" />'; });
 	});
+
+	// Handle prokened images
+  $('.markdown img').one('error', function() {
+  	$(this).after('<div class="md-img-error"><span>' + l_img_broken_msg + '</span></div>');
+  	$(this).hide();
+	}); 
 })

templates/cranefly/base.html

@@ -13,6 +13,9 @@
 
   	<script src="{{ STATIC_URL }}cranefly/js/jquery-1.7.2.min.js"></script>
   	<script src="{{ STATIC_URL }}cranefly/js/bootstrap.min.js"></script>
+    <script type="text/javascript">
+      var l_img_broken_msg = "{{ _('Image could not be loaded.') }}";
+    </script>
   	<script src="{{ STATIC_URL }}cranefly/js/cranefly.js"></script>{% block javascripts %}{% endblock %}
   </body>
 </html>