add cloudinary image upload support by rugeli · Pull Request #428 · AllenCell/cell-catalog

rugeli · 2026-04-07T22:38:28Z

Problem

What is the problem this work solves, including
step 1 of #88

Solution

What I/we did to solve this problem

added a custom widget that opens the cloudinary upload widget , auto-derives upload folders from the cms entry.
- one folder per cell line, e.g. cell-lines/AICS-{id}-{clone}
- on successful upload, the widget stores the cloudinary img url into markdown frontmatter image field
created a shared component ImageRenderer to handle both gastby images(GatsbyImage) and external urls (<img>)
added image_url field via createResolvers in gatsby-node.js.
- for a local image, image resolves to GatsbyImage, image_url is null
- for cloudinary image urls, image is null and image_url carries the url

Notes:
This is mainly to show how Cloudinary can work with our current image management. With this change, images can now be uploaded to Cloudinary, while local images rendering still works the same as it does on main.

Things we can decide separately later:

whether porting the existing local images in this repo to cloud storage
in idea-board, implement a similar upload flow if we want to move forward with cloud image storage

Not yet implemented:

removing images from Cloudinary folders, except through the Cloudinary UI

Type of change

Please delete options that are not relevant.

New feature (non-breaking change which adds functionality)

Steps to Verify:

on admin page, edit a cell line entry and use the new image upload widget
cloudinary upload widget should open and upload to the correct folder, link to gallery (lmk if you have any issues opening or viewing)
all images on the site should be rendered

Screenshots (optional):

Show-n-tell images/animations here

in Cloudinary, images are stored in designated folder structure

on the admin page, users can upload images to the cell line folder in Cloudinary. Local image preview remains unchanged.

but if clicks on Replace Image for a local image, the replacement image is uploaded to Cloudinary instead.

netlify · 2026-04-07T23:05:14Z

✅ Deploy Preview for cell-catalog ready!

Name	Link
🔨 Latest commit	`6f09b16`
🔍 Latest deploy log	https://app.netlify.com/projects/cell-catalog/deploys/69f1308d95a84900087b4bf0
😎 Deploy Preview	https://deploy-preview-428--cell-catalog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

Adds Cloudinary-backed image uploads to the Decap CMS admin flow while preserving existing local-image rendering by introducing a dual image model (Gatsby image data vs external URL) and plumbing that URL through Gatsby GraphQL.

Changes:

Added a custom Decap CMS widget (cloudinary-image) that uploads to Cloudinary and writes the resulting URL into frontmatter.
Introduced ImageRenderer + ImageSource to render either GatsbyImage data or external <img src=...> URLs, and updated consumers accordingly.
Added an image_url GraphQL field (via createResolvers) and updated relevant queries to fetch it alongside existing image fields.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
static/admin/config.yml	Switches image widgets to the new `cloudinary-image` widget (including header background).
src/utils/mediaUtils.ts	Adds `isExternalUrl`, updates image unpacking to support `image_url`, and changes thumbnail extraction to return `ImageSource`.
src/templates/disease-cell-line.tsx	Queries `image_url` alongside existing image fields.
src/templates/cell-line.tsx	Queries `image_url` alongside existing image fields (including media + diagrams + rnaseq).
src/style/images-and-videos.module.css	Adjusts media container height styling.
src/components/shared/ImageRenderer.tsx	New shared renderer for Gatsby images vs external URLs.
src/components/shared/DiagramCard.tsx	Uses `ImageRenderer` and updates prop typing to accept `ImageSource`.
src/components/Thumbnail.tsx	Uses `ImageRenderer` and updates prop typing to accept `ImageSource`.
src/components/SubPage/convert-data.ts	Uses `unpackImageData` to normalize images into `ImageSource`.
src/components/ParentalLineModal.tsx	Updates thumbnail rendering to support `ImageSource` via `ImageRenderer`.
src/components/ImagesAndVideo/MediaCard.tsx	Replaces direct `GatsbyImage` usage with `ImageRenderer`.
src/components/ImagesAndVideo/ImagePreviewGroup.tsx	Supports previewing external URLs by bypassing `getSrc` when needed.
src/components/CellLineTable/SharedColumns.tsx	Updates thumbnail rendering logic to support external URLs.
src/component-queries/types.ts	Introduces `ImageSource` and updates frontmatter/result types for Cloudinary URL support.
src/component-queries/NormalCellLines.tsx	Adds `image_url` to the table query.
src/component-queries/DiseaseCellLines.tsx	Adds `image_url` to the disease table query.
src/cms/widgets/CloudinaryImageWidget.tsx	New Cloudinary upload widget implementation (script loading, folder derivation, preview).
src/cms/cms.tsx	Registers the custom `cloudinary-image` widget with Decap CMS.
src/cms/cloudinaryConfig.ts	Adds Cloudinary widget configuration constants.
gatsby-node.js	Adds schema/types/resolvers for `image_url` and introduces an `ImagesAndVideos` type.

Comments suppressed due to low confidence (1)

gatsby-node.js:68

