Drupal 7: how do you make a new image style appear in the Media Browser?

Articles

It’s not hard to create new image styles from the Drupal administration panel, but when you go to the Media Browser and upload an image your new styles aren’t in the list of choices to apply to it. Very frustrating. As promised previously, in this article I explain what you need to do to make a new image style available from the Media Browser.

1. Define a new image style

Let’s suppose we need a new thumbnail style for a website, 250 x 250 pixels in size. We can create the style by going to the Image Styles panel, Administration -> Configuration -> Media -> Image Styles, then clicking on Add Style.

We are asked for a name for the style so we give it a name of big-thumb and press enter. Now we need to configure how it is created, so we select the Scale and Crop effect and add it. On the next page we enter the width and height of 250 pixels and press Save. That’s all we need to do to create the style.

2. Create a corresponding view mode

If you were to go to the Media Browser now and upload an image, you wouldn’t see your new image style. That’s because what are listed in the browser panel are view modes. These do more than simply select an image style: they allow you to present different file types (and an image is just one sort of file as far as Drupal is concerned) in all sorts of ways. For example, you can have a view mode that shows the size of a file alongside an icon linked to the file itself.

For our current case, though, we don’t need to go into view modes into any great detail. All we need to know is that we need a new view mode for our thumbnail style. Unfortunately Drupal core doesn’t give you any means to create new view modes interactively, so you’ll need to install a contributed module that does. Display Suite is one such module but its scope is well beyond what need; for this example the simpler Entity View Mode module will do perfectly. Download it and install it in the usual way.

Now you can go to the Entity View Mode configuration panel at Administration -> Configuration -> System -> Entity View Modes. Scroll down to the File section and click on Add New View Mode.

On the next page you can then enter a name for the view mode. For ease of reference, we’ll call it Big Thumb. Leave the “Use custom display settings” checkbox on, then uncheck all the options under “Enable this view mode for the following types” apart from Image, because this new view mode only applies to images. Save the settings. (You may see an error message on the next page. At the time of writing Entity View Mode was still in beta and this is a minor bug that you don’t need to worry about.)

3. Configure your new view mode with the image style

Navigate to Administer -> Configuration ->Media -> File Types, and click on the link to Manage file display from the Image row.

At the top of the panel you’ll see a link labelled Big Thumb. Click on it: this is where you’ll configure the display of your new view mode. Now under “Enabled displays”, check the Image option and at the bottom of the panel you’ll see the options for an image appear, specifically a selector for image style.

Choose “big-thumb”, press Save Configuration and you’re done.

Now when you click on the Media browser button from your Wysiwyg editor and insert an image the “Big Thumb” option appears in the list of choices, and on choosing it you get your image scaled and cropped to 250 pixels square.

Figure W have been building Drupal sites since 2006. Call 077833 86951 or use our contact form to discuss your Drupal development requirements.

5 Responses to “Drupal 7: how do you make a new image style appear in the Media Browser?”

  1. Nikolay

    Hello, Great article!
    It is strange, but I couldn’t find the Administer -> Configuration ->Media -> File Types.
    I tried to google it, maybe I need an additional module for it?
    Thanks

  2. Joel Pittet

    I think you need to mention that you likely have media module and file_entity module enabled. Drupal 7 doesn’t have view modes for files out of the box.

    Also may be good to mention if you are using WYSIWYG module or ckeditor or tinymce, etc?

  3. John

    @nikolay – try Administer -> Structure ->Media -> File Types for step 3.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>