deliver different images depending on a media request

Author: dirkfabisch

_layouts/post.html

@@ -12,6 +12,9 @@
           <div class="post-image-image" style="background-image: url({% if page.image %}{{ page.image }}{% endif %})">
             Article Image
           </div>
+          <div class="post-image-image2" style="background-image: url({% if page.image2 %}{{ page.image2 }}{% endif %})">
+            Article Image
+          </div>
           <div class="post-meta">
             <h1 class="post-title">{{ page.title }}</h1>
             <div class="cf post-meta-text">

_posts/2014-11-30-mediator_features.markdown

@@ -5,6 +5,7 @@ date:   2014-11-30 14:34:25
 categories: mediator feature
 tags: featured
 image: /assets/article_images/2014-11-30-mediator_features/night-track.JPG
+image2: /assets/article_images/2014-11-30-mediator_features/night-track-mobile.JPG
 ---
 #Mediator Formats and CSS features
 

assets/article_images/2014-11-30-mediator_features/night-track-mobile.jpeg

@@ -240,16 +240,32 @@ body
     right: 0
     bottom: 0
     overflow: hidden
-    .post-image-image
-      background-size: cover
-      position: absolute
-      top: 0
-      left: 0
-      right: 0
-      bottom: 0
-      text-indent: -9999px
-      padding-top: 33%
-      z-index: 1
+    @media(min-width: 700px)
+      .post-image-image
+        background-size: cover
+        position: absolute
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        text-indent: -9999px
+        padding-top: 33%
+        z-index: 1
+      .post-image-image2
+        display: none
+    @media(max-width: 700px)
+      .post-image-image
+        display: none
+      .post-image-image2
+        background-size: cover
+        position: absolute
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        text-indent: -9999px
+        padding-top: 33%
+        z-index: 1
     .post-meta
       position: absolute
       bottom: $rs*5