deliver different images depending on a media request

dirkfabisch · Jan 8, 2016 · b688df9 · b688df9
1 parent 76dea97
commit b688df9
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git a/_layouts/post.html b/_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">

diff --git a/_posts/2014-11-30-mediator_features.markdown b/_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
 

diff --git a/assets/article_images/2014-11-30-mediator_features/night-track-mobile.jpeg b/assets/article_images/2014-11-30-mediator_features/night-track-mobile.jpeg
diff --git a/css/main.sass b/css/main.sass
@@ -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