gatsby-remark-image-attributes

Creates HTML image markup with style and data-* attributes from mdAST Image nodes with attributes in their title.

                                                 ┌─────────── styleAttributes ───────────┐          reserved for image title
                                                 │ ▼           ▼           ▼             │                ▼
![satisfied](https://foomoji.com/satisfied.png '#width=32px;height=32px;position=absolute;lightbox=true;title=Image Title')
                                                ▲                                             ▲
                                            Leading #                                   dataAttribute

yields

<img
  src="https://foomoji.com/satisfied.png"
  alt="satisfied"
  title="Image Title"
  style="width: 32px; height:32px; position: absolute;"
  data-lightbox="true"
  class="gatsby-img-attributes"
/>

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 <img>.

The plugin handles mdAST HTML nodes created by gatsby-remark-images; possibly other image-processing plugins. Order of plugins in your gatsby-config matters.

Some examples

• CSS Properties
  • Positioning
  • SVG
  • Inline and Lists
• data-* attributes

Installation

npm install --save gatsby-remark-image-attributes

How to use

• Basic
• with gatsby-remark-images
• with 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 |Boolean| false | Set to true if you want attributes not recognized as styleAttribute to be added as data- attribute to the image. | 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, as defined by the W3C, 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 as data-* attribute to the image.

gatsby-config.js:

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-image-attributes`,
          options: {
            dataAttributes: true
          }
        }
      ]
    }
  }
];

md:

![happy](https://foomoji.com/happy.png '#tool-tip=Fancy image with tooltip;position=absolute;height=100px')

Where position and height are recognized as styleAttributes, tool-tip is not and due to options.dataAttributes: true applied as data- attribute:

<img
  src="https://foomoji.com/happy.png"
  alt="happy"
  style="position: absolute; height: 100px;"
  data-tool-tip="Fancy image with tooltip"
  class="gatsby-img-attributes"
/>