Preload top-hero images

Author: larpo

_includes/head.html

@@ -17,6 +17,9 @@
     <link rel="stylesheet" href="/assets/css/beacon.css">
     {% endif %}
 
+    {% if page.preload_image %}
+    <link rel="preload" href="{{ page.preload_image | absolute_url }}" as="image">
+    {% endif %}
 
     <!-- Open Graph Tags-->
     <meta property="og:title" content="{{ page.title }}">

assets/css/beacon.scss

@@ -1,7 +1,10 @@
 ---
 ---
 .beacon-hero {
-  background-image: url(../img/beacon_banner.jpg);
+  background-image:
+      url(../img/beacon_banner.jpg),
+      //fallback while loading
+      linear-gradient(135deg, var(--primary-color) 60%, var(--accent-color) 90%);
   height: 500px;
 
   .hero-content {

assets/css/frontpage.scss

@@ -4,6 +4,8 @@
   background-image: linear-gradient(104.31deg, rgba(0, 0, 0, 0.76) 39%, rgba(230, 50, 53, 0.81) 90%),
   url(../img/frontpage_banner.jpg);
 
+  background-blend-mode: overlay, screen, overlay;
+
   height: 500px;
 }
 

assets/css/main.scss

@@ -60,7 +60,7 @@ html {
 .hero {
   height: 450px;
 
-  background-blend-mode: overlay;
+  background-color: black;
   background-size: cover;
   background-position: center;
 

beacon.html

@@ -2,6 +2,7 @@
 layout: frontpage
 title: SensorFu Beacon - Always know if your network leaks!
 description: SensorFu Ltd manufactures and sells advanced automatic security policy checks. SensorFu’s first product, SensorFu Beacon, assures the isolation of computer networks.
+preload_image: /assets/img/beacon_banner.jpg
 ---
 
 <div class="hero beacon-hero">

index.html

@@ -2,6 +2,7 @@
 layout: frontpage
 title: SensorFu Beacon - Always know if your network leaks!
 description: SensorFu Ltd manufactures and sells advanced automatic security policy checks. SensorFu’s first product, SensorFu Beacon, assures the isolation of computer networks.
+preload_image: /assets/img/frontpage_banner.jpg
 ---
 <div class="hero front-hero">
     <div class="container-xl">