misc

2025-06-09 22:44:04 +02:00
parent 4567dc0038
commit c76dad43d8
11 changed files with 52 additions and 17 deletions
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -28,11 +28,13 @@ collections:
          label: "Authors",
          name: "authors",
          widget: "select",
-          multiple: true,
-          options: ["bob", "jane", "peter", "kate"],
+          multiple: False,
+          options: ["Benno Lorenz"],
        }
      - { label: "Date", name: "date", widget: "datetime" }
      - { label: "Draft", name: "draft", widget: "boolean", default: true }
-      - { label: "Cover Image", name: "image", widget: "image" }
+      - { label: "Cover Image", name: "image", widget: "prefixed-image" }
+      - { label: "Cover Style", name: "cover_style", widget: "select", options: ["basic", "big", "background", "thumbAndBackground"], default: "default" }
+      - { label: "images", name: "images", widget: "image", multiple: true }
      - { label: "Body", name: "body", widget: "markdown" }
  
--- a/static/admin/index.html
+++ b/static/admin/index.html
@@ -11,5 +11,6 @@
  <body>
    <!-- Include the script that builds the page and powers Decap CMS -->
    <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
+    <script src="prefixed-image-widget.js"></script>
  </body>
 </html>
--- a/static/admin/prefixed-image-widget.js
+++ b/static/admin/prefixed-image-widget.js
@@ -0,0 +1,38 @@
+import React from "react";
+
+class PrefixedImageControl extends React.Component {
+  handleChange = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    // Add your prefix here
+    const prefix = "feature-";
+    const newFile = new File([file], prefix + file.name, { type: file.type });
+
+    // Use Decap's media library to persist the file
+    const { onChange, mediaPaths, field } = this.props;
+    const uploaded = await this.props.mediaLibrary.persistMedia(newFile);
+
+    // Save the public path
+    onChange(uploaded.public_path || uploaded.url);
+  };
+
+  render() {
+    const value = this.props.value || "";
+    return (
+      <div>
+        <input type="file" accept="image/*" onChange={this.handleChange} />
+        {value && <img src={value} alt="" style={{ maxWidth: "200px" }} />}
+      </div>
+    );
+  }
+}
+
+const PrefixedImageWidget = {
+  name: "prefixed-image",
+  controlComponent: PrefixedImageControl,
+  previewComponent: ({ value }) =>
+    value ? <img src={value} alt="" style={{ maxWidth: "200px" }} /> : null,
+};
+
+window.CMS.registerWidget(PrefixedImageWidget.name, PrefixedImageWidget.controlComponent, PrefixedImageWidget.previewComponent);