adds preview thumbnail to image list, #13

TheScienceMuseum · Aug 1, 2018 · 60c1313 · 60c1313
1 parent 87f622e
commit 60c1313
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/lambda/lib/listObjects.js b/lambda/lib/listObjects.js
@@ -15,6 +15,7 @@ module.exports = (event, context, callback) => {
     var templateData = Object.assign({}, data, {
       bucket: process.env.S3_BUCKET,
       stage: process.env.STAGE,
+      region: process.env.REGION,
       uploaded: uploaded
     });
 

diff --git a/lambda/templates/html-template.hbs b/lambda/templates/html-template.hbs
@@ -34,6 +34,15 @@
       margin: auto;
       text-align: right;
     }
+    .thumbnail {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+    .thumbnail-container {
+      width: 5em;
+      height: 5em;
+    }
     td {
       text-align: center;
     }
@@ -65,6 +74,7 @@
     <tr class="table-header">
       <th>ID</th>
       <th>Name</th>
+      <th></th>
       <th>Last Modified</th>
       <th>Status</th>
       <th></th>
@@ -74,6 +84,11 @@
       <tr>
         <td>{{#if objectId}}{{objectId.S}}{{else}}<span class="red">missing</span>{{/if}}</td>
         <td>{{#if title}}{{title.S}}{{else}}<span class="red">missing</span>{{/if}}</td>
+        <td>
+          <div class="thumbnail-container">
+            <img class="thumbnail" alt="object image preview" src="https://s3-{{../region}}.amazonaws.com/{{../bucket}}/{{id.S}}/preview.jpg" />
+          </div>
+        </td>
         <td>{{#if modificationDate}}{{modificationDate.S}}{{/if}}</td>
         <td>
           {{#if active.BOOL}}