From 581d3835f2e1683921ba3aae20945dedf08d81d2 Mon Sep 17 00:00:00 2001
From: Christian Beeznest <christian.fasanando@beeznest.com>
Date: Fri, 19 Sep 2025 21:58:56 -0500
Subject: [PATCH] Course: Unify course cards & image loading across /courses,
 /admin-dashboard, /favorites; responsive resizing - refs BT#22935

---
 .../vue/components/course/AdminCourseCard.vue | 81 +++++++++++-----
 assets/vue/components/course/CourseCard.vue   | 47 ++++++---
 .../vue/views/sessionadmin/AdminDashboard.vue | 34 +++----
 .../views/sessionadmin/FavoritesCourses.vue   | 68 ++++++++-----
 .../views/sessionadmin/RegisterStudent.vue    | 96 +++++++++++++++----
 .../Admin/SessionAdminController.php          | 56 ++++++++---
 6 files changed, 269 insertions(+), 113 deletions(-)

diff --git a/assets/vue/components/course/AdminCourseCard.vue b/assets/vue/components/course/AdminCourseCard.vue
index d7b45539de1..3fbcd7b3508 100644
--- a/assets/vue/components/course/AdminCourseCard.vue
+++ b/assets/vue/components/course/AdminCourseCard.vue
@@ -1,27 +1,28 @@
 <template>
-  <Card class="course-card relative overflow-hidden">
+  <Card class="course-card rounded-2xl overflow-hidden bg-white shadow-sm">
     <template #header>
-      <img
-        :src="course.illustrationUrl || PLACEHOLDER"
-        :alt="course.title"
-        class="w-full h-40 object-cover"
-      />
-
-      <button
-        @click.stop="toggleFavorite"
-        :aria-label="isFavorite ? t('Unmark favorite') : t('Mark favorite')"
-        class="absolute top-2 right-2 text-yellow-400 hover:text-yellow-500"
-      >
-        <i :class="isFavorite ? 'pi pi-star-fill' : 'pi pi-star'" />
-      </button>
+      <div class="relative aspect-[16/9] w-full overflow-hidden bg-gray-100">
+        <img
+          :src="imageUrl"
+          :alt="course.title || 'Course illustration'"
+          class="absolute inset-0 h-full w-full object-cover"
+          loading="lazy"
+          referrerpolicy="no-referrer"
+          @error="onImgError"
+        />
+        <button
+          @click.stop="toggleFavorite"
+          :aria-label="isFavorite ? t('Unmark favorite') : t('Mark favorite')"
+          class="absolute top-2 right-2 grid place-content-center w-10 h-10 rounded-full bg-white/80 backdrop-blur text-yellow-400 hover:text-yellow-500 shadow"
+        >
+          <i :class="isFavorite ? 'pi pi-star-fill' : 'pi pi-star'" />
+        </button>
+      </div>
     </template>
 
     <template #title>
-      <div class="flex flex-col gap-1">
-        <span
-          class="font-semibold truncate"
-          :title="course.title"
-        >
+      <div class="course-card__title flex items-start gap-2">
+        <span class="font-semibold leading-snug line-clamp-2" :title="course.title">
           {{ course.title }}
         </span>
       </div>
@@ -42,7 +43,7 @@
 
 <script setup>
 import Card from "primevue/card"
-import { ref, watch } from "vue"
+import { ref, watch, computed } from "vue"
 import { useI18n } from "vue-i18n"
 import courseService from "../../services/courseService"
 import { useSecurityStore } from "../../store/securityStore"
@@ -58,6 +59,40 @@ const emit = defineEmits(["favorite-toggled"])
 const isFavorite = ref(false)
 const PLACEHOLDER = "/img/session_default.svg"
 
