Skip to content

Commit

Permalink
feat: support LQIP for images
Browse files Browse the repository at this point in the history
  • Loading branch information
@cotes2020
cotes2020 committed Dec 14, 2022
1 parent ca41c7e commit bffaf63
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 70 deletions.
112 changes: 63 additions & 49 deletions _includes/refactor-content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,31 +51,51 @@
{% assign _img_content = nil %}
{% assign _img_snippets = _content | split: IMG_TAG %}

<!-- CDN URL -->
{% if site.img_cdn %}
{% if site.img_cdn contains '//' %}
{% assign _path_prefix = site.img_cdn %}
{% else %}
{% assign _path_prefix = site.img_cdn | relative_url %}
{% endif %}
{% else %}
{% assign _path_prefix = site.baseurl %}
{% endif %}

<!-- Add image path -->
{% if page.img_path %}
{% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
{% assign _path_prefix = _path_prefix | append: _path %}
{% endif %}

{% for _img_snippet in _img_snippets %}
{% if forloop.first %}
{% assign _img_content = _img_snippet %}
{% continue %}
{% endif %}

{% assign _width = nil %}
{% assign _height = nil %}
{% assign _src = nil %}

{% assign _left = _img_snippet | split: '>' | first %}
{% assign _right = _img_snippet | remove: _left %}

{% assign _left = _left | remove: ' /' %}
{% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
{% unless _left contains 'src=' %}
{% continue %}
{% endunless %}

{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
{% assign _attrs = _left | split: ' ' %}

{% assign _width = nil %}
{% assign _height = nil %}
{% assign _lqip = nil %}

{% for _attr in _attrs %}
{% assign _pair = _attr | split: '="' %}
{% if _pair.size < 2 %}
{% continue %}
{% endif %}

{% capture _key %}{{ _pair | first }}{% endcapture %}
{% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
{% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}

{% case _key %}
{% when 'width' %}
Expand All @@ -84,67 +104,61 @@
{% assign _height = _value %}
{% when 'src' %}
{% assign _src = _value %}
{% when 'lqip' %}
{% assign _lqip = _value %}
{% endcase %}

{% if _width and _height and _src %}
{% break %}
{% endif %}
{% endfor %}

{% if _src %}
{% unless _src contains '://' %}
<!-- Add CDN URL -->
{% if site.img_cdn %}
{% if site.img_cdn contains '//' %}
{% assign _src_prefix = site.img_cdn %}
{% else %}
{% assign _src_prefix = site.img_cdn | relative_url %}
{% endif %}
{% else %}
{% assign _src_prefix = site.baseurl %}
{% endif %}

<!-- Add image path -->
{% if page.img_path %}
{% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
{% assign _src_prefix = _src_prefix | append: _path %}
{% endif %}

{% assign _final_src = _src_prefix | append: _src %}
{% assign _left = _left | replace: _src, _final_src %}
{% unless _src contains '//' %}
{% assign _final_src = _path_prefix | append: _src %}
{% capture _src_from %}"{{ _src }}"{% endcapture %}
{% capture _src_to %}"{{ _final_src }}"{% endcapture %}
{% assign _left = _left | replace: _src_from, _src_to %}
{% endunless %}

{% if _lqip %}
{% unless _lqip contains ':' %}
{% assign _final_lqip = _path_prefix | append: _lqip %}
{% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
{% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
{% assign _left = _left | replace: _lqip_from, _lqip_to %}
{% endunless %}

<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->

{% if _left contains 'class=' %}
{% assign _left = _left | replace: 'class="', 'class="lazyload ' %}
{% else %}
{% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %}
{% endif %}
{% assign _left = _left | replace: 'src=', 'data-src=' %}
{% endif %}

<!-- Add SVG placehoder to prevent layout reflow -->
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
{% if _left contains 'class=' %}
{% assign _left = _left | replace: 'class="', 'class="lazyload ' %}
{% else %}
{% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %}
{% endif %}
{% if _width and _height %}
{%- capture _svg -%}
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
{%- endcapture -%}
{% assign _left = _left | replace: 'src=', 'data-src=' %}
{% assign _left = _svg | append: ' ' | append: _left %}
<!-- add placeholder -->
{% if _lqip %}
{% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
{% else %}
{% if _width and _height %}
<!-- Add SVG placehoder to prevent layout reflow -->
{%- capture _svg -%}
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
{%- endcapture -%}
{% assign _left = _svg | append: ' ' | append: _left %}
{% endif %}
{% endif %}

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

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

{% endfor %}

{% assign _content = _img_content %}
{% if _img_content %}
{% assign _content = _img_content %}
{% endif %}

{% endif %}

Expand Down
16 changes: 9 additions & 7 deletions _layouts/post.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,9 @@ <h1 data-toc-skip>{{ page.title }}</h1>
{% endif %}

{% if page.image %}
{% capture bg %}
{% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
{% endcapture %}

<div class="mt-3 mb-3">
<img src="{{ page.image.path | default: page.image }}" class="preview-img {{ bg | strip }}"
<img src="{{ page.image.path | default: page.image }}"
class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"
alt="{{ page.image.alt | default: "Preview Image" }}"

{% if page.image.width %}
Expand All @@ -45,12 +42,17 @@ <h1 data-toc-skip>{{ page.title }}</h1>
height="{{ page.image.height }}"
{% elsif page.image.h %}
height="{{ page.image.h }}"
{% endif %}>
{% endif %}

{% if page.image.lqip %}
lqip="{{ page.image.lqip }}"
{% endif %}

><!-- endof img tag -->

{% if page.image.alt %}
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
{% endif %}

</div>
{% endif %}

Expand Down
33 changes: 22 additions & 11 deletions _sass/addon/commons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,16 +184,27 @@ i { /* fontawesome icons */
}

img[data-src] {
margin: 0.5rem 0;
@at-root #main #{&} {
margin: 0.5rem 0;
}

&.lazyload,
&.lazyloading {
opacity: 0;
&[data-lqip="true"] {
&.lazyload,
&.lazyloading {
filter: blur(20px);
}
}

&.lazyloaded {
opacity: 1;
transition: opacity 0.5s;
&:not([data-lqip="true"]) {
&.lazyload,
&.lazyloading {
opacity: 0;
}

&.lazyloaded {
opacity: 1;
transition: opacity 0.5s;
}
}

&.left {
Expand Down Expand Up @@ -395,6 +406,10 @@ img[data-src] {
margin-bottom: 1.5rem;
}

img[data-src]:not(.normal):not(.left):not(.right) {
@include align-center;
}

a {
&.img-link {
@extend %no-cursor;
Expand All @@ -403,10 +418,6 @@ img[data-src] {
/* created by `_includes/img-extra.html` */
&.popup {
cursor: zoom-in;

> img[data-src]:not(.normal):not(.left):not(.right) {
@include align-center;
}
}

&:hover {
Expand Down
6 changes: 4 additions & 2 deletions _sass/colors/dark-typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,10 @@
--timeline-year-dot-color: var(--timeline-color);

.post img[data-src] {
-webkit-filter: brightness(95%);
filter: brightness(95%);
&.lazyloaded {
-webkit-filter: brightness(95%);
filter: brightness(95%);
}
}

hr {
Expand Down
2 changes: 1 addition & 1 deletion _sass/layout/post.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ img.preview-img {
margin: 0;
border-radius: 6px;

&.bg {
&:not(.no-bg) {
background: var(--preview-img-bg);
}
}
Expand Down

0 comments on commit bffaf63

Please sign in to comment.