https://github.com/rbeer/gatsby-remark-image-attributes
Gatsby remark plugin to processes images with attributes in markdown.
https://github.com/rbeer/gatsby-remark-image-attributes
gatsby gatsby-plugin images markdown mdx plugin remark
Last synced: about 1 month ago
JSON representation
Gatsby remark plugin to processes images with attributes in markdown.
- Host: GitHub
- URL: https://github.com/rbeer/gatsby-remark-image-attributes
- Owner: rbeer
- License: mit
- Created: 2020-03-22T15:17:03.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-09T21:59:42.000Z (over 1 year ago)
- Last Synced: 2024-04-24T23:02:13.403Z (about 1 year ago)
- Topics: gatsby, gatsby-plugin, images, markdown, mdx, plugin, remark
- Language: TypeScript
- Homepage: https://remark-image-attributes.netlify.app/
- Size: 380 KB
- Stars: 3
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# gatsby-remark-image-attributes
Creates HTML image markup with style and data-* attributes from [`mdAST Image`](https://github.com/syntax-tree/mdast#image) nodes with attributes in their title.
    
```md
┌─────────── styleAttributes ───────────┐ reserved for image title
│ ▼ ▼ ▼ │ ▼
▲ ▲
Leading # dataAttribute
```
yields
```html
```
Note that `title` is a reserved attribute key, i.e. declaring `data-title` is not possible. `title` image attributes will always become the HTML attribute `title` of the `![]()
`.
The plugin handles [`mdAST HTML`](https://github.com/syntax-tree/mdast#html) nodes created by [gatsby-remark-images](https://github.com/gatsbyjs/gatsby/master/packages/gatsby-remark-images/); possibly other image-processing plugins. Order of plugins in your gatsby-config matters.
---
Some examples
- [CSS Properties](https://remark-image-attributes.netlify.app/#css-properties)
* [Positioning](https://remark-image-attributes.netlify.app/#positioning)
* [SVG](https://remark-image-attributes.netlify.app/#svg)
* [Inline and Lists](https://remark-image-attributes.netlify.app/#inline-and-lists)
- [data-* attributes](https://remark-image-attributes.netlify.app/#data---attributes)
[](https://remark-image-attributes.netlify.app) [](https://github.com/rbeer/gatsby-remark-image-attributes-demo/tree/gatsby3)
## Installation
```bash
npm install --save gatsby-remark-image-attributes
```
## How to use
- [Basic](https://github.com/rbeer/gatsby-remark-image-attributes/wiki/How-to-use)
- [with gatsby-remark-images](https://github.com/rbeer/gatsby-remark-image-attributes/wiki/How-to-use#gatsby-remark-images)
- [with gatsby-plugin-mdx](https://github.com/rbeer/gatsby-remark-image-attributes/wiki/How-to-use#gatsby-plugin-mdx)
#### .gatsby-img-attributes
Generated markup has a CSS class `gatsby-img-attributes`. The plugin itself does not come with any properties for that class; you can use it to apply default styling to all images with attributes.
## Options
|Name|Type|Default|Description|
|:-:|:-:|:-:|-|
| [dataAttributes](#dataattributes) |Boolean| `false` | Set to `true` if you want attributes not recognized as styleAttribute to be added as data- attribute to the image.
| [styleAttributes](#styleattributes) ||| Deprecated ^1.0.0
#### styleAttributes
_As of v1.0.0, this option is deprecated and the behavior described below will always apply._
The plugin uses a [list of all CSS properties](https://github.com/rbeer/gatsby-remark-image-attributes/blob/master/src/css-props.json), as defined by the [W3C](https://www.w3.org/Style/CSS/all-properties.en.html), to decide whether an attribute is to be added to the image's style or not.
#### dataAttributes
When `options.dataAttributes` is `true`, the plugin will add all attributes whose key isn't a [CSS property](https://www.w3.org/Style/CSS/all-properties.en.html#list) as data-* attribute to the image.
_gatsby-config.js_:
```js
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-image-attributes`,
options: {
dataAttributes: true
}
}
]
}
}
];
```
_md_:
```md
```
Where `position` and `height` are recognized as `styleAttributes`, `tool-tip` is not and due to `options.dataAttributes: true` applied as `data-` attribute:
```html
```