From 993fdf373e55ca77fdaf07433b5290ac3c0c6957 Mon Sep 17 00:00:00 2001
From: Sean Perry <sean.hyatt.perry@gmail.com>
Date: Tue, 9 Apr 2024 21:35:32 -0700
Subject: [PATCH] attempt to extend img_caption to include up to 3 images in a
 row

---
 _includes/img_caption.html    | 35 ++++++++++++++++++++++++++++++++++-
 projects/smartfin/smartfin.md | 21 ++++++++++++++++++---
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/_includes/img_caption.html b/_includes/img_caption.html
index 5d7a59b6..edc61250 100644
--- a/_includes/img_caption.html
+++ b/_includes/img_caption.html
@@ -1,6 +1,39 @@
 <div clas="captioned-img-container" style="width: fit-content; margin: auto; text-align: center;">
-    <img src="{{ include.src}}">
+    {% if include.src3 %}
+        <div class="img-container">
+            <img class="side_img" src="{{ include.src}}">
+            <img class="side_img" src="{{ include.src2}}">
+            <img class="side_img" src="{{ include.src3}}">
+        </div>
+    {% elsif include.src2 %}
+        <div class="img-container">
+            <img class="side_img" src="{{ include.src}}">
+            <img class="side_img" src="{{ include.src2}}">
+        </div>
+    {% else %}
+        <img src="{{ include.src}}">
+    {% endif %}
     <p class="caption">
         {{include.caption}}
     </p>
+
+    <style>
+        .img-container{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            height: 100%;
+        }
+
+        .side_img{
+            min-width: 0;
+            flex: 2 0 10%;
+            object-fit: cover;
+            width: auto;
+            min-height: 200px;
+            height: auto;
+        }
+    </style>
 </div>
\ No newline at end of file
diff --git a/projects/smartfin/smartfin.md b/projects/smartfin/smartfin.md
index ae48dbe1..823e9d0d 100644
--- a/projects/smartfin/smartfin.md
+++ b/projects/smartfin/smartfin.md
@@ -8,11 +8,20 @@ enable_nav: false
 # Quick Summary
 Smartfin brings surfers and scientists together to collect important oceanic data from coastlines by developing a surfboard fin that can passively collect information and seamlessly upload it to a cloud for use by scientists.
 
+{% include 
+    img_caption.html
+    src="assets/projects-smartfin-SF_internals_fullres-1074x604.jpg"
+    src2="assets/projects-smartfin-SF_finScripps_fullres.jpg"
+    caption='Images left to right from sciencemag.org and aquarium.ucsd.edu'
+%}
+
+<!-- 
+
 ![]({{"assets/projects-smartfin-SF_internals_fullres-1074x604.jpg" | absolute_url}}) 
 
 ![]({{"assets/projects-smartfin-SF_finScripps_fullres.jpg" | absolute_url}})
 
-Images left to right from [sciencemag.org](sciencemag.org) and [aquarium.ucsd.edu](aquarium.ucsd.edu)
+Images left to right from [sciencemag.org](sciencemag.org) and [aquarium.ucsd.edu](aquarium.ucsd.edu) -->
 
 <iframe width="800" height="475" src="https://www.youtube.com/embed/rY145HV-ReM" title="Smartfin: Surfing for Science" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
@@ -30,9 +39,15 @@ In the chart above, Smartfin user data is recorded in black on top verified temp
 Image courtesy of Dr. Tyler Cyronak, Scripps Institute of Oceanography
 Seen below is an early model of the Smartfin attached to a surfboard. This clear fin shows the battery, GPS, temperature sensor, and IMU (inertial measurement unit). The fin is still going through an iterative design process as more hardware is added to increase its capabilities. As seen on the photo to its right.
 
+{% include 
+    img_caption.html
+    src="assets/projects-smartfin-SF_seeThrough_fullres-1074x747.jpg"
+    src2="assets/projects-smartfin-SF_handFin_fullres.jpg"
+    caption="Images from surfrider.org"
+%}
 
-![]({{"assets/projects-smartfin-SF_seeThrough_fullres-1074x747.jpg" | absolute_url}}) ![]({{"assets/projects-smartfin-SF_handFin_fullres.jpg" | absolute_url}})
-Images from [surfrider.org](surfrider.org)
+<!-- ![]({{"assets/projects-smartfin-SF_seeThrough_fullres-1074x747.jpg" | absolute_url}}) ![]({{"assets/projects-smartfin-SF_handFin_fullres.jpg" | absolute_url}})
+Images from [surfrider.org](surfrider.org) -->
 
 # Technical
 Smartfin in its current state is very accurate at measuring sea surface temperature (SST) through its on board temperature sensor, as measured against a control of the Scripps Buoy. Recently, it has also shown that it can calculate certain wave statistics such as wave height very accurately as well.