Content-Length: 289710 | pFad | https://github.com/decaporg/decap-cms/issues/4754

F5 link on image / clickable image in the markdown widget · Issue #4754 · decaporg/decap-cms · GitHub
Skip to content
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

Closed
krodelabestiole opened this issue Dec 22, 2020 · 8 comments
Closed

link on image / clickable image in the markdown widget #4754

krodelabestiole opened this issue Dec 22, 2020 · 8 comments
Labels
type: feature code contributing to the implementation of a feature and/or user facing functionality

Comments

@krodelabestiole
Copy link

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)

@krodelabestiole krodelabestiole added the type: feature code contributing to the implementation of a feature and/or user facing functionality label Dec 22, 2020
@krodelabestiole krodelabestiole changed the title link on image / clickable image link on image / clickable image in the markdown widget Dec 22, 2020
@erezrokah
Copy link
Contributor

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
Copy link
Author

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://clevelandohioweatherforecast.com//pFad.php?u=http%3A%2F%2Fwww.example.com"><img src="https://images.weserv.nl/?url=image.jpg&q=12&output=webp&max-age=110" alt="alt-text"></a>

Describe alternatives you've considered

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

Am I clear ?

@krodelabestiole
Copy link
Author

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
Copy link
Contributor

erezrokah commented Dec 22, 2020

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
Copy link
Author

ok, thank you !

@martinjagodic
Copy link
Member

Closing as stale.

@martinjagodic martinjagodic closed this as not planned Won't fix, can't repro, duplicate, stale May 12, 2023
@GabZanMacaw
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: feature code contributing to the implementation of a feature and/or user facing functionality
Projects
None yet
Development

No branches or pull requests

4 participants








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: https://github.com/decaporg/decap-cms/issues/4754

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy