Merge pull request #30 from harvardinformatics/gwct-banner-img

Rotating banner image
harvardinformatics · Oct 25, 2024 · cbc5c56 · cbc5c56
2 parents 1cff8ec + f966e8a
commit cbc5c56
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -47,7 +47,7 @@ jobs:
       - name: Run lychee
         uses: lycheeverse/lychee-action@v1.8.0
         with:
-          args: "--base . --cache --max-cache-age 30d --require-https --timeout 5 --exclude-path 'assets/home.html' --exclude 'anaconda.org' --exclude 'fonts.gstatic.com' --exclude 'www.microsoft.com/en-us/microsoft-365/onedrive/online-cloud-storage' --exclude-path 404.html -- './**/*.html' './**/*.css'"
+          args: "--base . --cache --max-cache-age 30d --max-concurrency 1 --require-https --timeout 5 --exclude-path 'assets/home.html' --exclude 'gnu.org' --exclude 'anaconda.org' --exclude 'fonts.gstatic.com' --exclude 'www.microsoft.com/en-us/microsoft-365/onedrive/online-cloud-storage' --exclude-path 404.html -- './**/*.html' './**/*.css'"
           fail: true
       - name: Save lychee cache
         uses: actions/cache/save@v3

diff --git a/docs/assets/home.html b/docs/assets/home.html
@@ -32,15 +32,20 @@
         /* background: linear-gradient(to bottom, var(--md-primary-fg-color), {{ config.home_gradient_hsla }} 99%, {{ config.home_gradient_hsla }} 99%); */
         /* This is used for the background gradient */
 
-        /* background-image: url(img/bg08.jpg); */
+        /* background-image: url(); */
         background-image: url(img/banners/IMG_7404.jpg);
-        background-repeat: no-repeat;
-        background-attachment: fixed;
         background-position: center center;
+        /* The default background if javascript is disabled */
+
+        background-repeat: no-repeat;
+        /* background-attachment: fixed; */
+
         background-clip: border-box;
         background-origin: padding-box;
-        -moz-background-size: cover;
-        background-size: cover;
+        /* -moz-background-size: cover;
+        background-size: cover; */
+        background-size: 100% auto !important;
+            -moz-background-size: 100% auto !important;
         /* This stuff is used for the background image */
     }
 
@@ -125,5 +130,31 @@
 </div>
 
 
+<script>
+    // Array of image paths
+    var images = [
+        {path: 'img/banners/IMG_1445.jpg', position: 'center 25%'}, 
+        {path: 'img/banners/IMG_1867.jpg', position: 'center 15%'},
+        {path: 'img/banners/IMG_2171.jpg', position: 'center 13%'},
+        {path: 'img/banners/IMG_2177.jpg', position: 'center 70%'},
+        {path: 'img/banners/IMG_3075.jpg', position: 'center 48%'},
+        {path: 'img/banners/IMG_6113.jpg', position: 'center 75%'},
+        {path: 'img/banners/IMG_6203.jpg', position: 'center 50%'},
+        {path: 'img/banners/IMG_7402-HDR.jpg', position: 'center 50%'},
+        {path: 'img/banners/IMG_7404.jpg', position: 'center 50%'}
+    ];
+
+    // Generate a random index
+    var index = Math.floor(Math.random() * images.length);
+
+    // Select an image path
+    var image = images[index];
+
+    // Set the background image
+    var banner = document.querySelector('.banner-row-container');
+    banner.style.backgroundImage = 'url(' + image.path + ')';
+    banner.style.backgroundPosition = image.position;
+</script>
+
 {% endblock %}