Skip to content

Commit bffaf63

Browse files
cotes2020cotes2020
committed
feat: support LQIP for images
1 parent ca41c7e commit bffaf63

File tree

5 files changed

+99
-70
lines changed

5 files changed

+99
-70
lines changed

‎_includes/refactor-content.html‎

Lines changed: 63 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -51,31 +51,51 @@
5151
{% assign _img_content = nil %}
5252
{% assign _img_snippets = _content | split: IMG_TAG %}
5353

54+
<!-- CDN URL -->
55+
{% if site.img_cdn %}
56+
{% if site.img_cdn contains '//' %}
57+
{% assign _path_prefix = site.img_cdn %}
58+
{% else %}
59+
{% assign _path_prefix = site.img_cdn | relative_url %}
60+
{% endif %}
61+
{% else %}
62+
{% assign _path_prefix = site.baseurl %}
63+
{% endif %}
64+
65+
<!-- Add image path -->
66+
{% if page.img_path %}
67+
{% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
68+
{% assign _path_prefix = _path_prefix | append: _path %}
69+
{% endif %}
70+
5471
{% for _img_snippet in _img_snippets %}
5572
{% if forloop.first %}
5673
{% assign _img_content = _img_snippet %}
5774
{% continue %}
5875
{% endif %}
5976

60-
{% assign _width = nil %}
61-
{% assign _height = nil %}
62-
{% assign _src = nil %}
63-
6477
{% assign _left = _img_snippet | split: '>' | first %}
6578
{% assign _right = _img_snippet | remove: _left %}
6679

67-
{% assign _left = _left | remove: ' /' %}
68-
{% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
80+
{% unless _left contains 'src=' %}
81+
{% continue %}
82+
{% endunless %}
83+
84+
{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
6985
{% assign _attrs = _left | split: ' ' %}
7086

87+
{% assign _width = nil %}
88+
{% assign _height = nil %}
89+
{% assign _lqip = nil %}
90+
7191
{% for _attr in _attrs %}
7292
{% assign _pair = _attr | split: '="' %}
7393
{% if _pair.size < 2 %}
7494
{% continue %}
7595
{% endif %}
7696

7797
{% capture _key %}{{ _pair | first }}{% endcapture %}
78-
{% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
98+
{% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
7999

80100
{% case _key %}
81101
{% when 'width' %}
@@ -84,67 +104,61 @@
84104
{% assign _height = _value %}
85105
{% when 'src' %}
86106
{% assign _src = _value %}
107+
{% when 'lqip' %}
108+
{% assign _lqip = _value %}
87109
{% endcase %}
88110

89-
{% if _width and _height and _src %}
90-
{% break %}
91-
{% endif %}
92111
{% endfor %}
93112

94-
{% if _src %}
95-
{% unless _src contains '://' %}
96-
<!-- Add CDN URL -->
97-
{% if site.img_cdn %}
98-
{% if site.img_cdn contains '//' %}
99-
{% assign _src_prefix = site.img_cdn %}
100-
{% else %}
101-
{% assign _src_prefix = site.img_cdn | relative_url %}
102-
{% endif %}
103-
{% else %}
104-
{% assign _src_prefix = site.baseurl %}
105-
{% endif %}
106-
107-
<!-- Add image path -->
108-
{% if page.img_path %}
109-
{% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
110-
{% assign _src_prefix = _src_prefix | append: _path %}
111-
{% endif %}
112-
113-
{% assign _final_src = _src_prefix | append: _src %}
114-
{% assign _left = _left | replace: _src, _final_src %}
113+
{% unless _src contains '//' %}
114+
{% assign _final_src = _path_prefix | append: _src %}
115+
{% capture _src_from %}"{{ _src }}"{% endcapture %}
116+
{% capture _src_to %}"{{ _final_src }}"{% endcapture %}
117+
{% assign _left = _left | replace: _src_from, _src_to %}
118+
{% endunless %}
115119

120+
{% if _lqip %}
121+
{% unless _lqip contains ':' %}
122+
{% assign _final_lqip = _path_prefix | append: _lqip %}
123+
{% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
124+
{% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
125+
{% assign _left = _left | replace: _lqip_from, _lqip_to %}
116126
{% endunless %}
117-
118-
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
119-
120-
{% if _left contains 'class=' %}
121-
{% assign _left = _left | replace: 'class="', 'class="lazyload ' %}
122-
{% else %}
123-
{% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %}
124-
{% endif %}
125-
126-
{% assign _left = _left | replace: 'src=', 'data-src=' %}
127-
128127
{% endif %}
129128

130-
<!-- Add SVG placehoder to prevent layout reflow -->
129+
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
130+
{% if _left contains 'class=' %}
131+
{% assign _left = _left | replace: 'class="', 'class="lazyload ' %}
132+
{% else %}
133+
{% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %}
134+
{% endif %}
131135
132-
{% if _width and _height %}
133-
{%- capture _svg -%}
134-
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
135-
{%- endcapture -%}
136+
{% assign _left = _left | replace: 'src=', 'data-src=' %}
136137
137-
{% assign _left = _svg | append: ' ' | append: _left %}
138+
<!-- add placeholder -->
139+
{% if _lqip %}
140+
{% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
141+
{% else %}
142+
{% if _width and _height %}
143+
<!-- Add SVG placehoder to prevent layout reflow -->
144+
{%- capture _svg -%}
145+
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
146+
{%- endcapture -%}
147+
{% assign _left = _svg | append: ' ' | append: _left %}
148+
{% endif %}
138149
{% endif %}
139150

140151
<!-- Bypass the HTML-proofer test -->
141152
{% assign _left = _left | append: ' data-proofer-ignore' %}
142153

154+
<!-- Combine -->
143155
{% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
144156

145157
{% endfor %}
146158

147-
{% assign _content = _img_content %}
159+
{% if _img_content %}
160+
{% assign _content = _img_content %}
161+
{% endif %}
148162

149163
{% endif %}
150164

‎_layouts/post.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,9 @@ <h1 data-toc-skip>{{ page.title }}</h1>
2727
{% endif %}
2828

2929
{% if page.image %}
30-
{% capture bg %}
31-
{% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
32-
{% endcapture %}
33-
3430
<div class="mt-3 mb-3">
35-
<img src="{{ page.image.path | default: page.image }}" class="preview-img {{ bg | strip }}"
31+
<img src="{{ page.image.path | default: page.image }}"
32+
class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"
3633
alt="{{ page.image.alt | default: "Preview Image" }}"
3734

3835
{% if page.image.width %}
@@ -45,12 +42,17 @@ <h1 data-toc-skip>{{ page.title }}</h1>
4542
height="{{ page.image.height }}"
4643
{% elsif page.image.h %}
4744
height="{{ page.image.h }}"
48-
{% endif %}>
45+
{% endif %}
46+
47+
{% if page.image.lqip %}
48+
lqip="{{ page.image.lqip }}"
49+
{% endif %}
50+
51+
><!-- endof img tag -->
4952

5053
{% if page.image.alt %}
5154
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
5255
{% endif %}
53-
5456
</div>
5557
{% endif %}
5658

‎_sass/addon/commons.scss‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -184,16 +184,27 @@ i { /* fontawesome icons */
184184
}
185185

186186
img[data-src] {
187-
margin: 0.5rem 0;
187+
@at-root #main #{&} {
188+
margin: 0.5rem 0;
189+
}
188190

189-
&.lazyload,
190-
&.lazyloading {
191-
opacity: 0;
191+
&[data-lqip="true"] {
192+
&.lazyload,
193+
&.lazyloading {
194+
filter: blur(20px);
195+
}
192196
}
193197

194-
&.lazyloaded {
195-
opacity: 1;
196-
transition: opacity 0.5s;
198+
&:not([data-lqip="true"]) {
199+
&.lazyload,
200+
&.lazyloading {
201+
opacity: 0;
202+
}
203+
204+
&.lazyloaded {
205+
opacity: 1;
206+
transition: opacity 0.5s;
207+
}
197208
}
198209

199210
&.left {
@@ -395,6 +406,10 @@ img[data-src] {
395406
margin-bottom: 1.5rem;
396407
}
397408

409+
img[data-src]:not(.normal):not(.left):not(.right) {
410+
@include align-center;
411+
}
412+
398413
a {
399414
&.img-link {
400415
@extend %no-cursor;
@@ -403,10 +418,6 @@ img[data-src] {
403418
/* created by `_includes/img-extra.html` */
404419
&.popup {
405420
cursor: zoom-in;
406-
407-
> img[data-src]:not(.normal):not(.left):not(.right) {
408-
@include align-center;
409-
}
410421
}
411422

412423
&:hover {

‎_sass/colors/dark-typography.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,10 @@
9696
--timeline-year-dot-color: var(--timeline-color);
9797

9898
.post img[data-src] {
99-
-webkit-filter: brightness(95%);
100-
filter: brightness(95%);
99+
&.lazyloaded {
100+
-webkit-filter: brightness(95%);
101+
filter: brightness(95%);
102+
}
101103
}
102104

103105
hr {

‎_sass/layout/post.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ img.preview-img {
3030
margin: 0;
3131
border-radius: 6px;
3232

33-
&.bg {
33+
&:not(.no-bg) {
3434
background: var(--preview-img-bg);
3535
}
3636
}

0 commit comments

Comments
 (0)