JSON:API Image Styles

Overview

JSON:API Image Styles is a JSON:API extension that exposes image style urls of a Drupal image to jsonapi export. This allows e.g. crop-defined image styles to be consumed by frontend builds.

Usage

By default all image styles are exposed to the file entity attributes in JSON:API output. For controlling exposed image styles the module provides a configuration option /admin/config/services/jsonapi/image_styles to expose only selected styles.

Version 3.x

Version 3.x of this module is recommended for Drupal 9 and the minimum PHP version required is PHP 7.4. Unfortunately this cannot be enforced by the module composer.json because Drupal 9.x core enforces a PHP 7.3 minimum in CI.

The following is an example of data added to the attributes of an image file object in a JSON:API response:

"image_style_uri": {
  "large": "[...]/styles/large/public/2021-09/headshot-2048.jpg?itok=fXgx7-bT",
  "medium": "[...]/styles/medium/public/2021-09/headshot-2048.jpg?itok=zwwMSGsi",
  "thumbnail": "[...]/styles/thumbnail/public/2021-09/headshot-2048.jpg?itok=eMUH72Al",
  "wide": "[...]/styles/wide/public/2021-09/headshot-2048.jpg?itok=FDUaWhH0"
}

Version 2.x

Version 2.x of this module supports Drupal 8 and PHP 7.3. Version 3.x is recommended for Drupal 8 users. Support for 2.x will end with the Drupal 8 EOL on 2 November 2021 (see PSA-2021-2021-06-29). After that date only security updates will be considered for 2.x.

Data added to JSON:API responses by 2.x differs from 3.x. The following is an example of data added to the attributes of an image file object in a JSON:API response:

"image_style_uri": [
  {
    "large": "[...]/styles/large/public/2021-09/headshot-2048.jpg?itok=fXgx7-bT"
  },
  {
    "thumbnail": "[...]/styles/thumbnail/public/2021-09/headshot-2048.jpg?itok=eMUH72Al"
  },
  {
    "wide": "[...]/styles/wide/public/2021-09/headshot-2048.jpg?itok=FDUaWhH0"
  },
  {
    "medium": "[...]/styles/medium/public/2021-09/headshot-2048.jpg?itok=zwwMSGsi"
  }
]

Similar module

Consumer Image Styles provides similar functionality but with more complex setup, configurations and dependencies.