12

Where is the latest form of the component in the Media project family that allows styles to be defined for Media files?

I see a lot of references to the idea that the Media module contains, once contained, or can be compatible with, a UI component that is similar to the Drupal 7 core Image Styles system that allows formats to be defined. Apparently, once upon a time this lived at /admin/config/media-image-styles

There's a module, Styles, by Aaron of Media fame, that has a sub-module called File Styles. On the Styles project decription, it suggests that the Media module implements the API this provides in its bundled sub-module Media Styles. But the latest 7.2.x dev (and also, the latest stable version of the 7.1 branch) of Media that I have downloaded contains no such module, the URL path given for it above goes nowhere, and I can't find any such module as a seperately distributed module. Styles contains a UI module, but this seems to be unrelated to Media, and Styles hasn't been updated since 2011, whereas Media has been in near-constant development since then (with latest Media 7.2.x dev enabled, for me the Styles UI url crashes out with a fatal error Call to a member function getExternalUrl() on a non-object in... ). Also, Styles isn't even mentioned on the current Media project page.

From the way people talked about this media styles UI, it sounds like it was once a very important part of the Media project. I understand the Media project has been in a state of flux for years and documentation has lagged behind the current state of the project.

Where is the latest form of that component that allows styles to be defined for Media files?

Here's some (seemingly now all out of date) related reading:


Edit: Found a clue, buried at the bottom of a "Configuration" documentation page:

The Media module used to rely heavily on the Styles module before Media was converted to prefer the file entity and file fields... defining new 'display' or view modes... can be implemented using http://drupal.org/project/entity_view_mode

But I can't see anything in that linked module that seems to support the kind of functionality I've seen discussed. There's a limited tutorial for the 7.2 branch which involves using Entity View Mode, but it uses it to define image styles for images, using the regular image style interface. Doesn't look to be anything for file styles for non-image files such as videos, or anything that could do anything more advanced, like have one style that shows a video's thumbnail image and another style that shows a video player. The search is still on...

1

1 Answer 1

30
+100

A lot has changed since the madness that was http://drupal.org/node/1092444. Thankfully, theming and setting display formatters for file entities is now much easier and more straightforward.

The following documentation is for Media 2.x and File Entity, although much of it works with Media 1.x with slight alterations (e.g., in Media 1.x, the link to the "File Types" page is in Configuration instead of Structure).

Displaying Media

The File Entity and Media modules work together to provide a unified method for storing, managing, and displaying Media in Drupal. They allow a user to create file fields that can be configured to store and display many different types of media, including images, video, and audio. among others. In order to display these different types of media, file fields need formatters, often provided by the module that provides the Media type, and a little extra configuration.

Definitions

I'll explain a couple of the moving parts first, and then get into customizing the display of files on a site.

File types

Files are grouped into File Types. Each file type is defined by a list of mime types, a universal way of specifying file formats on the internet. The default file types are Application, Audio, Image, Text, Video, and Other. There is currently no way to define new file types in the UI.

View Modes

View Modes are used to tell Drupal 7 (and soon 8) that a piece of content is in a certain context. The content can then be altered or displayed in a way that best suits that context. Two view modes that most people are probably familiar with are the default teaser and full modes. Custom view modes can be defined with modules like Entity View Mode, Display Suite, or in a custom module with hook_entity_info_alter().

The Good Stuff, or: Managing the display of your File Field

A file field's display is managed per file type. Navigate to Structure -> File Types. You will see a list of available file types with links to "Manage fields", "Manage display", and "Manage file display" for each.

Manage Fields

The File Entity module makes all files full fieldable entities, the same as nodes and taxonomy terms. Just like in the "Content types" section, you can add custom fields to each file type.

Manage Display

Again, like in "Content types", you can manage the display of custom fields on each file type. This section does not control the formatting of the files themselves, only the display of fields attached to the file entity.

In this section you will also see a toggle for "Custom Display Settings". When expanded you can enable and disable view modes available for this entity. A view mode must be checked here in order for it to be available in "Manage File Display". At this time it's recommended to use only custom view modes defined by the user and the following default view modes; the rest are left over from Styles module integration and will eventually be removed:

  • "Teaser" (Currently not included by default. You can add it with the patch in the issue above or define it as a custom view mode)
  • "Full"
  • "Preview" (Used in admin contexts, e.g., for placeholders in WYSIWYG fields, in the Media browser, and in the Media field widget)

