🔗 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