New default image for learning resources (#1136)

* New default image for learning resources * Update image
mitodl · Jun 27, 2024 · e374b4d · e374b4d
1 parent 5ef7268
commit e374b4d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/frontends/mit-open/public/images/default_resource.jpg b/frontends/mit-open/public/images/default_resource.jpg
diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx
@@ -10,6 +10,7 @@ import {
   formatDate,
   resourceThumbnailSrc,
   getReadableResourceType,
+  DEFAULT_RESOURCE_IMG,
 } from "ol-utilities"
 import type { EmbedlyConfig } from "ol-utilities"
 import { theme } from "../ThemeProvider/ThemeProvider"
@@ -80,6 +81,7 @@ const Image = styled.img<{ aspect: number }>`
   aspect-ratio: ${({ aspect }) => aspect};
   border-radius: 8px;
   width: 100%;
+  object-fit: cover;
 `
 
 const SkeletonImage = styled(Skeleton)<{ aspect: number }>`
@@ -169,6 +171,10 @@ const ImageSection: React.FC<{
         alt={resource?.image.alt ?? ""}
       />
     )
+  } else if (resource) {
+    return (
+      <Image src={DEFAULT_RESOURCE_IMG} aspect={config.width / config.height} />
+    )
   } else {
     return (
       <SkeletonImage

diff --git a/frontends/ol-utilities/src/learning-resources/learning-resources.ts b/frontends/ol-utilities/src/learning-resources/learning-resources.ts
@@ -28,7 +28,7 @@ const embedlyCroppedImage = (
   )}&height=${height}&width=${width}&grow=true&animate=false&errorurl=${BLANK_IMAGE}`
 
 const DEFAULT_RESOURCE_IMG = new URL(
-  "/static/images/default_resource_thumb.jpg",
+  "/static/images/default_resource.jpg",
   window.location.origin,
 ).toString()