3 files changed, 24 insertions, 18 deletions
diff --git a/dichroism/src/dtos/product_get.rs b/dichroism/src/dtos/product_get.rs
index 3f68eef..aa52f19 100644
--- a/dichroism/src/dtos/product_get.rs
+++ b/dichroism/src/dtos/product_get.rs
@@ -24,9 +24,9 @@ impl From<Product> for ProductGet {
             quantity: p.quantity,
             featured: p.featured,
             category: p.category,
-            photo_fullsize: p.photo_set.fullsize.filename(),
-            photo_base: p.photo_set.base.filename(),
-            photo_thumbnail: p.photo_set.thumbnail.filename(),
+            photo_fullsize: p.photo_set.fullsize.id,
+            photo_base: p.photo_set.base.id,
+            photo_thumbnail: p.photo_set.thumbnail.id,
         }
     }
 }
diff --git a/dichroism/src/models/photo.rs b/dichroism/src/models/photo.rs
index e24a691..086d387 100644
--- a/dichroism/src/models/photo.rs
+++ b/dichroism/src/models/photo.rs
@@ -7,8 +7,4 @@ impl Photo {
     pub fn new(id: String) -> Self {
         Self { id }
     }
-
-    pub fn filename(&self) -> String {
-        format!("{}.jpg", self.id)
-    }
 }
diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
index 36c7be5..4ff6c80 100644
--- a/iridescence/src/components/ProductCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -2,24 +2,21 @@
   <div id="productCard">
     <div class="card">
       <div class="card-image">
-        <figure class="image is-4by3">
-          <img
-            src="https://bulma.io/images/placeholders/1280x960.png"
-            :alt="name"
-          />
+        <figure class="image is-square">
+          <img :src="thumbnail" :alt="name" title="Click to expand." />
         </figure>
       </div>
       <div class="card-content">
         <div class="content">
           <p class="title is-4">{{ name }}</p>
           <p class="subtitle is-4">
-            {{ dollars(cents) }}
+            {{ dollars }}
           </p>
           <p class="subtitle is-6">{{ stock }}</p>
         </div>
 
         <div class="content">
-          {{ description }}
+          {{ shortDescription }}
         </div>
       </div>
     </div>
@@ -34,7 +31,9 @@ export default {
     name: String,
     quantity: Number,
     cents: Number,
-    imgPath: String,
+    photo_thumbnail: String,
+    photo_base: String,
+    photo_fullsize: String,
     description: String
   },
   computed: {
@@ -44,10 +43,21 @@ export default {
       } else {
         return [this.quantity, "in stock"].join(" ");
       }
+    },
+    dollars() {
+      return "$ " + (this.cents / 100).toFixed(2);
+    },
+    thumbnail() {
+      return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_thumbnail;
+    },
+    shortDescription() {
+      let description = this.description.split(" ");
+      if (description.length < 10) {
+        return this.description;
+      } else {
+        return description.splice(0, 10).join(" ") + "…";
+      }
     }
-  },
-  methods: {
-    dollars: cents => "$ " + (cents / 100).toFixed(2)
   }
 };
 </script>