How can I export Image Crop configuration with an Image Style for custom module?

Question

I have a custom module I'm re-using on other projects and I want to include an image style with an image crop configuration.

Under the configuration menu, I export a single crop item:

langcode: en
status: true
dependencies: {  }
label: 'Head Shot Crop'
id: head_shot_crop
description: 'Cropping for image head shot.'
aspect_ratio: '1:1'
soft_limit_width: null
soft_limit_height: null
hard_limit_width: null
hard_limit_height: null

I strip out the UUID value for that to be set on new installs. However, for the image style export:

langcode: en
status: true
dependencies:
  config:
    - crop.type.head_shot_crop
  module:
    - crop
name: head_shot
label: 'Head Shot'
effects:
  ce7f0752-c37c-4ff6-945d-96c298663365:
    uuid: ce7f0752-c37c-4ff6-945d-96c298663365
    id: crop_crop
    weight: 1
    data:
      crop_type: head_shot_crop

I strip out the UUID value as well, but the associated crop configuration seems to be tied to the image style via UUID under the effects key, which also has a UUID value.

How can I pair an image style configuration with a crop configuration configuration so they exist on new module installs?

Answer 1

Please see: https://www.drupal.org/project/drupal/issues/2247257

The uuid under the effects array is used as a "unique ID" for the effect.

Seems technically it "works as designed", but as you can see from the linked project task, there is talk about if it's designed correctly.

Fortunately, the uuid under the effects array is scoped to that effects namespace, so it is safe to have the same uuid under any effects array you have regardless of the image style.

Example:

langcode: en
status: true
dependencies: {  }
name: 136x91
label: '(35mm Film 96dpi) 136 x 91'
effects:
  42cf8d4f-246c-4a6d-835f-868e5bcea297:
    uuid: 1cfec298-8620-4749-b100-ccb6c4500779 // <- could be any uuid value
    id: image_scale_and_crop
    weight: 35
    data:
      width: 136
      height: 91
      anchor: center-center

Just note that if you have two effects in one image style, they will each need a unique uuid key.

Example:

langcode: en
status: true
dependencies: {  }
name: teaser_290x163
label: 'Teaser Image 290 x 163'
effects:
  bdd99645-b55a-47b4-9337-89453c12658e:
    uuid: 1cfec298-8620-4749-b100-ccb6c4500779 // <- same as above
    id: image_scale_and_crop
    weight: 1
    data:
      width: 290
      height: 163
  4f4a1ff4-f127-4693-af57-d8f0cf3c9de0:
    uuid: 1cfec298-8620-4749-b100-ccb6c4500780 // <- needs to be unique
    id: image_resize
    weight: 2
    data:
      width: 290
      height: 163

So remove the uuid from the first line for the image style itself, but leave the uuid under the effects array when you export.