From 0efa582d77961e2a8c0c6be5b0aff23f5144b77a Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@tryghost.org>
Date: Fri, 31 Jan 2014 14:35:24 +0700
Subject: [PATCH] Better responsive images

Closes #76
---
 assets/css/screen.css | 31 +++++++++++++++++++++++++++--
 assets/js/index.js    | 46 ++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 8c901a3..1c0d38b 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -528,6 +528,12 @@ margin on the iframe, cause it breaks stuff. */
    5. Single Post - When you click on an individual post
    ========================================================================== */
 
+/* Stop .full-img from creating horizontal scroll - slight hack due to 
+   imperfections with browser width % calculations and rounding */
+.post-template .content {
+    overflow: hidden;
+}
+
 /* Tweak the .post wrapper style */
 .post-template .post {
     margin-top: 0;
@@ -551,12 +557,21 @@ margin on the iframe, cause it breaks stuff. */
     padding: 2.5rem 0;
 }
 
-/* Keep large images within the bounds of the post-width */
+/* Keep images centred and within the bounds of the post-width */
 .post-content img {
     display: block;
     max-width: 100%;
-    margin: 0 auto;
     height: auto;
+    margin: 0 auto;
+    padding: 0.6em 0;
+}
+
+/* Break out larger images to be wider than the main text column
+   the class is applied with jQuery */
+.post-content .full-img {
+    width: 126%;
+    max-width: none;
+    margin: 0 -13%;    
 }
 
 /* The author credit area after the post */
@@ -946,6 +961,18 @@ margin on the iframe, cause it breaks stuff. */
         padding: 30px 0;
     }
 
+    .post-content img {
+        padding: 0;
+    }
+
+    .post-content .full-img { 
+        width: auto;
+        width: calc(100% + 32px); /* expand with to image + margins */
+        margin: 0 -16px; /* get rid of margins */
+        min-width: 0;
+        max-width: 112%; /* fallback when calc doesn't work */
+    }
+
     .post-meta {
         font-size: 1.3rem;
     }
diff --git a/assets/js/index.js b/assets/js/index.js
index c015cb4..7ff84ba 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -10,6 +10,50 @@
 
         $(".post-content").fitVids();
 
+        function casperFullImg() {
+            $("img").each( function() {
+                var contentWidth = $(".post-content").outerWidth(); // Width of the content
+                var imageWidth = $(this)[0].naturalWidth; // Original image resolution
+
+                if (imageWidth >= contentWidth) {
+                    $(this).addClass('full-img');
+                } else {
+                    $(this).removeClass('full-img');
+                }
+            });
+        };
+
+        casperFullImg();
+        $(window).smartresize(casperFullImg);
+
     });
 
-}(jQuery));
\ No newline at end of file
+}(jQuery));
+
+(function($,sr){
+
+  // debouncing function from John Hann
+  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+  var debounce = function (func, threshold, execAsap) {
+      var timeout;
+
+      return function debounced () {
+          var obj = this, args = arguments;
+          function delayed () {
+              if (!execAsap)
+                  func.apply(obj, args);
+              timeout = null;
+          };
+
+          if (timeout)
+              clearTimeout(timeout);
+          else if (execAsap)
+              func.apply(obj, args);
+
+          timeout = setTimeout(delayed, threshold || 100);
+      };
+  }
+  // smartresize 
+  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
+
+})(jQuery,'smartresize');
\ No newline at end of file