@bradgarropy/rehype-image-links

🔗 rehype image links

Rehype plugin to wrap images in links.

📦 Installation

This package is hosted on npm.

npm install @bradgarropy/rehype-image-links

🥑 Usage

This is a rehype plugin for use in a unified chain that modifies HTML syntax trees. It wraps all img tags in a tags with a link to their original source.

import rehypeParse from "rehype-parse"
import rehypeStringify from "rehype-stringify"
import {unified} from "unified"

const processor = unified()
    .use(rehypeParse, {fragment: true})
    .use(rehypeImageLinks)
    .use(rehypeStringify)

const html = await processor.process(
    '<img src="https://example.com/photo.jpg" alt="alt text">',
)

console.log(file)

// output
// <a href="https://example.com/photo.jpg">
//     <img src="https://example.com/photo.jpg" alt="alt text" />
// </a>

📖 API Reference

use(rehypeImageLinks, options)

The options object is optional. Here are all the available options.

Name	Required	Default	Example	Description
classes	false	[]	["link", "fancy"]	List of classes to add to the a tag.
srcTransform	false	(url: string) => url	(url: string) => url.toLowerCase()	Function that modifies the src attribute on the img tag.
hrefTransform	false	(url: string) => url	(url: string) => url.toLowerCase()	Function that modifies the href attribute on the a tag.

If you provide the classes option, those classes will be combined into a string and added to the a tag. For example, if you provided {classes: ["link", "fancy"]} for the options, the result will look like this.

<!-- input -->
<img src="https://example.com/photo.jpg" alt="alt text" />

<!-- output -->
<a href="https://example.com/photo.jpg" class="link fancy">
    <img src="https://example.com/photo.jpg" alt="alt text" />
</a>

❔ Questions

🐛 report bugs by filing issues
📢 provide feedback with issues or on twitter
🙋🏼‍♂️ use my ama or twitter to ask any other questions

✨ contributors

Brad Garropy 💻 📖 ⚠️ 🚇