+function normalizeUrl(u) {
+  if (!u || typeof u !== "string") return null
+  const s = u.trim()
+  if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("/")) return s
+  return `/${s.replace(/^\/+/, "")}`
+}
+
+const imageUrl = computed(() => {
+  const c = props.course || {}
+  const candidates = [
+    c.illustrationUrl,
+    c?.illustration?.url,
+    c?.illustration?.contentUrl,
+    c?.image?.url,
+    c.pictureUrl,
+    c.picture,
+    c.thumbnailUrl,
+    c.thumbnail,
+    c.coverUrl,
+    c?.cover?.url,
+  ]
+  for (const cand of candidates) {
+    const n = normalizeUrl(cand)
+    if (n) return n
+  }
+  return PLACEHOLDER
+})
+
+function onImgError(e) {
+  if (e?.target && e.target.src !== PLACEHOLDER) {
+    e.target.src = PLACEHOLDER
+  }
+}
+
 async function toggleFavorite() {
   const result = await courseService.toggleFavorite(props.course.id, securityStore.user.id)
   isFavorite.value = result
@@ -69,10 +104,8 @@ async function toggleFavorite() {
 
 watch(
   () => props.course.userVote,
-  (newVote) => {
-    isFavorite.value = newVote === 1
-  },
-  { immediate: true }
+  (newVote) => (isFavorite.value = newVote === 1),
+  { immediate: true },
 )
 </script>
 
diff --git a/assets/vue/components/course/CourseCard.vue b/assets/vue/components/course/CourseCard.vue
index 40ca1e447a0..3992ba593b2 100644
--- a/assets/vue/components/course/CourseCard.vue
+++ b/assets/vue/components/course/CourseCard.vue
@@ -1,21 +1,30 @@
 <template>
   <Card class="course-card">
     <template #header>
-      <img
-        v-if="isLocked"
-        :alt="course.title"
-        :src="course.illustrationUrl || '/img/session_default.svg'"
-      />
-      <BaseAppLink
-        v-else
-        :to="{ name: 'CourseHome', params: { id: course._id }, query: { sid: sessionId } }"
-        class="course-card__home-link"
-      >
+      <div class="relative aspect-[16/9] w-full overflow-hidden rounded-t-2xl bg-gray-100">
         <img
-          :alt="course.title"
-          :src="course.illustrationUrl || '/img/session_default.svg'"
+          v-if="isLocked"
+          :alt="course.title || 'Course illustration'"
+          :src="imageUrl"
+          class="absolute inset-0 h-full w-full object-cover"
+          loading="lazy"
+          referrerpolicy="no-referrer"
         />
-      </BaseAppLink>
+        <BaseAppLink
+          v-else
+          :to="{ name: 'CourseHome', params: { id: course._id }, query: { sid: sessionId } }"
+          class="absolute inset-0 block"
+          aria-label="Open course"
+        >
+          <img
+            :alt="course.title || 'Course illustration'"
+            :src="imageUrl"
+            class="h-full w-full object-cover"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+          />
+        </BaseAppLink>
+      </div>
     </template>
     <template #title>
       <div class="course-card__title flex items-center gap-2">
@@ -130,7 +139,9 @@ const daysRemainingText = computed(() => {
   return t("Expired")
 })
 
-const showCourseDuration = computed(() => platformConfigStore.getSetting("course.show_course_duration") === "true")
+const showCourseDuration = computed(
+  () => platformConfigStore.getSetting("course.show_course_duration") === "true",
+)
 
 const teachers = computed(() => {
   if (props.session?.courseCoachesSubscriptions) {
@@ -172,6 +183,14 @@ const { hasRequirements, requirementList, graphImage, fetchStatus } = useCourseR
 
 const isLocked = computed(() => props.disabled || internalLocked.value)
 
+const imageUrl = computed(() =>
+  props.course?.illustrationUrl ||
+  props.course?.image?.url ||
+  props.course?.pictureUrl ||
+  props.course?.thumbnail ||
+  "/img/session_default.svg",
+)
+
 onMounted(() => {
   if (props.course?.id) {
     fetchStatus()
diff --git a/assets/vue/views/sessionadmin/AdminDashboard.vue b/assets/vue/views/sessionadmin/AdminDashboard.vue
index c508a8530ea..7ce474a7cbd 100644
--- a/assets/vue/views/sessionadmin/AdminDashboard.vue
+++ b/assets/vue/views/sessionadmin/AdminDashboard.vue
@@ -2,24 +2,15 @@
   <div class="p-6">
     <h1 class="text-2xl font-bold mb-6">{{ t("Available courses in this URL") }}</h1>
 
-    <div
-      v-if="loading"
-      class="text-gray-500"
-    >
+    <div v-if="loading" class="text-gray-500">
       {{ t("Loading courses...") }}
     </div>
 
-    <div
-      v-else-if="courses.length === 0"
-      class="text-gray-500"
-    >
+    <div v-else-if="courses.length === 0" class="text-gray-500">
       {{ t("No courses available.") }}
     </div>
 
-    <div
-      v-else
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
-    >
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4 gap-6">
       <AdminCourseCard
         v-for="course in courses"
         :key="course.id"
@@ -55,14 +46,17 @@ onMounted(async () => {
       const favoriteIds =
         favRes.status === "fulfilled" ? new Set(favRes.value.map((iri) => parseInt(iri.split("/").pop()))) : new Set()
 
-      courses.value = []
-      courses.value.push(
-        ...allCourses.map((c) => ({
-          ...c,
-          code: c.code ?? c.title,
-          userVote: favoriteIds.has(c.id) ? 1 : 0,
-        })),
-      )
+      courses.value = allCourses.map((c) => ({
+        ...c,
+        code: c.code ?? c.title,
+        userVote: favoriteIds.has(c.id) ? 1 : 0,
+        illustrationUrl:
+          c?.illustrationUrl ||
+          c?.image?.url ||
+          c?.pictureUrl ||
+          c?.thumbnail ||
+          "/img/session_default.svg",
+      }))
     }
   } catch (e) {
     console.warn("Error loading dashboard courses:", e)
diff --git a/assets/vue/views/sessionadmin/FavoritesCourses.vue b/assets/vue/views/sessionadmin/FavoritesCourses.vue
index f72e468f0bc..7f6040c557a 100644
--- a/assets/vue/views/sessionadmin/FavoritesCourses.vue
+++ b/assets/vue/views/sessionadmin/FavoritesCourses.vue
@@ -2,23 +2,14 @@
   <div class="p-6">
     <h1 class="text-2xl font-bold mb-6">{{ t("Favorite courses") }}</h1>
 
-    <div
-      v-if="loading"
-      class="text-gray-500"
-    >
+    <div v-if="loading" class="text-gray-500">
       {{ t("Loading") }}…
     </div>
-    <div
-      v-else-if="favorites.length === 0"
-      class="text-gray-500"
-    >
+    <div v-else-if="favorites.length === 0" class="text-gray-500">
       {{ t("No favorite courses.") }}
     </div>
 
-    <div
-      v-else
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
-    >
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4 gap-6">
       <AdminCourseCard
         v-for="c in favorites"
         :key="c.id"
@@ -41,6 +32,33 @@ const favorites = ref([])
 const loading = ref(true)
 const securityStore = useSecurityStore()
 
+function normalizeUrl(u) {
+  if (!u || typeof u !== "string") return null
+  const s = u.trim()
+  if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("/")) return s
+  return `/${s.replace(/^\/+/, "")}`
+}
+
+function resolveIllustration(c) {
+  const candidates = [
+    c.illustrationUrl,
+    c?.illustration?.url,
+    c?.illustration?.contentUrl,
+    c?.image?.url,
+    c.pictureUrl,
+    c.picture,
+    c.thumbnailUrl,
+    c.thumbnail,
+    c.coverUrl,
+    c?.cover?.url,
+  ]
+  for (const cand of candidates) {
+    const n = normalizeUrl(cand)
+    if (n) return n
+  }
+  return "/img/session_default.svg"
+}
+
 async function loadFavorites() {
   loading.value = true
 
@@ -48,23 +66,25 @@ async function loadFavorites() {
   const isSessionAdmin = securityStore.isSessionAdmin
 
   const favoritesRaw = await courseService.listFavoriteCourses(userId)
-  const courseIds = favoritesRaw.map((iri) => parseInt(iri.split("/").pop())).filter((id) => !isNaN(id))
+  const courseIds = favoritesRaw
+    .map((iri) => parseInt(iri.split("/").pop()))
+    .filter((id) => !isNaN(id))
 
   const results = await Promise.allSettled(
-    courseIds.map((id) => (isSessionAdmin ? courseService.findCourseForSessionAdmin(id) : courseService.findById(id))),
+    courseIds.map((id) =>
+      isSessionAdmin ? courseService.findCourseForSessionAdmin(id) : courseService.findById(id),
+    ),
   )
 
   favorites.value = results
-    .filter((r) => r.status === "fulfilled" && r.value !== null)
-    .map((r) => ({
-      ...r.value,
-      userVote: 1,
-    }))
-
-  results
-    .filter((r) => r.status === "rejected")
-    .forEach((r, idx) => {
-      console.error(`Error loading favorite course ID ${courseIds[idx]}:`, r.reason)
+    .filter((r) => r.status === "fulfilled" && r.value)
+    .map((r) => {
+      const c = r.value
+      return {
+        ...c,
+        userVote: 1,
+        illustrationUrl: resolveIllustration(c),
+      }
     })
 
   loading.value = false
diff --git a/assets/vue/views/sessionadmin/RegisterStudent.vue b/assets/vue/views/sessionadmin/RegisterStudent.vue
index ba61ff96335..8d3a3afdde0 100644
--- a/assets/vue/views/sessionadmin/RegisterStudent.vue
+++ b/assets/vue/views/sessionadmin/RegisterStudent.vue
@@ -2,11 +2,31 @@
   <div class="p-6 space-y-6">
     <Card>
       <template #header>
-        <img
-          :src="course.illustrationUrl || PLACEHOLDER"
-          :alt="course.title"
-          class="w-full h-40 object-cover rounded-t-xl"
-        />
+        <div class="relative w-full rounded-t-xl bg-gray-100 overflow-hidden">
+          <div
+            v-if="isFetching"
+            class="w-full h-36 sm:h-44 md:h-52 lg:h-60 animate-pulse bg-gray-200"
+            aria-hidden="true"
+          />
+          <div
+            v-else-if="hasRealBanner && !imgLoaded"
+            class="w-full h-36 sm:h-44 md:h-52 lg:h-60 animate-pulse bg-gray-200"
+            aria-hidden="true"
+          />
+          <img
+            v-else-if="hasRealBanner && imgLoaded"
+            :src="displaySrc"
+            :alt="course.title || 'Course illustration'"
+            class="block w-full h-36 sm:h-44 md:h-52 lg:h-60 object-cover object-center"
+            referrerpolicy="no-referrer"
+          />
+          <img
+            v-else
+            :src="PLACEHOLDER"
+            :alt="course.title || 'Course illustration'"
+            class="block w-full h-36 sm:h-44 md:h-52 lg:h-60 object-cover object-center"
+          />
+        </div>
       </template>
 
       <template #title>
@@ -222,6 +242,7 @@ const extraFieldKey = platformConfigStore.getSetting(
   "platform.session_admin_user_subscription_search_extra_field_to_search",
 )
 
+const isFetching = ref(true)
 const course = ref({
   title: "Loading...",
   code: "",
@@ -230,23 +251,37 @@ const course = ref({
   illustrationUrl: null,
 })
 
-const createForm = ref({
-  firstname: "",
-  lastname: "",
-  email: "",
-  password: "",
-  accessUrlId: 1,
-  sendEmail: true,
-  [extraFieldKey]: "",
-})
-
-const createLoading = ref(false)
+function normalizeUrl(u) {
+  if (!u || typeof u !== "string") return null
+  const s = u.trim()
+  if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("/")) return s
+  return `/${s.replace(/^\/+/, "")}`
+}
 
-const platformSessionAdminAccessAllUrls = computed(
-  () => platformConfigStore.getSetting("platform.session_admin_access_to_all_users_on_all_urls") === "true",
-)
+const rawBanner = ref(null)
+const hasRealBanner = computed(() => !!rawBanner.value)
+const imgLoaded = ref(false)
+const displaySrc = ref(null)
+
+function preloadImage(src) {
+  imgLoaded.value = false
+  displaySrc.value = null
+  if (!src) return
+  const im = new Image()
+  im.referrerPolicy = "no-referrer"
+  im.onload = () => {
+    displaySrc.value = src
+    imgLoaded.value = true
+  }
+  im.onerror = () => {
+    rawBanner.value = null
+    imgLoaded.value = false
+  }
+  im.src = src
+}
 
 async function loadCourse() {
+  isFetching.value = true
   try {
     const data = await courseService.findCourseForSessionAdmin(courseId)
     course.value = {
@@ -255,15 +290,36 @@ async function loadCourse() {
       code: data.code,
       description: data.description,
       descriptions: data.descriptions || [],
-      illustrationUrl: data.illustrationUrl,
+      illustrationUrl: normalizeUrl(data.illustrationUrl),
+    }
+    rawBanner.value = normalizeUrl(data.illustrationUrl)
+    if (rawBanner.value) {
+      preloadImage(rawBanner.value)
     }
   } catch (e) {
     console.error("[RegisterStudent] course load failed:", e)
+    rawBanner.value = null
+  } finally {
+    isFetching.value = false
   }
 }
 
 loadCourse()
 
+const createForm = ref({
+  firstname: "",
+  lastname: "",
+  email: "",
+  password: "",
+  accessUrlId: 1,
+  sendEmail: true,
+  [extraFieldKey]: "",
+})
+const createLoading = ref(false)
+const platformSessionAdminAccessAllUrls = computed(
+  () => platformConfigStore.getSetting("platform.session_admin_access_to_all_users_on_all_urls") === "true",
+)
+
 const form = ref({ lastname: "", firstname: "", tempId: "" })
 const student = ref(null)
 const searchAttempted = ref(false)
diff --git a/src/CoreBundle/Controller/Admin/SessionAdminController.php b/src/CoreBundle/Controller/Admin/SessionAdminController.php
index 93280d08a42..bbe413152a5 100644
--- a/src/CoreBundle/Controller/Admin/SessionAdminController.php
+++ b/src/CoreBundle/Controller/Admin/SessionAdminController.php
@@ -19,6 +19,7 @@
 use Chamilo\CoreBundle\Repository\ExtraFieldValuesRepository;
 use Chamilo\CoreBundle\Repository\GradebookCertificateRepository;
 use Chamilo\CoreBundle\Repository\Node\CourseRepository;
+use Chamilo\CoreBundle\Repository\Node\IllustrationRepository;
 use Chamilo\CoreBundle\Repository\Node\UserRepository;
 use Chamilo\CoreBundle\Repository\SessionRelCourseRelUserRepository;
 use Chamilo\CoreBundle\Settings\SettingsManager;
@@ -31,6 +32,8 @@
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 
+use function pathinfo;
+
 use const PATHINFO_FILENAME;
 
 #[Security("is_granted('ROLE_ADMIN') or is_granted('ROLE_SESSION_MANAGER')")]
@@ -42,7 +45,8 @@ public function __construct(
         private readonly AccessUrlHelper $accessUrlHelper,
         private readonly SettingsManager $settingsManager,
         private readonly UserHelper $userHelper,
-        private readonly CCourseDescriptionRepository $courseDescriptionRepository
+        private readonly CCourseDescriptionRepository $courseDescriptionRepository,
+        private readonly IllustrationRepository $illustrationRepository
     ) {}
 
     #[Route('/courses', name: 'chamilo_core_admin_sessionadmin_courses', methods: ['GET'])]
@@ -51,22 +55,40 @@ public function listCourses(): JsonResponse
         $url = $this->accessUrlHelper->getCurrent();
         $courses = $this->courseRepository->getCoursesByAccessUrl($url);
 
-        $data = array_map(static function (Course $course) {
+        $filterForCards = '';
+
+        $data = array_map(function (Course $course) use ($filterForCards) {
+            $illustrationUrl = $this->illustrationRepository->getIllustrationUrl(
+                $course,
+                $filterForCards,
+                512
+            );
+
             return [
                 'id' => $course->getId(),
                 'title' => $course->getTitle(),
                 'code' => $course->getCode(),
                 'description' => $course->getDescription(),
                 'visibility' => $course->getVisibility(),
-                'illustrationUrl' => method_exists($course, 'getIllustrationUrl')
-                    ? $course->getIllustrationUrl()
-                    : null,
+                'illustrationUrl' => $this->normalizePath($illustrationUrl),
             ];
         }, $courses);
 
         return $this->json($data);
     }
 
+    private function normalizePath(?string $path): string
+    {
+        if (!\is_string($path) || $path === '') {
+            return '/img/session_default.svg';
+        }
+        $p = trim($path);
+        if (\str_starts_with($p, 'http://') || \str_starts_with($p, 'https://') || \str_starts_with($p, '/')) {
+            return $p;
+        }
+        return '/'.ltrim($p, '/');
+    }
+
     #[Route('/courses/completed', name: 'chamilo_core_admin_sessionadmin_courses_completed', methods: ['GET'])]
     public function listCompleted(
         Request $request,
@@ -233,8 +255,11 @@ public function listRestartables(
     }
 
     #[Route('/courses/extend_week', name: 'chamilo_core_admin_sessionadmin_session_extend_one_week', methods: ['POST'])]
-    public function extendSessionByWeek(Request $request, SessionRelCourseRelUserRepository $sessionRelCourseRelUserRepository, EntityManagerInterface $entityManager): JsonResponse
-    {
+    public function extendSessionByWeek(
+        Request $request,
+        SessionRelCourseRelUserRepository $sessionRelCourseRelUserRepository,
+        EntityManagerInterface $entityManager
+    ): JsonResponse {
         $data = json_decode($request->getContent(), true);
         $sessionId = (int) ($data['sessionId'] ?? 0);
         $userId = (int) ($data['userId'] ?? 0);
@@ -267,7 +292,11 @@ public function extendSessionByWeek(Request $request, SessionRelCourseRelUserRep
         $session->setAccessEndDate($newEndDate);
         $entityManager->flush();
 
-        return $this->json(['success' => true, 'message' => 'Session extended by one week.', 'newEndDate' => $newEndDate->format('Y-m-d')]);
+        return $this->json([
+            'success' => true,
+            'message' => 'Session extended by one week.',
+            'newEndDate' => $newEndDate->format('Y-m-d'),
+        ]);
     }
 
     #[Route('/courses/{id}', name: 'chamilo_core_admin_sessionadmin_course_view', methods: ['GET'])]
@@ -290,15 +319,20 @@ public function getCourseForSessionAdmin(int $id): JsonResponse
             ];
         }, $items);
 
+        $filterForCards = '';
+        $illustrationUrl = $this->illustrationRepository->getIllustrationUrl(
+            $course,
+            $filterForCards,
+            512
+        );
+
         return $this->json([
             'id' => $course->getId(),
             'title' => $course->getTitle(),
             'code' => $course->getCode(),
             'description' => '',
             'descriptions' => $descriptions,
-            'illustrationUrl' => method_exists($course, 'getIllustrationUrl')
-                ? $course->getIllustrationUrl()
-                : null,
+            'illustrationUrl' => $this->normalizePath($illustrationUrl),
         ]);
     }