lazy img

Author: codebygina

_includes/featuredbox.html

@@ -3,17 +3,20 @@
 <div class="col-md-6 mb-30px">
     <div class="listfeaturedtag h-100">
         <div class="row h-100">
-            <div class="col-lg-5 col-md-12 pr-lg-0">
+            <div class="col-12 col-md-12 col-lg-5 pr-lg-0">
                 <div class="h-100">
                     <div class="wrapthumbnail">
                         <a href="{{ post.url | absolute_url }}">
-                            <span class="thumbnail d-block" style="background-image:url({% if post.image contains "://" %}{{ post.image }}{% else %}{{ post.image | absolute_url }}{% endif %});">
-                            </span>
+                            {% if site.lazyimages == "enabled" %}
+                            <img class="featured-box-img-cover lazyimg"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ post.image | absolute_url }}{% endif %}">
+                            {% else %}
+                            <img class="featured-box-img-cover" src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ post.image | absolute_url }}{% endif %}">
+                            {% endif %}
                         </a>
                     </div>
                 </div>
             </div>
-            <div class="col-lg-7 col-md-12">
+            <div class="col-12 col-md-12 col-lg-7">
                 <div class="h-100 card-group">
                     <div class="card">
                         <div class="card-body">

_includes/postbox.html

@@ -8,7 +8,7 @@
                 {% if post.image %} 
 
                     {% if site.lazyimages == "enabled" %}
-                        <img class="img-fluid lazyimg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ post.image | absolute_url }}{% endif %}" alt="{{ post.title }}"> 
+                        <img class="img-fluid lazyimg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ post.image | absolute_url }}{% endif %}" alt="{{ post.title }}"> 
                     {% else %}
                         <img class="img-fluid" src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ post.image | absolute_url }}{% endif %}" alt="{{ post.title }}"> 
                     {% endif %}

_layouts/default.html

@@ -207,13 +207,14 @@ <h2 class="d-md-block align-self-center py-1 font-weight-light">Explore <span cl
 <script src="{{ site.baseurl }}/assets/js/mediumish.js"></script>
 
 {% if site.lazyimages == "enabled" %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>
 <script src="{{ site.baseurl }}/assets/js/lazyload.js"></script>
 {% endif %}
 
 <script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script> 
 
+{% if page.layout == 'post' %}
 <script id="dsq-count-scr" src="//{{site.disqus}}.disqus.com/count.js"></script>
+{% endif %}
 
 </body>
 </html>

_layouts/post.html

@@ -47,7 +47,15 @@ <h1 class="posttitle">{{ page.title }}</h1>
             <!-- End Adsense -->
 
 			<!-- Post Featured Image -->
-			{% if page.image %}<img class="featured-image img-fluid" src="{% if page.image contains "://" %}{{ page.image }}{% else %}{{ page.image | absolute_url }}{% endif %}" alt="{{ page.title }}">{% endif %}
+            {% if page.image %}
+
+            {% if site.lazyimages == "enabled" %}
+            <img class="featured-image img-fluid lazyimg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII=" data-src="{% if page.image contains "://" %}{{ page.image }}{% else %}{{ page.image | absolute_url }}{% endif %}" alt="{{ page.title }}">
+            {% else %}
+            <img class="featured-image img-fluid" src="{% if page.image contains "://" %}{{ page.image }}{% else %}{{ page.image | absolute_url }}{% endif %}" alt="{{ page.title }}">
+            {% endif %}
+
+            {% endif %}
             <!-- End Featured Image -->
 
 

assets/css/screen.css

@@ -122,6 +122,23 @@ License: https://www.wowthemes.net/freebies-license/
      font-size:0.95rem;
      line-height:1.6;
      font-weight:400;
+}
+.featured-box-img-cover {
+    object-fit: cover;
+    width: 221px;
+    height: 290px;
+    max-height:100%;
+}
+@media (max-width: 1199px) {    
+    .featured-box-img-cover {
+        height: 333px;
+    }
+}
+@media (max-width:991px) {
+    .featured-box-img-cover {
+        height: auto;
+        width:100%;
+    }
 }
  .wrapfooter {
      font-size:12px;
@@ -297,12 +314,17 @@ License: https://www.wowthemes.net/freebies-license/
 .sticky-top-offset {
     top:100px;
 }
+
  @media (min-width:1024px) {    
      .share ul li {
          display:block;
     }
 }
+
  @media (max-width:999px) {
+    .featured-box-img-cover {
+        height: 359px;
+    }
      .alertbar {
          position:relative !Important;
          margin-bottom:20px;
@@ -334,19 +356,8 @@ License: https://www.wowthemes.net/freebies-license/
      .jumbotron {
         margin-bottom:0;
          border-radius: 0;
-    }
-     .listfeaturedtag .wrapthumbnail, .listfeaturedtag .col-md-7 {
-         width:100%;
-         max-width:100%;
-         -webkit-box-flex: 0;
-         -webkit-flex: 100%;
-         -ms-flex: 100%;
-         flex: 100%;
-    }
-     .listfeaturedtag .wrapthumbnail {
-         height:250px;
-    }
-     .listfeaturedtag .card {
+    }    
+    .listfeaturedtag .card {
          height:auto;
     }
      .listfeaturedtag .wrapfooter {
@@ -716,6 +727,3 @@ License: https://www.wowthemes.net/freebies-license/
   transition: opacity .25s;
 }
 
-
-
-      

assets/js/lazyload.js

@@ -254,4 +254,5 @@
   return lazyLoad;
 }));
 
-lazyLoad();
+lazyLoad();
+

assets/js/mediumish.js

@@ -1,5 +1,24 @@
 jQuery(document).ready(function($){
 
+    //fix for stupid ie object cover
+    if (document.documentMode || /Edge/.test(navigator.userAgent)) {
+      jQuery('.featured-box-img-cover').each(function(){
+          var t = jQuery(this),
+              s = 'url(' + t.attr('src') + ')',
+              p = t.parent(),
+              d = jQuery('<div></div>');
+  
+          p.append(d);
+          d.css({
+              'height'                : '290',
+              'background-size'       : 'cover',
+              'background-repeat'     : 'no-repeat',
+              'background-position'   : '50% 20%',
+              'background-image'      : s
+          });
+          t.hide();
+      });
+    }
 
     // alertbar later
     $(document).scroll(function () {