Skip to content

Add image thumbnails to idea list #103

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
meganrm merged 7 commits into from
Jun 11, 2026
Merged

Add image thumbnails to idea list #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3489322
style: add flex layout and thumbnail class to idea roll
meganrm Jun 2, 2026
501488e
feat: show image thumbnail in idea list when figure is available
meganrm Jun 2, 2026
c91eed3
style: pill thumbnail with orange glow on idea list
meganrm Jun 2, 2026
b9050f5
refactor: extract FigureThumbnail component from IdeaRoll
meganrm Jun 2, 2026
7ed3b01
move to stylesheet
meganrm Jun 9, 2026
8e0361f
Merge branch 'main' of https://github.com/AllenCell/idea-board into f…
meganrm Jun 11, 2026
cd7d620
reduce hardcoded values
meganrm Jun 11, 2026
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
52 changes: 52 additions & 0 deletions src/components/FigureThumbnail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from "react";

import { GatsbyImage, IGatsbyImageData, getImage } from "gatsby-plugin-image";

const { imgFill, scale } = require("../style/figure-thumbnail.module.css");

interface FigureThumbnailProps {
figure: {
url?: string | null;
file?: {
childImageSharp?: {

@ShrimpCryptid ShrimpCryptid Jun 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Just curious, Is there a non-sharp child image? (like a blurred thumbnail or something?)

gatsbyImageData: IGatsbyImageData;
} | null;
} | null;
};
className?: string;
style?: React.CSSProperties;
}

const FigureThumbnail: React.FC<FigureThumbnailProps> = ({
className,
figure,
style,
}) => {
const gatsbyImage = figure.file?.childImageSharp
? getImage(figure.file.childImageSharp)
: null;

if (gatsbyImage) {
return (
<GatsbyImage
image={gatsbyImage}
alt=""
className={className}
imgClassName={scale}
style={style}
/>
);
}

if (figure.url) {
return (
<div className={className} style={style}>
<img src={figure.url} alt="" className={imgFill} />
</div>
);
}

return null;
};

export default FigureThumbnail;
114 changes: 81 additions & 33 deletions src/components/IdeaRoll.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";

import { Link, graphql, useStaticQuery } from "gatsby";

import FigureThumbnail from "./FigureThumbnail";
import { TagPopover } from "./TagPopover";

const {
Expand All @@ -11,6 +12,8 @@ const {
listItem,
tagEyebrow,
tagSeparator,
textBlock,
thumbnail,
title,
} = require("../style/idea-roll.module.css");

Expand All @@ -24,6 +27,8 @@ interface IdeaRollProps {
count?: number;
}

const THUMBNAIL_SIZE = { width: 88, height: 56 };

const IdeaRoll = ({ count }: IdeaRollProps) => {
const queryData = useStaticQuery(graphql`
query IdeaRoll {
Expand All @@ -40,6 +45,22 @@ const IdeaRoll = ({ count }: IdeaRollProps) => {
type
name
}
preliminaryFindings {
Comment thread
toloudis marked this conversation as resolved.
figures {
type
url
file {
childImageSharp {
gatsbyImageData(
width: 88
height: 56
layout: FIXED
quality: 80

@toloudis toloudis Jun 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

magic numbers? they seem to be repeated in the css also, so I wonder if they can be factored out into one place somehow.

)
}
}
}
}
}
}
}
Expand All @@ -55,40 +76,67 @@ const IdeaRoll = ({ count }: IdeaRollProps) => {
return (
<>
<ul className={container}>
{ideas.map((item) => (
<li key={item.id} className={listItem}>
{item.tags.length > 0 && (
<div className={tagEyebrow}>
{item.tags.map((tag, i) => (
<React.Fragment key={tag}>
{i > 0 && (
<span
className={tagSeparator}
aria-hidden="true"
>
·
</span>
)}
<TagPopover
tag={tag}
currentSlug={item.slug}
className={eyebrowTag}
/>
</React.Fragment>
))}
{ideas.map((item) => {
const firstFigure =
item.preliminaryFindings?.figures?.[0] ?? null;

return (
<li key={item.id} className={listItem}>
<div className={textBlock}>
{item.tags.length > 0 && (
<div className={tagEyebrow}>
{item.tags.map((tag, i) => (
<React.Fragment key={tag}>
{i > 0 && (
<span
className={tagSeparator}
aria-hidden="true"
>
·
</span>
)}
<TagPopover
tag={tag}
currentSlug={item.slug}
className={eyebrowTag}
/>
</React.Fragment>
))}
</div>
)}
<Link to={item.slug} className={title}>
{item.title}
</Link>
<div className={byline}>
by{" "}
{item.authors
.map((a) => a.name)
.join(" · ")}
{item.dataset
? ` — ${item.dataset}`
: " — No public dataset"}
</div>
</div>
)}
<Link to={item.slug} className={title}>
{item.title}
</Link>
<div className={byline}>
by {item.authors.map((a) => a.name).join(" · ")}
{item.dataset
? ` — ${item.dataset}`
: " — No public dataset"}
</div>
</li>
))}

{firstFigure && (
<Link
to={item.slug}
tabIndex={-1}
aria-hidden="true"
>
Comment thread
meganrm marked this conversation as resolved.
<FigureThumbnail
style={{
width: THUMBNAIL_SIZE.width,
height: THUMBNAIL_SIZE.height,
}}
figure={firstFigure}
className={thumbnail}
/>
</Link>
)}
</li>
);
})}
</ul>
{count !== undefined && (
<div>
Expand Down
1 change: 1 addition & 0 deletions src/style/colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
--main-card-header-color: var(--primary-color);
--callout-box-bg-color: var(--PAGE_2);
--callout-box-border-color: var(--ALLEN_ORANGE);
--thumbnail-border-color: var(--ALLEN_ORANGE);

/* Layout */
--content-max-width: 1200px;
Expand Down
14 changes: 14 additions & 0 deletions src/style/figure-thumbnail.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.scale {
transform: scale(1.2);
transform-origin: center;
}

.imgFill {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.2);
transform-origin: center;
}
24 changes: 24 additions & 0 deletions src/style/idea-roll.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,20 @@
.listItem {
padding: 22px 0;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: flex-start;
gap: 14px;
}

.listItem:last-child {
border-bottom: none;
}

.textBlock {
flex: 1;
min-width: 0;
}

.tagEyebrow {
display: flex;
align-items: center;
Expand Down Expand Up @@ -64,3 +72,19 @@
font-weight: 400;
color: var(--text-secondary-color);
}

.thumbnail {
width: 88px;
height: 56px;
border-radius: 28px;
overflow: hidden;
flex-shrink: 0;
display: block;
box-sizing: border-box;
box-shadow:
0 0 0 1.5px
color-mix(in srgb, var(--thumbnail-border-color) 40%, transparent),
0 0 10px 2px
color-mix(in srgb, var(--thumbnail-border-color) 20%, transparent),
0 2px 8px rgba(0, 0, 0, 0.15);
}
Loading