bennolor/hugoblog
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

unfortunately I can test this in dev...
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 48s
Details

Browse Source
This commit is contained in:
Benno Lorenz
2025-06-10 21:41:57 +02:00
parent f38f6ce270
commit 41d7d4ffc6
1 changed files with 53 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
static/admin/prefixed-image-widget.js
View File

@@ -1,47 +1,55 @@
class PrefixedImageControl extends React.Component { (function waitForCMSAndReact() {
openMediaLibrary = () => { if (!(window.CMS && window.React)) {
this.props.mediaLibrary.open({ setTimeout(waitForCMSAndReact, 50);
allowMultiple: false, return;
config: { allowMultiple: false }, }
controlID: this.props.forID, const React = window.React;
value: this.props.value,
field: this.props.field, class PrefixedImageControl extends React.Component {
onInsert: (files) => { openMediaLibrary = () => {
if (!files || files.length === 0) return; this.props.mediaLibrary.open({
const file = files[0]; allowMultiple: false,
const prefix = "feature-"; config: { allowMultiple: false },
// If already prefixed, don't double-prefix controlID: this.props.forID,
const fileName = file.name.startsWith(prefix) ? file.name : prefix + file.name; value: this.props.value,
const newFile = new File([file], fileName, { type: file.type }); field: this.props.field,
this.props.mediaLibrary.persistMedia(newFile).then((uploaded) => { onInsert: (files) => {
this.props.onChange(uploaded.public_path || uploaded.url); if (!files || files.length === 0) return;
}); const file = files[0];
}, const prefix = "feature-";
}); // If already prefixed, don't double-prefix
const fileName = file.name.startsWith(prefix) ? file.name : prefix + file.name;
const newFile = new File([file], fileName, { type: file.type });
this.props.mediaLibrary.persistMedia(newFile).then((uploaded) => {
this.props.onChange(uploaded.public_path || uploaded.url);
});
},
});
};
render() {
const value = this.props.value || "";
return (
React.createElement("div", null,
React.createElement("button", { type: "button", onClick: this.openMediaLibrary },
value ? "Change Image" : "Add Image"
),
value && React.createElement("img", { src: value, alt: "", style: { maxWidth: "200px", display: "block", marginTop: "1em" } })
)
);
}
}
const PrefixedImageWidget = {
name: "prefixed-image",
controlComponent: PrefixedImageControl,
previewComponent: ({ value }) =>
value ? React.createElement("img", { src: value, alt: "", style: { maxWidth: "200px" } }) : null,
}; };
render() { window.CMS.registerWidget(
const value = this.props.value || ""; PrefixedImageWidget.name,
return ( PrefixedImageWidget.controlComponent,
React.createElement("div", null, PrefixedImageWidget.previewComponent
React.createElement("button", { type: "button", onClick: this.openMediaLibrary }, );
value ? "Change Image" : "Add Image" })();
),
value && React.createElement("img", { src: value, alt: "", style: { maxWidth: "200px", display: "block", marginTop: "1em" } })
)
);
}
}
const PrefixedImageWidget = {
name: "prefixed-image",
controlComponent: PrefixedImageControl,
previewComponent: ({ value }) =>
value ? React.createElement("img", { src: value, alt: "", style: { maxWidth: "200px" } }) : null,
};
window.CMS.registerWidget(
PrefixedImageWidget.name,
PrefixedImageWidget.controlComponent,
PrefixedImageWidget.previewComponent
);