add cloudinary image upload support

gatsby-node.js

@@ -48,6 +48,12 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
             options: [NavBarDropdownItem]
             }
 
+            type MarkdownRemarkFrontmatterHeader {
+            title: String
+            subtitle: String
+            background: File @fileByRelativePath
+            }
+
             `,
         `type GeneticModification {
                 gene: MarkdownRemark @link(by: "frontmatter.geneId", from: "gene")
@@ -59,6 +65,9 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
             image: File @fileByRelativePath
             caption: String
             }
+            type ImagesAndVideos {
+            images: [ImgWithCaption]
+            }
             type Diagram {
             title: String
             images: [ImgWithCaption]
@@ -97,6 +106,7 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
                 parental_line: MarkdownRemark @link(by: "frontmatter.cell_line_id")
                 funding_text:  String @md
                 footer_text: String @md
+                images_and_videos: ImagesAndVideos
                 genomic_characterization: MarkdownRemarkFrontmatterGenomic_characterization
                 stem_cell_characteristics: StemCellCharacteristics
                 catalogs: [NavBarDropdownItem]
@@ -108,6 +118,38 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
     createTypes(typeDefs);
 };
 
+// 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;
+                },
+            },
+        },
+    });
+};
+
 exports.createPages = ({ actions, graphql }) => {
     const { createPage } = actions;
 

src/cms/cloudinaryConfig.ts

@@ -0,0 +1,6 @@
+// Cloudinary Upload Widget configuration
+// These are public, client-side values (not secrets).
+// 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";

src/cms/cms.tsx

@@ -1,14 +1,27 @@
 import CMS from "decap-cms-app";
 import cloudinary from "decap-cms-media-library-cloudinary";
 import uploadcare from "decap-cms-media-library-uploadcare";
+import React from "react";
 
 import CellLinePreview from "./preview-templates/CellLinePreview";
 import DiseaseCatalogPreview from "./preview-templates/DiseaseCatalogPreview";
 import DiseaseCellLinePreview from "./preview-templates/DiseaseCellLinePreview";
 import GeneNamePreview from "./preview-templates/GeneNamePreview";
+import {
+    CloudinaryImagePreview,
+    CloudinaryImageWidget,
+} from "./widgets/CloudinaryImageWidget";
 
 CMS.registerMediaLibrary(uploadcare);
 CMS.registerMediaLibrary(cloudinary);
+
+// Decap CMS's registerWidget type doesn't include `entry` in control props,
+// but it passes it at runtime (Immutable.js Map). Cast required here.
+CMS.registerWidget(
+    "cloudinary-image",
+    CloudinaryImageWidget as unknown as React.FC,
+    CloudinaryImagePreview,
+);
 CMS.registerPreviewStyle(
     "https://cdnjs.cloudflare.com/ajax/libs/antd/4.4.3/antd.min.css",
 );