Skip to content

Commit 134c84f

Browse files
codebyginacodebygina
committed
lazy img
1 parent 6867494 commit 134c84f

File tree

7 files changed

+64
-24
lines changed

7 files changed

+64
-24
lines changed

‎_includes/featuredbox.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,20 @@
33
<div class="col-md-6 mb-30px">
44
<div class="listfeaturedtag h-100">
55
<div class="row h-100">
6-
<div class="col-lg-5 col-md-12 pr-lg-0">
6+
<div class="col-12 col-md-12 col-lg-5 pr-lg-0">
77
<div class="h-100">
88
<div class="wrapthumbnail">
99
<a href="{{ post.url | absolute_url }}">
10-
<span class="thumbnail d-block" style="background-image:url({% if post.image contains "://" %}{{ post.image }}{% else %}{{ post.image | absolute_url }}{% endif %});">
11-
</span>
10+
{% if site.lazyimages == "enabled" %}
11+
<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 %}">
12+
{% else %}
13+
<img class="featured-box-img-cover" src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ post.image | absolute_url }}{% endif %}">
14+
{% endif %}
1215
</a>
1316
</div>
1417
</div>
1518
</div>
16-
<div class="col-lg-7 col-md-12">
19+
<div class="col-12 col-md-12 col-lg-7">
1720
<div class="h-100 card-group">
1821
<div class="card">
1922
<div class="card-body">

‎_includes/postbox.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{% if post.image %}
99

1010
{% if site.lazyimages == "enabled" %}
11-
<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 }}">
11+
<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 }}">
1212
{% else %}
1313
<img class="img-fluid" src="{% if post.image contains "://" %}{{ post.image }}{% else %}{{ post.image | absolute_url }}{% endif %}" alt="{{ post.title }}">
1414
{% endif %}

‎_layouts/default.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,13 +207,14 @@ <h2 class="d-md-block align-self-center py-1 font-weight-light">Explore <span cl
207207
<script src="{{ site.baseurl }}/assets/js/mediumish.js"></script>
208208

209209
{% if site.lazyimages == "enabled" %}
210-
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>
211210
<script src="{{ site.baseurl }}/assets/js/lazyload.js"></script>
212211
{% endif %}
213212

214213
<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
215214

215+
{% if page.layout == 'post' %}
216216
<script id="dsq-count-scr" src="//{{site.disqus}}.disqus.com/count.js"></script>
217+
{% endif %}
217218

218219
</body>
219220
</html>

‎_layouts/post.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,15 @@ <h1 class="posttitle">{{ page.title }}</h1>
4747
<!-- End Adsense -->
4848

4949
<!-- Post Featured Image -->
50-
{% 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 %}
50+
{% if page.image %}
51+
52+
{% if site.lazyimages == "enabled" %}
53+
<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 }}">
54+
{% else %}
55+
<img class="featured-image img-fluid" src="{% if page.image contains "://" %}{{ page.image }}{% else %}{{ page.image | absolute_url }}{% endif %}" alt="{{ page.title }}">
56+
{% endif %}
57+
58+
{% endif %}
5159
<!-- End Featured Image -->
5260

5361

‎assets/css/screen.css‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,23 @@ License: https://www.wowthemes.net/freebies-license/
122122
font-size:0.95rem;
123123
line-height:1.6;
124124
font-weight:400;
125+
}
126+
.featured-box-img-cover {
127+
object-fit: cover;
128+
width: 221px;
129+
height: 290px;
130+
max-height:100%;
131+
}
132+
@media (max-width: 1199px) {
133+
.featured-box-img-cover {
134+
height: 333px;
135+
}
136+
}
137+
@media (max-width:991px) {
138+
.featured-box-img-cover {
139+
height: auto;
140+
width:100%;
141+
}
125142
}
126143
.wrapfooter {
127144
font-size:12px;
@@ -297,12 +314,17 @@ License: https://www.wowthemes.net/freebies-license/
297314
.sticky-top-offset {
298315
top:100px;
299316
}
317+
300318
@media (min-width:1024px) {
301319
.share ul li {
302320
display:block;
303321
}
304322
}
323+
305324
@media (max-width:999px) {
325+
.featured-box-img-cover {
326+
height: 359px;
327+
}
306328
.alertbar {
307329
position:relative !Important;
308330
margin-bottom:20px;
@@ -334,19 +356,8 @@ License: https://www.wowthemes.net/freebies-license/
334356
.jumbotron {
335357
margin-bottom:0;
336358
border-radius: 0;
337-
}
338-
.listfeaturedtag .wrapthumbnail, .listfeaturedtag .col-md-7 {
339-
width:100%;
340-
max-width:100%;
341-
-webkit-box-flex: 0;
342-
-webkit-flex: 100%;
343-
-ms-flex: 100%;
344-
flex: 100%;
345-
}
346-
.listfeaturedtag .wrapthumbnail {
347-
height:250px;
348-
}
349-
.listfeaturedtag .card {
359+
}
360+
.listfeaturedtag .card {
350361
height:auto;
351362
}
352363
.listfeaturedtag .wrapfooter {
@@ -716,6 +727,3 @@ License: https://www.wowthemes.net/freebies-license/
716727
transition: opacity .25s;
717728
}
718729

719-
720-
721-

‎assets/js/lazyload.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,4 +254,5 @@
254254
return lazyLoad;
255255
}));
256256

257-
lazyLoad();
257+
lazyLoad();
258+

‎assets/js/mediumish.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
11
jQuery(document).ready(function($){
22

3+
//fix for stupid ie object cover
4+
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
5+
jQuery('.featured-box-img-cover').each(function(){
6+
var t = jQuery(this),
7+
s = 'url(' + t.attr('src') + ')',
8+
p = t.parent(),
9+
d = jQuery('<div></div>');
10+
11+
p.append(d);
12+
d.css({
13+
'height' : '290',
14+
'background-size' : 'cover',
15+
'background-repeat' : 'no-repeat',
16+
'background-position' : '50% 20%',
17+
'background-image' : s
18+
});
19+
t.hide();
20+
});
21+
}
322

423
// alertbar later
524
$(document).scroll(function () {

0 commit comments

Comments
 (0)