DIT-405: Add support for custom image on all card views

matematikk-mooc · Dec 13, 2024 · f6cdeb1 · f6cdeb1
1 parent 6a311f5
commit f6cdeb1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/vue/components/CardList.vue b/src/vue/components/CardList.vue
@@ -4,7 +4,7 @@
     <div class="card-instance card-container-wrapper" v-for="course in courses" :key="course.id">
       <Card class="card-item"
         :theme="course.course_settings ? course.course_settings?.course_category?.category.color_code : 'theme_0'"
-        :courseIllustration="course.course_settings ? course.course_settings?.image.path : ''"
+        :courseIllustration="thumbnail(course)"
         :label="course.name"
         :filters="course.course_settings ? course.course_settings.course_filter : []"
         :requirementsCompleted="course?.course_progress?.requirement_completed_count ?? 0"
@@ -51,7 +51,7 @@
           <div class="course-illustration-box" :class="course.course_settings ? course.course_settings?.course_category?.category.color_code : 'theme_0'">
             <img
               class="course-illustration-box-image"
-              :src="course.course_settings ? course.course_settings?.image.path : ''"
+              :src="thumbnail(course)"
               alt=""
             />
           </div>
@@ -117,6 +117,10 @@ export default {
     console.log(this.courses)
   },
   methods: {
+    thumbnail(course) {
+      if (course.image_download_url != null) return course.image_download_url;
+      return course.course_settings ? course.course_settings?.image.path : '';
+    },
     isInvitedCourse,
     enrollToCourse(enrollCode) {
       window.location.href = this.domain + '/enroll/' + enrollCode;

diff --git a/src/vue/components/NotLoggedInIntro.vue b/src/vue/components/NotLoggedInIntro.vue
@@ -12,7 +12,7 @@
 
       <CardHighlighted class="card-highlighted"
         :theme="newestCourse.course_settings ? newestCourse.course_settings?.course_category?.category.color_code : 'theme_0'"
-        :courseIllustration="newestCourse.course_settings ? newestCourse.course_settings?.image.path : ''"
+        :courseIllustration="thumbnail"
         :label="newestCourse.name"
         :filters="newestCourse.course_settings ? newestCourse.course_settings.course_filter : []"
       >
@@ -35,7 +35,7 @@
           <div class="course-illustration-box" :class="newestCourse.course_settings ? newestCourse.course_settings?.course_category?.category.color_code : 'theme_0'">
             <img
               class="course-illustration-box-image"
-              :src="newestCourse.course_settings ? newestCourse.course_settings?.image.path : ''"
+              :src="thumbnail"
               alt=""
             />
           </div>
@@ -92,6 +92,12 @@ export default {
       domain: window.location.origin,
     }
   },
+  computed: {
+    thumbnail() {
+      if (this.newestCourse?.image_download_url != null) return this.newestCourse.image_download_url;
+      return this.newestCourse.course_settings ? this.newestCourse.course_settings?.image.path : '';
+    },
+  },
   methods: {
     enrollToCourse(enrollCode) {
       window.location.href = this.domain + '/enroll/' + enrollCode;