Manage File Display

In "Manage File Display" you can configure formatters for your file types (yes!). Many Media provider modules add their own formatters here; for example, Media: Youtube and Media: Vimeo both provide a "Preview Image" and "Video" formatter.

Formatters can be enabled and configured for each view mode enabled in their file type's "Manage Display" section. For example, a user may want to display a Media: Vimeo preview image when a node is viewed as a teaser, the Vimeo video when the full node is viewed, and a video with different width and height formatter settings when the node is viewed with a custom view mode called "video gallery". Many formatters (notably "Image") allow the user to select the image styles they have defined in Configuration -> Image Styles.

Because multiple media providers can use the same field, formatters are arranged in a top-to-bottom cascade. Drupal will use the first formatter that can be applied to the output of a field. If a video field enables the "Media: Youtube Video", "Media: Vimeo Video", and "Large filetype icon" formatters for the "Full" view mode, Drupal will use the Youtube formatter if the file's mime type is video/youtube, the Vimeo formatter if the mime type is video/vimeo, and fall back to the large filetype icon if the mime type is video/{anything else}.

Configuring the File Field to display using "Manage File Display" settings

In order for the file field to display using the formatters defined in "Manage File Display", it must be set to display the "rendered file". Navigate to the "Manage Display" page for the content type that contains your file field. Choose "Rendered file" as the file field's format for all view modes in which you would like to use the formatters defined in "Manage File Display".

Further Theming

You can create custom theme functions and template files for even more control with theme hook overrides. The theme suggestions provided by the File Entity module are:

file__{file type}
file__{file type}__{view mode}
file__{mime type}
file__{mime type}__{view mode}
file__{file id}
file__{file id}__{view mode}

Replace all '/' and '__' in mime types with '_' for theme functions and '-' for template files.

Some Media provider modules replace these with their own templates and theme hook suggestions. You can view all available theme hook suggestions with the Devel Theme Developer module, Mothership's Poor Themer's Helper, or hopefully consult the provider's docs for more info.

Outro

Hope this helps. I plan on adding this to the Media documentation, so if I missed something, misspoke somewhere, or a section needs clarification please let me know.

And some short answers to the OP's specific questions:

  • Media 1.x vs 2.x: even though 2.x is unstable, it's as reliable as many stable version modules on Drupal.org. I think it's worth using for the vastly improved features, but because there's so much work going on support in the issue queue is slow, and as with any dev branch new updates may break your implementation. Still, I use it on production.
  • Media is in development. Some things don't work as you would hope yet (e.g., non-image WYSIWYG integration). But it still works better at what it does than the combination of modules you have to install to do what it does without it. And it's getting better.
9
  • Great answer! So the way to control thumbnails and videos seperately is have specific view modes set to use video, and specific view modes set to use images. Makes sense now. Quick question - is the 'teaser' view mode called 'preview' in Media 1.X? The view modes I see in 1.X are Full, Link, Preview, Small, Large, Original, Tokens (no Teaser) - I'd like to be certain about which are the deprecated Styles ones. Aug 24, 2012 at 5:46
  • The teaser view mode isn't included in either current version. If I remember correctly, preview is used for WYSIWYG integration, since most WYSIWYGs crash if you try to insert an iframe. You can make a teaser view mode yourself, or just apply the patch in the issue mentioned above. Reading through that issue will explain everything you need to know about Media, Styles, and the weird view modes being used right now.
    – RobW
    Aug 24, 2012 at 5:58
  • Okay, so while that issue is still in development and uncomitted it's very much part of the official plan. So have I understood this correctly: Preview is also non-deprecated, alongside Full and Teaser (it appears so from that issue), but is intended specifically for admin contexts such as displaying placeholder elements within a WYSIWYG editor? Is Preview also the view mode used by the Media content form widget to display uploaded and saved media on node edit forms? Aug 24, 2012 at 6:09
  • It may be, and possibly in the Media browser too -- I don't remember off the top of my head. An easy way to check would be to switch it's formatter to URL to file, and see what breaks.
    – RobW
    Aug 24, 2012 at 6:11
  • 1
    I've suggested an edit to clarify the section about teaser, full and preview view modes. Can't remember if you can see it straight away or if it needs to be checked by a moderator first - but if you either confirm that it's accurate or edit it so it is, I'll accept this as covering everything I asked for - an excellent piece of documentation (thanks again!) Aug 24, 2012 at 6:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.