Conversation
✅ Deploy Preview for cell-catalog ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
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+ImageSourceto render eitherGatsbyImagedata or external<img src=...>URLs, and updated consumers accordingly. - Added an
image_urlGraphQL field (viacreateResolvers) 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
ImagesAndVideosis now explicitly typed but only includesimages. Existing GraphQL queries insrc/templates/cell-line.tsxrequestimages_and_videos { videos { ... } }, so this schema will either drop thevideosfield or rely on inference (which is brittle) and can break builds. Define aVideoWithCaptiontype and addvideos: [VideoWithCaption]toImagesAndVideos(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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
What is the problem this work solves, including
step 1 of #88
Solution
What I/we did to solve this problem
ImageRendererto handle both gastby images(GatsbyImage) and external urls (<img>)image_urlfield viacreateResolversin gatsby-node.js.imageresolves toGatsbyImage,image_urlis nullimageis null andimage_urlcarries the urlNotes:
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:
Not yet implemented:
Type of change
Please delete options that are not relevant.
Steps to Verify:
Screenshots (optional):
Show-n-tell images/animations here
Replace Imagefor a local image, the replacement image is uploaded to Cloudinary instead.