Media browser thumbnail size:

When editing a node, with Media browser widget, the media browser opens inside an iframe. The iframe loads media.css stylesheet which has a rule:

.media-item {
    width: 100px;

So, regardless of the File Preview image style (set elsewhere), the media browser thumbnail is always 100px wide. I would like it to be 180px wide. Is it possible to change this without hacking Media module, which provides the media.css stylesheet?

Media browser iframe size:

The iframe seems to have fixed width of 800px hardcoded somewhere outside of any stylesheets. How to make it bigger?


Grimreaper’s picture


In your module, add theses lines to the file my_module.module

 * Implements hook_library_alter().
function my_module_library_alter(&$libraries, $module) {
  if ($module == 'media') {
    $path = drupal_get_path('module', 'my_module');
    $libraries['media_browser']['js'][$path . '/js/my_module.popups.js']['group'] = JS_DEFAULT;
    $libraries['media_browser_page']['css'][$path . '/css/my_module.browser.css']['group'] = CSS_DEFAULT;

In your module, if they don't exist yet, make two repositories , 'css' and 'js'. And inside, respectively :
my_module.browser.css : add your css inside this file
my_module.popups.js : = function () {
  return {
    buttons: {},
    dialogClass: 'media-wrapper',
    modal: true,
    draggable: false,
    resizable: false,
    minWidth: 600,
    width: my_width,
    height: my_height,
    position: 'center',
    overlay: {
      backgroundColor: '#000000',
      opacity: 0.4
    zIndex: 10000

Hope it will help. Hum... The request was made more than one year ago...

Grimreaper’s picture

I started an issue to add the feature about iframe size in Media :

Devin Carlson’s picture

Status: Active » Fixed

This is fixed per #1.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.