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!

Kommentare

Is there any way to assign that style to a content type view mode image field?

Is there any way to assign that style to a content type view mode image field?

The easiest way is to do create your image style(s), content type(s), fields and node view configuration via admin UI and then export the pieces via admin/config/development/configuration/single/export.There you need at least the image style, the field storage and field (instance) of the image field (if it isn't already defined in another module or install profile), as well as the content type (if it isn't already defined in another module or install profile) with its entity form and view display settings. The style is assigned in the entity view settings of your node type(s).

Thanks very useful, but I meant if its possible to do it from the theme or custom module?

I meant, you should create the fields via UI and then use configuration export UI to export all the stuff you need and save it to YAML files. You also get the file names you need.

Neuen Kommentar schreiben