From 7ea3f3b5fe876370e4575c48b18eec05983e769e Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sat, 20 Jan 2018 11:56:31 +0000
Subject: [PATCH] Add images to playlists

---
 layouts/shortcodes/spotify.html |  6 +++++-
 static/src/scss/style.scss      | 11 +++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/layouts/shortcodes/spotify.html b/layouts/shortcodes/spotify.html
index 7c8f7b5..75a8b79 100644
--- a/layouts/shortcodes/spotify.html
+++ b/layouts/shortcodes/spotify.html
@@ -14,16 +14,20 @@
     <caption><a href="{{ $playlist.external_urls.spotify }}">View playlist on Spotify</a></caption>
     <thead>
     <tr>
+      <th scope="row"></th>
       <th scope="row">Track</th>
       <th scope="row">Artist</th>
       <th scope="row">Album</th>
-      <th scope="row"></th>
+      <th scope="row">Preview</th>
     </tr>
     </thead>
     <tbody>
       {{ range sort $playlist.tracks.items "track.name" }}
         {{ with .track }}
           <tr>
+            {{ with index (last 1 .album.images) 0 }}
+              <td><div class="image" data-image="{{ .url }}"></div></td>
+            {{ end }}
             <td><a href="{{ .external_urls.spotify }}">{{ .name }}</a></td>
             <td>
               {{ range $i, $e := .artists }}{{ if $i }}, {{ end }}{{ .name }}{{ end }}
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index 24eb78c..e8287c5 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -234,3 +234,14 @@ p code, li code {
     color: $black;
   }
 }
+
+.playlist {
+  .image {
+    width: 50px;
+    height: 50px;
+  }
+
+  td, td > * {
+    vertical-align: middle;
+  }
+}