This commit is contained in:
2025-06-10 23:41:51 +02:00
parent 9a7b54c343
commit 6350e23692
2 changed files with 2 additions and 58 deletions

View File

@@ -35,7 +35,7 @@ collections:
- { label: "Date", name: "date", widget: "datetime" } - { label: "Date", name: "date", widget: "datetime" }
- { label: "Draft", name: "draft", widget: "boolean", default: true } - { label: "Draft", name: "draft", widget: "boolean", default: true }
- { label: "Cover Image", name: "image", widget: "prefixed-image", required : false } - { label: "Cover Image", name: "image", widget: "image", required : false }
- { label: "Cover Style", name: "cover_style", widget: "select", options: ["basic", "big", "background", "thumbAndBackground"], default: "default" } - { label: "Cover Style", name: "cover_style", widget: "select", options: ["basic", "big", "background", "thumbAndBackground"], default: "default" }

View File

@@ -15,63 +15,7 @@
<body> <body>
<!-- Include the script that builds the page and powers Decap CMS --> <!-- 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="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
<script>
// Define the helper functions needed for React components
const h = window.React.createElement;
const createClass = window.createClass || window.ReactCreateClass;
// 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> <script>
// Register the OSM shortcode as an editor component // Register the OSM shortcode as an editor component
window.CMS.registerEditorComponent({ window.CMS.registerEditorComponent({