use photo thumbnails instead of full res; minor edits

waggle-sensor · Nov 7, 2023 · 6f7d3f8 · 6f7d3f8
1 parent 464feab
commit 6f7d3f8
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 25 deletions.
diff --git a/src/components/PhotoIndex.tsx b/src/components/PhotoIndex.tsx
@@ -2,7 +2,6 @@ import React, {useEffect, useState} from 'react'
 import styled from 'styled-components'
 import { Link, useLocation } from 'react-router-dom'
 
-
 import Card from '@mui/material/Card'
 
 
@@ -46,18 +45,19 @@ type LinkCardProps = {
   title: string
   src: string
   link: string
+  alt?: string
   description?: string
 }
 
 export function LinkCard(props: LinkCardProps) {
-  const {title, src, link} = props
+  const {title, src, link, alt} = props
   return (
     <Card
       className="card z-0 relative"
       component={Link}
       to={link}
     >
-      <img src={src} className="max-w-[256px] md:max-w-[220px] md:max-h-[220px]" />
+      <img src={src} alt={alt} className="max-w-[256px] md:max-w-[220px] md:max-h-[220px]" />
       <h3 className="text-white absolute left-4 bottom-0 z-10">{title}</h3>
     </Card>
   )
@@ -87,7 +87,6 @@ export default function FileIndex(props: Props) {
         })
 
         const files = await listAllFiles(gapi, folderId)
-        console.log('files', files)
 
         setFiles(files)
       }
@@ -97,28 +96,29 @@ export default function FileIndex(props: Props) {
 
 
   return (
-    <Root className="flex flex-wrap gap-2">
+    <Root className="flex flex-wrap gap-2 mx-auto">
       {!collection && files &&
         Object.keys(files).map(folderName => {
           const filesByName = files[folderName]
-          const {id} = Object.values(filesByName)[0]
+          const {id, name} = Object.values(filesByName)[0]
 
           return (
             <LinkCard
               key={id}
               title={folderName}
               link={`/photos?collection=${folderName}`}
-              src={`https://drive.google.com/uc?export=view&id=${id}`}
+              src={`https://drive.google.com/thumbnail?id=${id}`}
+              alt={name}
             />
           )
         })
       }
 
       {collection && files &&
         <div className="flex flex-wrap gap-2">
-          {Object.values(files[collection]).map(({id}) =>
-            <img key={id} src={`https://drive.google.com/uc?export=view&id=${id}`} />)
-          }
+          {Object.values(files[collection]).map(({id, name}) =>
+            <img key={id} src={`https://drive.google.com/thumbnail?id=${id}`} alt={name} />
+          )}
         </div>
       }
     </Root>

diff --git a/src/pages/Photos.tsx b/src/pages/Photos.tsx
@@ -13,21 +13,17 @@ export default function Photos() {
   return (
     <Layout
       title="Photo Gallery"
-      description="Photos of Node deployements, student activities, and more"
+      description="Photos of Node deployments, student activities, and more"
     >
       <div className="md:max-w-screen-md lg:max-w-screen-lg mx-auto my-10">
-        <div className="flex">
-          <div>
-            <h1>
-              {collection ?
-                <><a href="/photos">Photos</a> / {collection}</> :
-                'Photo Galleries'
-              }
-            </h1>
-            <div>
-              <PhotoIndex driveFolderID="1zGnN-9HC_g180EimPgoBu9x5zYqpnKvQ" />
-            </div>
-          </div>
+        <h1>
+          {collection ?
+            <><a href="/photos">Photos</a> / {collection}</> :
+            'Photo Galleries'
+          }
+        </h1>
+        <div>
+          <PhotoIndex driveFolderID="1zGnN-9HC_g180EimPgoBu9x5zYqpnKvQ" />
         </div>
       </div>
     </Layout>

diff --git a/src/pages/Science.tsx b/src/pages/Science.tsx
@@ -68,7 +68,7 @@ export default function Science() {
             src={require('@site/static/img/science/snow-detection.jpg').default}
           />
           <LinkCard
-            title="Scalable Edge Computing at APS"
+            title="Scalable AI@Edge computing at Argonne APS"
             link="/science/scalable-ci-in-aps"
             src={require('@site/static/img/science/scalable-ci-in-aps-icon.png').default}
           />

diff --git a/src/pages/science/smoke-detection.md b/src/pages/science/smoke-detection.md
@@ -1,4 +1,4 @@
-# Wildfire classifier
+# Wildfire Classifier
 
 ![](imgs/smoke_wildfire.jpg)