Merge branch 'webp'

JakeSteam · Nov 30, 2024 · e12cc2b · e12cc2b
2 parents a7b4355 + c62553b
commit e12cc2b
Show file tree

Hide file tree

Showing 26 changed files with 52 additions and 23 deletions.
diff --git a/Gemfile b/Gemfile
@@ -10,6 +10,7 @@ group :jekyll_plugins do
     gem "jekyll-paginate"
     gem "jekyll-sitemap"
     gem "jekyll-seo-tag"
+    gem "jekyll-webp"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

diff --git a/_config.yml b/_config.yml
@@ -114,3 +114,12 @@ kramdown:
   syntax_highlighter_opts:
     default_lang: kotlin
     guess_lang: true
+
+# Webp conversion settings
+webp: 
+  enabled: true
+  quality: 95
+  img_dir: ["/images/banners"]
+  nested: true
+  regenerate: true # Set to true if settings have been changed
+  formats: [".jpeg", ".jpg", ".png"]
diff --git a/_includes/custom/webp.html b/_includes/custom/webp.html
@@ -0,0 +1,16 @@
+{% assign path = include.path %}
+
+{% assign image_parts = path | split: '.' %}
+{% assign extension_length = image_parts | last | size | plus: 1 %}
+{% assign base_path_length = path | size | minus: extension_length %}
+{% assign base_path = path | slice: 0, base_path_length %}
+
+{% assign webp_path = base_path | append: '.webp' %}
+{% assign webp_exists = site.static_files | where: "path", webp_path | first %}
+
+<picture class="bg-img">
+    {% if webp_exists %}
+    <source type="image/webp" srcset="{{ webp_path }}" >
+    {% endif %}
+    <img src="{{ path }}" alt="Preview image of article" />
+</picture>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -23,7 +23,7 @@ <h2 class="post-list-heading">{{ page.list_title }}</h2>
       {%- for post in posts -%}
       <li class="card">
         <a class="post-link" href="{{ post.url | relative_url }}">
-          <div class="bg-img" style="background-image: url({{post.image}})"></div>
+          {% include custom/webp.html path=post.image %}
         </a>
         <div class="content">
           <h3>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -4,7 +4,9 @@
 <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
 
   <header class="post-header">
-    <a href="{{page.image}}"><div class="bg-img" style="background-image: url({{page.image}})"></div></a>
+    <a href="{{page.image}}">
+      {% include custom/webp.html path=page.image %}
+    </a>
     <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
     <p class="post-meta">
       {%- assign display_date_format = site.minima.date_format | default: "%b %-d, %Y" -%}

diff --git a/_posts/2024-03-03-v1.0.11.md b/_posts/2024-03-03-v1.0.11.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.0.11 release notes
-image: /images/v1_0_11.png
+image: /images/banners/v1_0_11.png
 tags:
   - Minima
   - Jekyll

diff --git a/_posts/2024-03-14-v1.0.12.md b/_posts/2024-03-14-v1.0.12.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.0.12 release notes
-image: /images/v1_0_12_uncollapsed.png
+image: /images/banners/v1_0_12_uncollapsed.png
 tags:
   - Minima
   - Jekyll
@@ -20,7 +20,7 @@ Small update adding the ability to set table of contents as collapsed by default
 
 ## Collapsible site, expanded ToC (default)
 
-[![](/images/v1_0_12_uncollapsed.png)](/images/v1_0_12_uncollapsed.png)
+[![](/images/banners/v1_0_12_uncollapsed.png)](/images/banners/v1_0_12_uncollapsed.png)
 
 # H1
 

diff --git a/_posts/2024-03-15-v1.0.13.md b/_posts/2024-03-15-v1.0.13.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.0.13 release notes
-image: /images/v1_0_13_new.png
+image: /images/banners/v1_0_13_new.png
 tags:
   - Minima
   - Jekyll
