gcg-website/static/admin/shortcodes/image.js

65 lines
1.4 KiB
JavaScript
Raw Normal View History

import { Card, Image } from "./components/index.js";
import { md5 } from "../previews/page-previews/components/index.js";
const ImageShortcode = {
2023-05-29 16:22:34 +02:00
label: "Bild",
openTag: "{{< ",
closeTag: " >}}",
separator: " ",
toProps: (args) => {
if (args.length > 0) {
return {
src:
args
.find((arg) => arg.startsWith("src="))
?.split("=")[1]
.replaceAll('"', "") ?? "",
};
}
2023-05-29 16:22:34 +02:00
return { src: "" };
},
toArgs: ({ src }) => {
return [`src=\"${src}\"`];
},
control: ({ src, onChange, controlProps }) => {
const { collection, field, entry } = controlProps;
2023-05-29 16:22:34 +02:00
const handleChange = ({ path }) => {
onChange({ src: path });
};
2023-05-29 16:22:34 +02:00
const handleOpenMediaLibrary = useMediaInsert(
src,
{ collection, field },
handleChange
);
const assetSource = useMediaAsset(src, collection, field, entry);
2023-05-29 16:22:34 +02:00
return Card(
Image({
label: "Bild",
assetSource,
handleOpenMediaLibrary,
})
);
},
preview: ({ src }) => {
return h(
"div",
{ className: "col-lg-3 col-md-4 col-sm-6" },
h(
"a",
{ className: "vb-gallery", "data-gall": md5(src) },
h("img", {
className: "img-thumbnail w-100 h-100",
style: { objectFit: "cover" },
src,
})
)
);
},
};
export default ImageShortcode;