imagifyjs?

[skywalk1411]

The same lib but for <img> ?

[nfrasser]

Hi @skywalk1411, you can do this with a custom render function . Example with linkify-string:

"Hello http://example.com/image.jpg".linkify({
  render: ({ tagName, attributes, content }) => {
    if (/\.(gif|jpe?g|png|svg)$/i.test(content)) {
      // URL ends with image extension
      return `<img src="${attributes.href}" />`
    } else {
      const attributeStr = "";
      for (const attr in attributes) {
        attributeStr += ` ${attr}=${attributes[attr]}`;
      }
      return `<${tagName}${attributeStr}>${content}</${tagName}>`;
    }
  },
});

[skywalk1411]

hello

Hi @skywalk1411, you can do this with a custom render function . Example with linkify-string:

"Hello http://example.com/image.jpg".linkify({
  render: ({ tagName, attributes, content }) => {
    if (/\.(gif|jpe?g|png|svg)$/i.test(content)) {
      // URL ends with image extension
      return `<img src="${attributes.href}" />`
    } else {
      const attributeStr = "";
      for (const attr in attributes) {
        attributeStr += ` ${attr}=${attributes[attr]}`;
      }
      return `<${tagName}${attributeStr}>${content}</${tagName}>`;
    }
  },
});

sorry to disturb you but what is the syntax with linkifyElement? why would I add "string". in front the linkifyElement function?

const options = {
    defaultProtocol: 'https',
    target: '_blank',
    render: ({ tagName, attributes, content }) => {
      if (/^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+/gm.test(content)) {
        return `<div class="ratio ratio-16x9"><iframe src="${attributes.href}" title="YouTube video" allowfullscreen></iframe></div>`;
      } else {
        let attributeStr = "";
        for (const attr in attributes) {
          attributeStr += ` ${attr}=${attributes[attr]}`;
        }
        return `<${tagName}${attributeStr}>${content}</${tagName}>`;
      }
    }
  };
  let test2 = document.querySelector(`div.container-fluid:nth-child(4)`);
  for (let i = 1; i <= test2.children.length - 1; i++) {
    let target = test2.children[i].children[1];
    //linkifyElement(target, options);
    linkifyElement(target, options);
  }```

[nfrasser]

@skywalk1411 please see the reference implementation here:
https://github.com/Hypercontext/linkifyjs/blob/8951997c7cb36808c2017fdf13069ad4dea3dbae/packages/linkify-element/src/linkify-element.js#L97-L116