ImagesAndVideos is now explicitly typed but only includes images. Existing GraphQL queries in src/templates/cell-line.tsx request images_and_videos { videos { ... } }, so this schema will either drop the videos field or rely on inference (which is brittle) and can break builds. Define a VideoWithCaption type and add videos: [VideoWithCaption] to ImagesAndVideos (or otherwise include the videos field explicitly) so the schema matches frontmatter usage.

        ` type ImgWithCaption {
            image: File @fileByRelativePath
            caption: String
            }
            type ImagesAndVideos {
            images: [ImgWithCaption]
            }
            type Diagram {
            title: String
            images: [ImgWithCaption]
            }

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

interim17

Haven't run this and left some questions, but non-blocking, looks good!

interim17 · 2026-05-08T19:00:05Z

+interface ImmutableMap {
+    get: (key: string) => unknown;
+}


Too bad we can't easily share this kind of code between cell catalog and idea board.

interim17 · 2026-05-08T19:05:26Z

+                                style={{
+                                    width: 192,
+                                    height: 192,
+                                    objectFit: "cover",


Is there a reason to do inline styling here?

interim17 · 2026-05-08T19:06:59Z

-  return file.childImageSharp?.gatsbyImageData?.images?.fallback?.src;
-}
+export const getImageSrcFromFileNode = (file: FileNode): string | undefined => {
+    return file.childImageSharp?.gatsbyImageData?.images?.fallback?.src;


I know its not new but all these chained optional operators look so odd to me after not being in this repo for a bit.

interim17 · 2026-05-08T19:08:15Z

+// Expose the raw image string as `image_url` for Cloudinary URL support.
+// The existing `image: File @fileByRelativePath` returns null for URLs,
+// so we need this field to pass through Cloudinary URLs to the frontend.
+exports.createResolvers = ({ createResolvers }) => {
+    const imageUrlResolver = {
+        image_url: {
+            type: "String",
+            resolve: (source) => {
+                const img = source.image;
+                if (typeof img === "string") return img;
+                return null;
+            },
+        },
+    };
+    createResolvers({
+        ImgWithCaption: imageUrlResolver,
+        RnaSeqRow: imageUrlResolver,
+        MarkdownRemarkFrontmatterEditing_designDiagramsImages: imageUrlResolver,
+        Diagram: imageUrlResolver,
+        MarkdownRemarkFrontmatterHeader: {
+            background_url: {
+                type: "String",
+                resolve: (source) => {
+                    const bg = source.background;
+                    if (typeof bg === "string") return bg;
+                    return null;
+                },
+            },
+        },
+    });
+};
+


Love bringing the resolver pattern over into cell catalog!

interim17 · 2026-05-08T19:12:59Z

+// The upload preset restricts what operations are allowed.
+export const CLOUDINARY_CLOUD_NAME = "dkg6lnogl";
+export const CLOUDINARY_UPLOAD_PRESET = "allen-cell";
+export const CLOUDINARY_API_KEY = "989839737788897";


Trying to believe the comment about about public facing, but it does smell strange to have something called API_KEY committed publicly! Could use .env? Maybe its fine.

interim17 · 2026-05-08T19:16:19Z

+        script.src =
+            "https://upload-widget.cloudinary.com/latest/global/all.js";


Maybe use a constannt?

rugeli · 2026-05-21T17:55:46Z

Note 5/21:

Tested the image (local&remote) rendering in the production build with yarn serve, looks good.
Converting this to draft, local image storage works well with our current image volume. Cloudinary is still a good option if the number of images grows later. This pr is ready to reopen whenever needed.

rugeli added 10 commits March 25, 2026 10:39

custom widget

b393ea8

accept image_url

d1e9cfa

image url type and util

85fda51

add render image url

d20693b

generalize image url function name

1430439

refactor: new prop ImageRenderer

2bfc2b5

use constants for cloudinary config

c618d37

refactor: add ImgWithCaption ton images

ff08245

maintain local images reviewable in admin page

a082cfd

resolve gatsby image properly

22f73f2

rugeli added 2 commits April 13, 2026 14:18

fall back to url if image is null

d3ba66c

shorter main image card

e63036a

rugeli marked this pull request as ready for review April 20, 2026 21:34

rugeli requested a review from Copilot April 20, 2026 21:34

Copilot started reviewing on behalf of rugeli April 20, 2026 21:34 View session

Copilot AI reviewed Apr 20, 2026

View reviewed changes

Comment thread src/cms/widgets/CloudinaryImageWidget.tsx

Comment thread src/cms/cloudinaryConfig.ts

Comment thread static/admin/config.yml

Comment thread src/cms/widgets/CloudinaryImageWidget.tsx

Comment thread src/cms/widgets/CloudinaryImageWidget.tsx

rugeli added 2 commits April 20, 2026 16:30

polling cap and null check

941ea56

respond to copilot's feedback: add image url support to background img

6f09b16

rugeli requested review from interim17 and meganrm May 1, 2026 21:03

interim17 approved these changes May 8, 2026

View reviewed changes

rugeli marked this pull request as draft May 21, 2026 17:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add cloudinary image upload support #428

add cloudinary image upload support #428
rugeli wants to merge 14 commits into
mainfrom
gallery

rugeli commented Apr 7, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Apr 7, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

interim17 left a comment

Uh oh!

interim17 May 8, 2026

Uh oh!

interim17 May 8, 2026

Uh oh!

interim17 May 8, 2026

Uh oh!

interim17 May 8, 2026

Uh oh!

interim17 May 8, 2026

Uh oh!

interim17 May 8, 2026

Uh oh!

rugeli commented May 21, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		script.src =
		"https://upload-widget.cloudinary.com/latest/global/all.js";

Conversation

rugeli commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Type of change

Steps to Verify:

Screenshots (optional):

Uh oh!

netlify Bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cell-catalog ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

interim17 left a comment

Choose a reason for hiding this comment

Uh oh!

interim17 May 8, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 May 8, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 May 8, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 May 8, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 May 8, 2026

Choose a reason for hiding this comment

Uh oh!

interim17 May 8, 2026

Choose a reason for hiding this comment

Uh oh!

rugeli commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rugeli commented Apr 7, 2026 •

edited

Loading

netlify Bot commented Apr 7, 2026 •

edited

Loading

rugeli commented May 21, 2026 •

edited

Loading