Including image styles in your module or theme in Drupal 8

Today I have a small practical tipp for those, who want to include a custom image style in their module or theme in Drupal 8.

In Drupal 8, image styles are configuration entities like many other things and therefore have to be included as YAML files. That's pretty easy thanks to the new powerful Configuration API. There's already a very good explanation on how to include general configuration in a Drupal 8 module in the Drupal Community Documentation. Quickly summarized, you can use the admin UI to export any configuration entity and just need to remove the "uuid" from the exported configuration.

Additionally, there's also already a special page about including image styles in a module or theme in the documentation. There can be found the following "black and white" image style example:

langcode: en
status: true
dependencies: {  }
name: black_white
label: 'black & white'
effects:
  8d4f85cc-9a2d-4a30-af15-21b0833dc06d:
    uuid: 8d4f85cc-9a2d-4a30-af15-21b0833dc06d
    id: image_desaturate
    weight: 1
    data: {  }
third_party_settings: {  }

Logically, every image style inlcudes at least one effect. When we look at the example, we see, that effects itself have an uuid, as well as that their uuid is used as array key in the "effects" property of the image style. When I first came accross that tutorial, I was asking myself, if it's really necessary to include the uuid of the effect, or if just the existance of an array key is important.

So my first approach was to leave out the uuid completely and rename the array key. At first glance, it seemed to work perfectly. But only until the moment, I wanted to edit the image style via the admin UI. Drupal cannot build a correct route because of the lacking information. This unfortunately raises an exception. So it's important, that the UUID is present and that the array key matches the UUID of the image effect.

Best practice

However, you are not forced to use any special value as the UUID of your image effect. That's why I propose to include a unique human readable value instead, e.g. in the form of: "MODULENAME_imgeffect_EFFECTNAME". So let's assume, your module name is "example_module", the above image style export would look like this:

langcode: en
status: true
dependencies: {  }
name: black_white
label: 'black & white'
effects:
  example_module_imgeffect_image_desaturate:
    uuid: example_module_imgeffect_image_desaturate
    id: image_desaturate
    weight: 1
    data: {  }
third_party_settings: {  }

What do you think about this? What's your proposal for exporting image styles? Tell me in the comments section of this post!