Drupal: Migrate image styles from D7 to D8

Recently, I needed to do such a thing. Unfortunately, there is no easy upgrade process. You have to recreate the image styles one by one. In my case each and every image style used a custom image effect for resizing images; so I needed to upgrade the image effect module too.

After enabling my image effect module, I created an image style from the UI exactly as it was in D7.

Then I used Configuration Management module to export the image.xxxxxx.yml file containing the configuration. In my case it was something like the following:

langcode: en
status: true
dependencies:
  module:
    - my_custom_image_effects
name: teaser_thumbnail_620dp_xhdpi
label: teaser-thumbnail for 620dp-xhdpi (scale)
effects:
  0f65ef39-260c-453e-b157-6e031d11adc0:
    uuid: 0f65ef39-260c-453e-b157-6e031d11adc0
    id: minimum_resize
    weight: 1
    data:
      width: '1240'
      height: ''
      upscale: false
pipeline: ''

Step #1

I created a new module in D7, using the Features contrib module. In that feature I exported all the image styles I had created from the UI. Then opened the *.feature.inc file and copied all the PHP code for the styles.

Step #2

I went to http://sandbox.onlinephpfunctions.com and executed the following code:

$styles = array();
// Paste here the code copied from the feature.inc file.
foreach ($styles as $machine_name => $data) {
  $output = array();
  $output[] = str_replace('-', '_', $machine_name);
  $output[] = $data['label'];
  $output[] = $data['effects'][0]['data']['width'];
  $output[] = $data['effects'][0]['data']['height'];
  echo implode('|', $output) . "\n";
}

This created the following output:

image_style_1|Image Style #1|144|50
image_style_2|Image Style #2|96|45
image_style_3|Image Style #3|192|

which follows the pattern:

IMAGESTYLE_MACHINE_NAME|IMAGESTYLE_LABEL|RESIZE_WIDTH|RESIZE_HEIGHT

Step #3

I went to https://regexr.com and used the previous output as the Text value.

I then added (.*)\|(.*)\|(.*)\|(.*) as the Expression and used the Replace tool with the following text:

langcode:
 en\nstatus: true\ndependencies:\n module:\n - 
harrods_image_effects\nname: $1\nlabel: $2\neffects:\n 
0f65ef39-260c-453e-b157-6e031d11adc0:\n uuid: 
0f65ef39-260c-453e-b157-6e031d11adc0\n id: minimum_resize\n weight: 1\n 
data:\n width: '$3'\n height: '$4'\n upscale: false\npipeline: 
''\n\n---\n

This outputted the configuration of the image styles of D7 one by one with a --- separator in-between.

Step #4

I went to admin/config/development/configuration/single/import and manually imported each separate image style configuration to D8.

Step #5 (optional)

In my case, I also wanted to add these image styles as coming from a specific module.

At first, I executed the drush cex command which created all the yml files D8’s sites/default/files/config folder.

I then created a new module in a modules/custom/custom_image_styles folder and added the image.xxxxx.yml files from the sites/default/files/config folder to modules/custom/custom_image_styles/config/install excluding the image styles for thumbnail, medium and large coming from core.