Add a unique class to each thumbnail with video ID, #49

rchmura · Mar 22, 2018 · d7aedee · d7aedee
1 parent 28c5fa5
commit d7aedee
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/vimeography-harvestone/src/components/Thumbnail.vue b/vimeography-harvestone/src/components/Thumbnail.vue
@@ -2,9 +2,9 @@
 import { mapState } from 'vuex'
 
 const defaultTemplate = `
-  <figure class="swiper-slide vimeography-thumbnail">
-    <router-link class="vimeography-link" :to="this.query" exact exact-active-class="vimeography-link-active">
-      <img class="vimeography-thumbnail-img" :src="thumbnailUrl" :title="video.name" />
+  <figure :class="this.thumbnailClass">
+    <router-link class="vimeography-link" :title="video.name" :to="this.query" exact exact-active-class="vimeography-link-active">
+      <img class="vimeography-thumbnail-img" :src="thumbnailUrl" :alt="video.name" />
     </router-link>
   </figure>
 `;
@@ -15,6 +15,9 @@ const Thumbnail = {
   props: ['video'],
   template: userTemplate ? userTemplate.innerText : defaultTemplate,
   computed: {
+    thumbnailClass() {
+      return `swiper-slide vimeography-thumbnail vimeography-video-${this.video.id}`
+    },
     query() {
       const q = {
         ...this.$route.query,