Write out images in per-album json.

react-debug/src/App.css

@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+.figure {
+  width: 285px;
+}

react-debug/src/App.js

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './App.css';
+
 class Album extends React.Component {
   constructor(props) {
     super(props);
@@ -25,18 +27,16 @@ class Album extends React.Component {
     } else if (album !== null) {
       console.log(album);
       return album.map((a) => {
-        let img = <img src="https://via.placeholder.com/256x128" className="mr-3" alt="unset"/>;
-        if (a.coverPhotoBaseUrl !== undefined) {
-          img = <img src={ a.coverPhotoBaseUrl + "=w256" } className="mr-3" alt={ a.title }/>;
-        }
-
-        let figure = <figure key={ a.id } className="figure">
-          {img}
-          <figcaption className="figure-caption">{ a.title || "No title" } - { a.mediaItemsCount || 0 } photos </figcaption>
-        </figure>;
-        return <a key={ a.id } href={ a.productUrl }>
-            { figure }
+        // TODO(wathiede): use coverPhotoMediaItemId and fetch from a
+        // locally cached image.
+        return <figure key={ a.id } className="figure">
+          <img src={ a.baseUrl + "=w256-h256-c" } className="mr-3" alt={ a.filename }/>
+          <figcaption className="figure-caption">
+          <a key={ a.id } href={ a.productUrl }>
+            <p className="text-truncate">{ a.filename}</p>
           </a>
+          </figcaption>
+        </figure>
       });
     } else {
       return <h2>Loading...</h2>;