@bradgarropy/rehype-cloudinary-image-size

🖼 rehype cloudinary image size

Rehype plugin to add width and height to Cloudinary images.

📦 Installation

This package is hosted on npm.

npm install @bradgarropy/rehype-cloudinary-image-size

🥑 Usage

This is a rehype plugin for use in a unified chain that modifies HTML syntax trees. It adds width and height attributes to all img tags that reference images hosted on Cloudinary.

import {rehypeCloudinaryImageSize} from "@bradgarropy/rehype-cloudinary-image-size"
import rehypeParse from "rehype-parse"
import rehypeStringify from "rehype-stringify"
import {unified} from "unified"

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

const html = await processor.process(
    '<img src="https://res.cloudinary.com/bradgarropy/image/upload/f_auto,q_auto/bradgarropy.com/pages/home/profile.jpg">',
)

console.log(html)

// output
// <img
//   src="https://res.cloudinary.com/bradgarropy/image/upload/f_auto,q_auto/bradgarropy.com/pages/home/profile.jpg"
//   width="460"
//   height="460"
// >

📖 API Reference

use(rehypeCloudinaryImageSize)

This plugin only adds width and height attributes to images hosted on Cloudinary. All other sources are ignored. Any existing attributes are preserved.

<!-- input -->
<img
    src="https://res.cloudinary.com/bradgarropy/image/upload/f_auto,q_auto/bradgarropy.com/pages/home/profile.jpg"
    alt="description"
/>

<!-- output -->
<img
    src="https://res.cloudinary.com/bradgarropy/image/upload/f_auto,q_auto/bradgarropy.com/pages/home/profile.jpg"
    alt="description"
    width="460"
    height="460"
/>

❔ 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 💻 📖 ⚠️ 🚇