copeium
This commit is contained in:
@@ -35,7 +35,7 @@ collections:
|
||||
- { label: "Date", name: "date", widget: "datetime" }
|
||||
- { 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" }
|
||||
|
||||
|
||||
|
||||
@@ -15,62 +15,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>
|
||||
// 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>
|
||||
// Register the OSM shortcode as an editor component
|
||||
|
||||
Reference in New Issue
Block a user