Friday, November 1, 2013

Dupal 7 - Media and View modes - How to get an image style as a view mode in the list in the media browser

I've been battling with this for quite some time, so maybe someone else be happy with this post.
You define an Image style and want to be able to select this style in the display setting for your content type, or in the display settings for a field in a view.
Here is a simple flowchart to achieve this.

1.define a new image style
1.1 go to administration > Configuration > Media
1.2 add image style
1.3 give it a descriptional name
f.i. call it verylargeimage
1.3 add effects
f.i. set scale and crop
Width 624
height 400

1.4 update style

2. create a corresponding view mode
Do this with display suite or with entity view mode
example here is done with Display suite
2.1 got to administration > Structure > Display Suite > View Modes [tab]
2.2 click add a view mode
2.3 Give it a name you can easily relate to the image style
In this example f.i. vm_verylargeimage
2.4 Select the file checkbox
2.5 Click Save

3. Connect the style and the view mode
3. 1 Navigate to Administer -> Configuration ->Media -> File Types
If you are using Media 2.x, then the File types has moved to Administer -> Structure -> File Types.

3.2 Click on manage display on the image row
3.3 open tab (under left) custom display settings
3.4 check the checkbox in front of youre viewmode name
In this example vm_verylargeimage
3.5 In the upper right corner you see your viewmode added to the viewmodes menu
3.6 Click on manage file display
3.7 Click on your viewmode
In this example vm_verylargeimage
3.8 Select under Enabled displays 'Image'
3.9 Select your image style on the bottom of the page

In the display settings for the field in your contenttype, or your view, you can now choose the corresponding view mode.
  • Drupal 7
  • Media
  • view modes

No comments:

Post a Comment