link on image / clickable image in the markdown widget

[krodelabestiole]

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)

[erezrokah]

Hi @krodelabestiole, is [this][https://github.com//issues/1293]) what you're looking for?
We have an ongoing PR #4700 for it.
If that's not your use case, can you please follow the issue template https://github.com/netlify/netlify-cms/issues/new?labels=type%3A+feature&template=feature_request.md&title=Please+replace+with+a+clear+and+descriptive+title so we can better understand it.

[krodelabestiole]

Hi @krodelabestiole, is [this][https://github.com//issues/1293]) what you're looking for?

No, it is not.

If that's not your use case, can you please follow the issue template

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.
Clickable images would be hyperlinks images (instead of the more classic hyperlink text).
I don't think it's much recommended by the W3C, but it's widely used on the web : click on an image -> access to new 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
(for instance, there might be other ways to think this interface).

Then this field once filled would generate such markdown :
[![alt-text](image.jpg)](http://www.example.com/)
that SSG would translate in HTML to something like this :
<a href="http://www.example.com"><img src="image.jpg" alt="alt-text"></a>

Describe alternatives you've considered

Editing markdown is not a great option for some end users.

Am I clear ?

[erezrokah]

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

[krodelabestiole]

I think this is a use case for https://www.netlifycms.org/docs/custom-widgets/#registereditorcomponent WDYT?

Might be, but I highly doubt I am the only one interested by this feature...
Think about all the thumbnails that display the bigger images when clicked, the t-shirt picture that brings you to the corresponding e-commerce article, the thumbnail that brings to the full article, video or whatever....

[erezrokah]

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.
Writing a custom editor component for that and sharing its code here would be a good start.

[krodelabestiole]

ok, thank you !

[martinjagodic]

Closing as stale.

[GabZanMacaw]

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>