-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
link on image / clickable image in the markdown widget #4754
Comments
Hi @krodelabestiole, is [this][https://github.com//issues/1293]) what you're looking for? |
No, it is not.
I will try : Is your feature request related to a problem? Please describe. I would like people who edit content using Netlify CMS and its markdown widget to be able to insert clickable images in their markdown content. Describe the solution you'd like When adding an image in a content using the markdown widget, I would like an URL field to appear, next to ALT TEXT and TITLE Then this field once filled would generate such markdown : Describe alternatives you've considered Editing markdown is not a great option for some end users. Am I clear ? |
I think this is a use case for https://www.netlifycms.org/docs/custom-widgets/#registereditorcomponent WDYT? You could write one based on https://github.com/netlify/netlify-cms/blob/04bc8ee74c493e5d6aa2842825670e10b31fb17f/packages/netlify-cms-editor-component-image/src/index.js |
Might be, but I highly doubt I am the only one interested by this feature... |
Features are usually implemented based on issue up votes count, so it would make sense to integrate in the core once it has enough up votes. |
ok, thank you ! |
Closing as stale. |
For anyone coming across this issue in a Google search, this is the code I used to create an "image with link" editor component: <script>
CMS.registerEditorComponent({
label: "Image with link",
id: "image-with-link",
fromBlock: (match) =>
match && {
image: match[2],
alt: match[1],
title: match[4],
link: match[5],
},
toBlock: ({ alt, image, title, link }) =>
`[![${alt || ""}](${image || ""}${
title ? ` "${title.replace(/"/g, '\\"')}"` : ""
})](${link || ""})`,
toPreview: ({ alt, image, title, link }, getAsset, fields) => {
const imageField = fields?.find((f) => f.get("widget") === "image");
const src = getAsset(image, imageField);
return `<a target="_blank" href="${link || ""}"><img src="${src || ""}" alt="${alt || ""}" title="${title || ""}" /></a>`;
},
pattern: /^\[!\[(.*)\]\((.*?)(\s"(.*)")?\)\]\((.*?)(\s"(.*)")?\)$/,
fields: [
{
label: "Image",
name: "image",
widget: "image",
media_library: {
allow_multiple: false,
},
},
{
label: "Alt text",
name: "alt",
},
{
label: "Title",
name: "title",
},
{
label: "Link",
name: "link",
}
],
});
</script> |
since it's possible to have a link on an image in markdown :
[![alt-text](image.jpg)](http://www.example.com/)
would it be possible to have a link option (or any way to add an URL graphically) for the image field ?
(I've looked for an issue about that and could not find any, sorry if I missed something)
The text was updated successfully, but these errors were encountered: