f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

feat: add shimmer background when image loads

Browse Source
This commit is contained in:
Cotes Chung
2022-12-13 21:41:32 +08:00
parent bffaf6374f
commit ab16fdc7fc
10 changed files with 207 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
_layouts/post.html
View File

@@ -27,32 +27,37 @@ tail_includes:
{% endif %}
{% if page.image %}
<div class="mt-3 mb-3">
<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" }}"
{% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
{% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
{% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %}
{% capture w %}
{% if page.image.width %}
width="{{ page.image.width }}"
{% elsif page.image.w %}
width="{{ page.image.w }}"
{% endif %}
{% endcapture %}
{% capture h %}
{% if page.image.height %}
height="{{ page.image.height }}"
{% elsif page.image.h %}
height="{{ page.image.h }}"
h="{{ page.image.h }}"
{% endif %}
{% endcapture %}
{% capture lqip %}
{% if page.image.lqip %}
lqip="{{ page.image.lqip }}"
{% endif %}
{% endcapture %}
><!-- endof img tag -->
{% if page.image.alt %}
<div class="mt-3 mb-3">
<img {{ src }} {{ class }} {{ w | strip }} {{ h | strip }} {{ lqip | strip }} {{ alt }}>
{%- if page.image.alt -%}
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
{% endif %}
{%- endif -%}
</div>
{% endif %}