edryd.org

commit a2ea4b99fde28677b6d19d0392e794e9a46139fc
parent c957456e5db0e1e90fb0c457c7ec1f421b54f9d2
Author: Ed van Bruggen <edvb@uw.edu>
Date:   Fri, 18 Jun 2021 00:38:12 -0700

Use JustifiedGallery lib to show photo thumbnails

Diffstat:
M
content/photos/_index.md
 | 
12
++++++------
M
layouts/_default/baseof.html
 | 
10
++++++++++
M
layouts/index.html
 | 
20
++++++++------------
D
layouts/photos.html
 | 
0

M
layouts/shortcodes/photos.html
 | 
14
++++++--------
M
static/css/custom.css
 | 
6
------

6 files changed, 30 insertions(+), 32 deletions(-)
diff --git a/content/photos/_index.md b/content/photos/_index.md
@@ -3,9 +3,9 @@ title: photos
 ---
 
 <!-- TODO move photos to layout and make for loop -->
-{{< photos limit="9" dir="seattle">}}
-{{< photos limit="9" dir="quarantine">}}
-{{< photos limit="9" dir="galapagos">}}
-{{< photos limit="9" dir="britain">}}
-{{< photos limit="9" dir="france">}}
-{{< photos limit="9" dir="peru">}}
+{{< photos limit="5" dir="seattle">}}
+{{< photos limit="5" dir="quarantine">}}
+{{< photos limit="5" dir="galapagos">}}
+{{< photos limit="5" dir="britain">}}
+{{< photos limit="5" dir="france">}}
+{{< photos limit="5" dir="peru">}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -13,6 +13,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=EB+Garamond&family=Raleway:wght@800&display=swap">
     <link rel="stylesheet" href="{{ "css/lightbox.min.css" | relURL }}">
+    <link rel="stylesheet" href="{{ "css/justifiedGallery.min.css" | relURL }}">
     <link rel="stylesheet" href="{{ "css/theme.css" | relURL }}">
     <link rel="stylesheet" href="{{ "css/custom.css" | relURL }}">
     <link rel="shortcut icon" href="{{ "img/favicon.png" | relURL }}">
@@ -63,5 +64,14 @@
     <script src="{{ "js/jquery.min.js" | relURL }}"></script>
     <script src="{{ "js/bootstrap.bundle.min.js" | relURL }}"></script>
     <script src="{{ "js/lightbox.min.js" | relURL }}"></script>
+    <script src="{{ "js/jquery.justifiedGallery.min.js" | relURL }}"></script>
+    <script>
+      $(".photos").justifiedGallery({
+              rowHeight: 300,
+              margins: 3,
+              lastRow: 'justify',
+              captions: false
+            })
+    </script>
   </body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
@@ -77,25 +77,22 @@
       </div>
     </section>
 
+    <!-- TODO move above posts? -->
     <section id="photos" class="section-inverse slant-up">
       <div class="container clearfix">
         <div class="row">
           <div class="col-lg-12">
             <h2 class="heading">PHOTOS</h2>
-            <div class="row">
+            <div class="row photos">
               {{- $files := shuffle (readDir "/static/img/photos/best") }}
-              {{/* {{- $files := shuffle (readDir $files) */}}
-              {{- range first 9 $files -}}
+              {{- range first 5 $files -}}
                 {{- $imgURL := print "/img/photos/best/" .Name | relURL }}
-                <div class="col-md-4">
-                  <div class="box">
-                    <a href="{{ $imgURL }}" data-lightbox="image-1">
-                      <!-- TODO generate thumbnail -->
-                      <img src="{{ $imgURL }}" alt="image" class="img-card">
-                    </a>
-                  </div>
-                </div>
+                <a href="{{ $imgURL }}" data-lightbox="image-1">
+                  <!-- TODO generate thumbnail -->
+                  <img src="{{ $imgURL }}" alt="image">
+                </a>
               {{- end }}
+            </div>
             <div class="col-md-2 offset-md-5 btn-effect">
               <a class="btn btn-block" href="photos">
                 See More <i class="fa ml-2 fa-camera"></i>
@@ -103,7 +100,6 @@
             </div>
           </div>
         </div>
-      </div>
     </section>
 
     <section id="contact" style="background-color: #fff;" class="pb-4">
diff --git a/layouts/photos.html b/layouts/photos.html
diff --git a/layouts/shortcodes/photos.html b/layouts/shortcodes/photos.html
@@ -4,17 +4,15 @@
       {{ if lt (.Get "limit") 10 }}
         <h2 class="heading pt-5">{{ .Get "dir" | upper }}</h2>
       {{ end }}
-      <div class="row">
+      <div class="row photos">
         {{ $dir := (path.Join "/photos/" (replace (.Get "dir") " " "-")) }}
         {{ range first (.Get "limit") (readDir (path.Join "/static/img" $dir)) }}
           {{ $imgURL := path.Join "/img" $dir .Name | relURL }}
-          <div class="col-sm-4 p-2">
-            <a href="{{ $imgURL }}" data-lightbox="image-1">
-              <!-- TODO generate thumbnail -->
-              <!-- TODO fix for mobile not being full width -->
-              <img src="{{ $imgURL }}" alt="image" class="img-card">
-            </a>
-          </div>
+          {{ $thmURL := path.Join "/img" $dir "thumb." .Name | relURL }}
+          <a href="{{ $imgURL }}" data-lightbox="image-1">
+            <!-- TODO generate thumbnail -->
+            <img src="{{ $imgURL }}" alt="image">
+          </a>
         {{ end }}
       </div>
       <div class="row justify-content-center">
diff --git a/static/css/custom.css b/static/css/custom.css
@@ -23,12 +23,6 @@
   padding-top: 9rem !important;
 }
 
-.img-card {
-    width: 100%;
-    height: 15vw;
-    object-fit: contain;
-}
-
 .change-icon > .fa + .fa,
 .change-icon:hover > .fa {
   display: none;