This commit is contained in:
@@ -1,17 +1,73 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="robots" content="noindex" />
|
<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.css">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hithismani/responsive-decap@main/dist/responsive.min.css"> <!-- Untested, but Minified -->
|
<!-- 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>
|
<title>CMS for my privat page</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<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 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>
|
<script>
|
||||||
// Register the OSM shortcode as an editor component
|
// Register the OSM shortcode as an editor component
|
||||||
window.CMS.registerEditorComponent({
|
window.CMS.registerEditorComponent({
|
||||||
@@ -82,4 +138,5 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user