F(frontend): add image lightbox and derivative fallbacks

src/lib/types.ts

@@ -26,6 +26,8 @@ export interface UserProfileSchema {
   first_name: string;
   last_name: string;
   profile_picture?: string;
+  profile_picture_thumbnail_url?: string | null;
+  profile_picture_preview_url?: string | null;
   bio?: string;
   student_id?: string | null;
   year_of_study?: number;
@@ -110,12 +112,16 @@ export interface PostListSchema {
   excerpt?: string;
   featured_image?: string;
   absolute_featured_image_url?: string | null;
+  absolute_featured_image_thumbnail_url?: string | null;
+  absolute_featured_image_preview_url?: string | null;
   author: {
     id: number;
     username: string;
     first_name: string;
     last_name: string;
     profile_picture?: string;
+    profile_picture_thumbnail_url?: string | null;
+    profile_picture_preview_url?: string | null;
   };
   category?: {
     id: number;
@@ -198,6 +204,8 @@ export interface EventListItemSchema {
   description: string;
   featured_image?: string | null;
   absolute_featured_image_url?: string | null;
+  absolute_featured_image_thumbnail_url?: string | null;
+  absolute_featured_image_preview_url?: string | null;
   event_type: 'online' | 'on_site' | 'hybrid';
   address?: string | null;
   location?: string | null;
@@ -220,6 +228,8 @@ export interface EventGalleryItem {
   title: string;
   description: string;
   absolute_image_url?: string | null;
+  absolute_image_preview_url?: string | null;
+  absolute_image_blur_url?: string | null;
   width?: number;
   height?: number;
 }
@@ -328,6 +338,11 @@ export interface GalleryImageSchema {
   title: string;
   description?: string;
   image: string;
+  absolute_image_url?: string | null;
+  absolute_image_preview_url?: string | null;
+  absolute_image_blur_url?: string | null;
+  width?: number | null;
+  height?: number | null;
   uploaded_by: {
     id: number;
     username: string;

src/lib/utils.ts

@@ -35,11 +35,71 @@ export function formatJalali(iso?: string, withTime: boolean = true): string {
   }
 }
 
-const DEFAULT_THUMB = '/placeholder.svg';
-export const getThumbUrl = (e: Types.EventListItemSchema) =>
-  e.absolute_featured_image_url ||
-  e.featured_image ||
-  DEFAULT_THUMB;
+const DEFAULT_THUMB = "/placeholder.svg";
+
+const pickFirstUrl = (...values: Array<string | null | undefined>) =>
+  values.find((value) => Boolean(value)) || DEFAULT_THUMB;
+
+export const getEventCardImageUrl = (event: Types.EventListItemSchema) =>
+  pickFirstUrl(
+    event.absolute_featured_image_thumbnail_url,
+    event.absolute_featured_image_preview_url,
+    event.absolute_featured_image_url,
+    event.featured_image,
+  );
+
+export const getEventHeroImageUrl = (event: Types.EventListItemSchema) =>
+  pickFirstUrl(
+    event.absolute_featured_image_preview_url,
+    event.absolute_featured_image_url,
+    event.absolute_featured_image_thumbnail_url,
+    event.featured_image,
+  );
+
+export const getEventSeoImageUrl = (event: Types.EventListItemSchema) =>
+  pickFirstUrl(
+    event.absolute_featured_image_url,
+    event.absolute_featured_image_preview_url,
+    event.absolute_featured_image_thumbnail_url,
+    event.featured_image,
+  );
+
+export const getThumbUrl = getEventCardImageUrl;
+
+export const getGalleryImagePreviewUrl = (
+  image:
+    | Types.EventGalleryItem
+    | Types.GalleryImageSchema,
+) =>
+  pickFirstUrl(
+    image.absolute_image_preview_url,
+    image.absolute_image_url,
+    "image" in image ? image.image : undefined,
+  );
+
+export const getGalleryImageBlurUrl = (
+  image:
+    | Types.EventGalleryItem
+    | Types.GalleryImageSchema,
+) =>
+  pickFirstUrl(
+    image.absolute_image_blur_url,
+    image.absolute_image_preview_url,
+    image.absolute_image_url,
+    "image" in image ? image.image : undefined,
+  );
+
+export const getGalleryImageFullUrl = (
+  image:
+    | Types.EventGalleryItem
+    | Types.GalleryImageSchema,
+) =>
+  pickFirstUrl(
+    image.absolute_image_url,
+    image.absolute_image_preview_url,
+    image.absolute_image_blur_url,
+    "image" in image ? image.image : undefined,
+  );
 
 const PERSIAN_DIGITS = ['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹'];