copium

2025-06-10 23:20:32 +02:00
parent 788a94ebe8
commit 2c78017019
1 changed files with 129 additions and 72 deletions
--- a/static/admin/index.html
+++ b/static/admin/index.html
@@ -1,17 +1,73 @@
 <!DOCTYPE html>
 <html>
+
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.css"> <!-- Unminfied -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.min.css"> <!-- Untested, but Minified -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.css">
+  <!-- Unminfied -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.min.css">
+  <!-- Untested, but Minified -->
  <title>CMS for my privat page</title>
 </head>
+
 <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>
+  <script>
+    // Register the proper prefixed image widget
+    CMS.registerWidget("prefixed-image", {
+      // Control component (what editors interact with)
+      control: createClass({
+        handleChange: function(e) {
+          const file = e.target.files[0];
+          if (!file) return;
+          
+          // Add prefix to filename
+          const prefix = "feature-";
+          const fileName = file.name.startsWith(prefix) ? file.name : prefix + file.name;
+          const newFile = new File([file], fileName, { type: file.type });
+          
+          // Upload the file with the new name
+          this.props.mediaPersist([newFile]).then(urls => {
+            if (urls && urls.length > 0) {
+              this.props.onChange(urls[0]);
+            }
+          });
+        },
+        
+        render: function() {
+          const value = this.props.value;
+          return h('div', {},
+            h('input', { 
+              type: 'file',
+              accept: 'image/*',
+              onChange: this.handleChange 
+            }),
+            value && h('img', { 
+              src: value, 
+              alt: '', 
+              style: { maxWidth: '200px', marginTop: '10px' } 
+            })
+          );
+        }
+      }),
+      
+      // Preview component (how it appears in the preview pane)
+      preview: createClass({
+        render: function() {
+          return this.props.value ? 
+            h('img', { 
+              src: this.props.value, 
+              alt: '', 
+              style: { maxWidth: '100%' } 
+            }) : null;
+        }
+      })
+    });
+  </script>
+
  <script>
    // Register the OSM shortcode as an editor component
    window.CMS.registerEditorComponent({
@@ -82,4 +138,5 @@
    });
  </script>
 </body>
+
 </html>