Skip to content

Square aspect ratio for media resource images #1183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 28, 2024
Merged

Square aspect ratio for media resource images #1183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions frontends/mit-open/src/page-components/ResourceCarousel/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@ import type {
LearningResourcesSearchApiLearningResourcesSearchRetrieveRequest as SearchRequest,
FeaturedApiFeaturedListRequest as FeaturedListParams,
} from "api"

type CardProps = {
size?: "small" | "medium"
}
import type { LearningResourceCardProps } from "ol-components"

interface ResourceDataSource {
type: "resources"
Expand All @@ -27,7 +24,7 @@ type DataSource = ResourceDataSource | SearchDataSource | FeaturedDataSource

type TabConfig<D extends DataSource = DataSource> = {
label: React.ReactNode
cardProps?: CardProps
cardProps?: Pick<LearningResourceCardProps, "size" | "isMedia">
data: D
}

Expand Down
2 changes: 2 additions & 0 deletions frontends/mit-open/src/pages/HomePage/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,10 @@ const FeaturedCoursesCarousel = styled(ResourceCarousel)(({ theme }) => ({
}))
const MediaCarousel = styled(ResourceCarousel)(({ theme }) => ({
margin: "80px 0",
minHeight: "388px",
Copy link
Contributor Author

@jonkafton jonkafton Jun 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This preserves the height of the section as it was collapsing as I tabbed through the media types, though we may want to do this in the carousel itself.

[theme.breakpoints.down("md")]: {
margin: "40px 0",
minHeight: "418px",
},
}))

Expand Down
6 changes: 3 additions & 3 deletions frontends/mit-open/src/pages/HomePage/carousels.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const FEATURED_RESOURCES_CAROUSEL: ResourceCarouselProps["config"] = [
const MEDIA_CAROUSEL: ResourceCarouselProps["config"] = [
{
label: "All",
cardProps: { size: "small" },
cardProps: { size: "small", isMedia: true },
data: {
type: "resources",
params: {
Expand All @@ -58,15 +58,15 @@ const MEDIA_CAROUSEL: ResourceCarouselProps["config"] = [
},
{
label: "Videos",
cardProps: { size: "small" },
cardProps: { size: "small", isMedia: true },
data: {
type: "resources",
params: { resource_type: ["video"], limit: 12, sortby: "new" },
},
},
{
label: "Podcasts",
cardProps: { size: "small" },
cardProps: { size: "small", isMedia: true },
data: {
type: "resources",
params: { resource_type: ["podcast_episode"], limit: 12, sortby: "new" },
Expand Down
7 changes: 5 additions & 2 deletions frontends/ol-components/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,11 @@ const Body = styled.div`
margin: 16px;
`

const Image = styled.img<{ size?: Size }>`
const Image = styled.img<{ height?: number | string; size?: Size }>`
display: block;
width: 100%;
height: ${({ size }) => (size === "small" ? 120 : 170)}px;
height: ${({ height, size }) =>
height ?? (size === "small" ? "120px" : "170px")};
background-color: ${theme.custom.colors.lightGray1};
object-fit: cover;
`
Expand Down Expand Up @@ -147,6 +148,7 @@ type CardProps = {

type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
size?: Size
height?: number | string
style?: CSSProperties
}
type TitleProps = {
Expand Down Expand Up @@ -214,6 +216,7 @@ const Card: Card = ({ children, className, size, href }) => {
{image && (
<Image
size={size}
height={image.height}
{...(image as ImgHTMLAttributes<HTMLImageElement>)}
/>
)}
Expand Down
18 changes: 13 additions & 5 deletions frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,14 @@ const SkeletonImage = styled(Skeleton)<{ aspect: number }>`
padding-bottom: ${({ aspect }) => 100 / aspect}%;
`

const getEmbedlyUrl = (resource: LearningResource, size: Size) => {
const getEmbedlyUrl = (
resource: LearningResource,
size: Size,
isMedia: boolean,
) => {
const dimensions = {
small: { width: 190, height: 120 },
medium: { width: 298, height: 170 },
small: { width: 190, height: isMedia ? 190 : 120 },
medium: { width: 298, height: isMedia ? 298 : 170 },
}
return embedlyCroppedImage(resource.image!.url!, {
key: APP_SETTINGS.embedlyKey || process.env.EMBEDLY_KEY!,
Expand Down Expand Up @@ -116,6 +120,7 @@ interface LearningResourceCardProps {
resource?: LearningResource | null
className?: string
size?: Size
isMedia?: boolean
href?: string
onAddToLearningPathClick?: ResourceIdCallback | null
onAddToUserListClick?: ResourceIdCallback | null
Expand All @@ -126,16 +131,18 @@ const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
resource,
className,
size = "medium",
isMedia = false,
href,
onAddToLearningPathClick,
onAddToUserListClick,
}) => {
if (isLoading) {
const { width, height } = imgConfigs["column"]
const aspect = isMedia ? 1 : width / height
return (
<Card className={className} size={size}>
<Card.Content>
<SkeletonImage variant="rectangular" aspect={width / height} />
<SkeletonImage variant="rectangular" aspect={aspect} />
<Skeleton height={25} width="65%" sx={{ margin: "23px 16px 0" }} />
<Skeleton height={25} width="80%" sx={{ margin: "0 16px 35px" }} />
<Skeleton height={25} width="30%" sx={{ margin: "0 16px 16px" }} />
Expand All @@ -151,10 +158,11 @@ const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
<Card.Image
src={
resource.image?.url
? getEmbedlyUrl(resource, size)
? getEmbedlyUrl(resource, size, isMedia)
: DEFAULT_RESOURCE_IMG
}
alt={resource.image?.alt ?? ""}
height="auto"
/>
<Card.Info>
<Info resource={resource} />
Expand Down