@@ -11,4 +11,4 @@ Minor update to properly support GitHub pages (and migrate the example site to u
 
 |         GitHub Pages         |        GitHub Actions        |
 | :--------------------------: | :--------------------------: |
-| ![](/images/v1_0_13_old.png) | ![](/images/v1_0_13_new.png) |
+| ![](/images/v1_0_13_old.png) | ![](/images/banners/v1_0_13_new.png) |
diff --git a/_posts/2024-04-13-v1.0.14.md b/_posts/2024-04-13-v1.0.14.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.0.14 release notes
-image: /images/v1_0_14_banner.png
+image: /images/banners/v1_0_14_banner.png
 tags:
   - Minima
   - Jekyll

diff --git a/_posts/2024-08-24-v1.0.15.md b/_posts/2024-08-24-v1.0.15.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.0.15 release notes
-image: /images/v1_0_15.png
+image: /images/banners/v1_0_15.png
 tags:
   - Minima
   - Jekyll

diff --git a/_posts/2024-09-02-v1.0.16.md b/_posts/2024-09-02-v1.0.16.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.0.16 release notes
-image: /images/v1_0_16.png
+image: /images/banners/v1_0_16.png
 tags:
   - Minima
   - Jekyll

diff --git a/_posts/2024-10-08-v1.1.0.md b/_posts/2024-10-08-v1.1.0.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.1.0 release notes
-image: /images/v1_1_0.png
+image: /images/banners/v1_1_0.png
 tags:
   - Minima
   - Jekyll

diff --git a/_posts/2024-11-02-v1.1.1.md b/_posts/2024-11-02-v1.1.1.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.1.1 release notes
-image: /images/v1_1_1.png
+image: /images/banners/v1_1_1.png
 tags:
   - Minima
   - Jekyll

diff --git a/_posts/2024-11-10-v1.2.0.md b/_posts/2024-11-10-v1.2.0.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.2.0 release notes
-image: /images/v1_2_0.png
+image: /images/banners/v1_2_0.png
 tags:
   - Minima
   - Jekyll

diff --git a/_posts/2024-11-12-v1.3.0.md b/_posts/2024-11-12-v1.3.0.md
@@ -1,6 +1,6 @@
 ---
 title: minimaJake v1.3.0 release notes
-image: /images/v130-years.png
+image: /images/banners/v130-years.png
 tags:
   - Minima
   - Jekyll
@@ -11,7 +11,7 @@ This release adds an "outdated content warning" for older content, with basic cu
 
 |                       Years ago                       |                      Days ago                       |
 | :---------------------------------------------------: | :-------------------------------------------------: |
-| [![](/images/v130-years.png)](/images/v130-years.png) | [![](/images/v130-days.png)](/images/v130-days.png) |
+| [![](/images/banners/v130-years.png)](/images/banners/v130-years.png) | [![](/images/v130-days.png)](/images/v130-days.png) |
 
 By default, no warning is shown on any posts, however adding this to `_config.yml` will enable it:
 

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -21,22 +21,23 @@
 }
 
 .bg-img {
-  background-size: cover;
-  min-height: 180px;
-  background-position: center;
-  background-color: #fff;
+  height: 180px;
   border-radius: .17rem;
+  display: block;
+  overflow: hidden;
+}
+
+.bg-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .post-title {
   line-height: 1.3;
 }
 
 .post-header .bg-img {
-  background-size: cover;
-  min-height: 180px;
-  background-position: center;
-  background-color: #fff;
   border: 1px solid {{ site.accent_colour }};
 }
 

diff --git a/images/v130-years.png → images/banners/v130-years.png b/images/v130-years.png → images/banners/v130-years.png
diff --git a/images/v1_0_11.png → images/banners/v1_0_11.png b/images/v1_0_11.png → images/banners/v1_0_11.png
diff --git a/images/v1_0_12_uncollapsed.png → images/banners/v1_0_12_uncollapsed.png b/images/v1_0_12_uncollapsed.png → images/banners/v1_0_12_uncollapsed.png
diff --git a/images/v1_0_13_new.png → images/banners/v1_0_13_new.png b/images/v1_0_13_new.png → images/banners/v1_0_13_new.png
diff --git a/images/v1_0_14_banner.png → images/banners/v1_0_14_banner.png b/images/v1_0_14_banner.png → images/banners/v1_0_14_banner.png
diff --git a/images/v1_0_15.png → images/banners/v1_0_15.png b/images/v1_0_15.png → images/banners/v1_0_15.png
diff --git a/images/v1_0_16.png → images/banners/v1_0_16.png b/images/v1_0_16.png → images/banners/v1_0_16.png
diff --git a/images/v1_1_0.png → images/banners/v1_1_0.png b/images/v1_1_0.png → images/banners/v1_1_0.png
diff --git a/images/v1_1_1.png → images/banners/v1_1_1.png b/images/v1_1_1.png → images/banners/v1_1_1.png
diff --git a/images/v1_2_0.png → images/banners/v1_2_0.png b/images/v1_2_0.png → images/banners/v1_2_0.png