decap cms image thing update

Author: yujonglee

apps/web/content/handbook/how-we-work/4.cms.mdx

@@ -16,6 +16,11 @@ summary: "We use GitHub as our CMS, keeping us open-source friendly and transpar
 * We use [GitHub](https://decapcms.org/docs/github-backend) as storage backend, with [Netlify Git Gateway](https://docs.netlify.com/manage/security/secure-access-to-sites/git-gateway) to authenticate users.
 * New users should be invited at `https://app.netlify.com/projects/hyprnote/configuration/identity#users`.
 
-### Editor
+### Non-Developer
 
-![](/images/handbook/screenshot-2026-01-02-at-2.35.42 pm.png "decap_workflow")
+* When uploading Images, rename file first, and then upload.
+* Workflow
+
+#### Workflow
+
+![](/images/handbook/decap-workflow.png)

apps/web/public/admin/config.yml

@@ -9,7 +9,7 @@ public_folder: /images
 
 collections:
   - name: articles
-    label: Blog Articles
+    label: Blog
     folder: apps/web/content/articles
     media_folder: /apps/web/public/images/blog
     public_folder: /images/blog

…/screenshot-2026-01-02-at-2.35.42 pm.png …ublic/images/handbook/decap-workflow.pngapps/web/public/images/handbook/screenshot-2026-01-02-at-2.35.42 pm.png renamed to apps/web/public/images/handbook/decap-workflow.png apps/web/public/images/handbook/screenshot-2026-01-02-at-2.35.42 pm.png renamed to apps/web/public/images/handbook/decap-workflow.png

@@ -1,5 +1,6 @@
 import type { ImageProps } from "@unpic/react";
 import { Image as UnpicImage } from "@unpic/react/base";
+import { transform } from "unpic/providers/netlify";
 
 export const Image = ({
   layout = "constrained",
@@ -13,6 +14,7 @@ export const Image = ({
   return (
     <UnpicImage
       {...(props as any)}
+      transformer={transform}
       layout={layout}
       background={background}
       style={{