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 4 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
61 changes: 61 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,61 @@
import React from "react";

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

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;
}

const scaleStyle: React.CSSProperties = {
transform: "scale(1.2)",
transformOrigin: "center",
};

const imgFillStyle: React.CSSProperties = {
width: "100%",
height: "100%",
objectFit: "cover",
objectPosition: "center",
display: "block",
...scaleStyle,
};

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

if (gatsbyImage) {
return (
<GatsbyImage
image={gatsbyImage}
alt=""
className={className}
imgStyle={scaleStyle}
/>
);
}

if (figure.url) {
return (
<div className={className}>
<img src={figure.url} alt="" style={imgFillStyle} />
</div>
Comment thread
meganrm marked this conversation as resolved.
Outdated
);
}

return null;
};

export default FigureThumbnail;
108 changes: 75 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 Down Expand Up @@ -40,6 +43,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 +74,63 @@ 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
figure={firstFigure}
className={thumbnail}
/>
</Link>
)}
</li>
);
})}
</ul>
{count !== undefined && (
<div>
Expand Down
22 changes: 22 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,17 @@
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 rgba(255, 110, 0, 0.4),
0 0 10px 2px rgba(255, 110, 0, 0.2),

@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.

Should these color constants be declared somewhere else as variables?

0 2px 8px rgba(0, 0, 0, 0.15);
}
Loading