Consumer Image Styles

Consumer Image Styles integrates with JSON:API to provide image styles to your images in your decoupled project. Use this module if you need image styles when working with decoupled Drupal using the JSON API module.

What version?

Use version 3.x with the latest JSON:API 2.x. Use 2.x for the legacy JSON:API 1.x.

When should I use this module

This is a lower budget alternative to services like Cloudinary, Akamai Image Converter, etc. This module will cover your needs in 90% of the decoupled projects.

Usage

1. Register your consumer in /admin/config/services/consumers. A consumer is something like Marketing Vue.js Site, iOS application, …
2. Select the image styles from your site applicable to the consumer.
3. Identify your JSON API requests according to the documentation in the Consumers project (or use a dafault consumer as introduced in drupal/consumers@^1.7)

The will be a derivatives section in the meta for your image files in JSON API. Something like:

…
  "meta": {
    "imageDerivatives": {
      "links": {
        "medium: {
          "href": "http://example.org/sites/…/medium/…/img.png?itok=LQM1dnmK",
          "meta": {
            "rel": [
                "drupal://jsonapi/extensions/consumer_image_styles/links/relation-types/#derivative"
            ]
          }
        },
      }
    }
  }
…

Image Styles at the Field Level

In 3.x we changed the output a bit and introduced the concept of image styles at the field item level. To enable them you'll need to configure the image field you want image styles on using JSON:API Extras. This will also give you the ability to further refine the image styles for that particular field (on top of the ones selected at the consumer level).

Contenta CMS

This module is part of the Contenta CMS decoupled distribution and integrates with Contenta JS. Learn more about these projects: