Skip to main content

Using Custom Image Styles with the Media module (and exporting the results to code!)

Filed Under: Drupal
I recently had the need to create a custom image style and use it to display images I had uploaded to a media field. I found it to be more difficult than anticipated, because there are a few more moving parts involved than in the case of a standard file field. So, I'm documenting the steps it took here in the hopes that it will be useful to the community at large. (and also so that I'll be able to remember how to do it myself next time!) First, you must have the necessary prerequisites: The following instructions assume that you've already created a file field with the media file selector widget.
  1. Enable the styles, styles_ui and file_styles modules.
  2. Create your custom image style. (Configuration -> Media -> Image styles -> Add style)
  3. Create your custom file style. (Configuration -> Media -> File styles -> Add File style) Once you have entered a name for your style, select the image style you created in the last step under the "Preset" menu. (Under the Image tab)
  4. Under the "Manage Display" tab for your content type, select the file style you just created under the "Format" column.
View a node of your content type, and if all went well, your image should be displayed using your new image style!

Part II: exporting your settings to code.

Because we practice feature-driven development here at Bluespark, it's not enough simply to figure something out; all changes must be exported to code. In order to do so, there are three components that must be included. It goes without saying that you will need a feature with your content type and media file field. When creating/editing your feature, ensure that the following components are added:
  1. Image styles: your image style
  2. Styles: your file style
  3. File entity: your file display style (it will be named something like image__file_styles___file_field_styles_file_<your file style name>)
In addition, ensure that the file_styles module is added as a dependency - it's not auto-detected, and you will get a lovely WSOD if you attempt to revert your feature on another installation!

We'd love to partner with you on your next project!

Since we’re big on relationships, we’re all about finding the right fit. Will you take the next step with us to see if we’re a match?