When you open the imce file browser to select/upload a image you can see a list of the images you have in your server.

This list shows the name for every image.

Is there a way to make this list to show a image preview of the image (a thumbnail)?

Update: It seems to me that this is bug since some image files show their preview but not all of them.

See my capture: IMCE file browser

Files: 

Comments

chefnelone’s picture

Component: Miscellaneous » User interface
Category: support » bug
ufku’s picture

Category: bug » support

There is an inline js in imce-content.tpl.php which allows preview of small images. You can find some other preview options there.

mibfire’s picture

I tryed this with the following settings:

imce.vars.prvstyle = 'thumbnail';
imce.vars.boxW = 100;
imce.vars.boxH = 100;

but not the all images are created as thumbnail as you can see here: http://screencast.com/t/GzSvhpDNeci

Why doesnt this work for all images? Thx

mibfire’s picture

mibfire’s picture

Issue summary: View changes

Update: It seems to me that this is bug since some image files show their preview but not all of them.

Karol Haltenberger’s picture

Issue summary: View changes

It seems to me that this is bug since some image files show their preview but not all of them.

This is not a bug. Already existing images will show up, but new ones will not be generated without the token.

While trying to make the image previews to work with the core security patch, but without modifying the module source I came up with this. The preview style is managed from the settings page.

In the end I had to patch some of the js, because I couldn't manage to override a function. Maybe I'll try again later.

<?php
//Hooks / functions in the .module file

//Hook to add custom process function
function MODULE_modules_installed($modules)
{
    if (in_array('imce', $modules))
    {
        if (!array_key_exists('MODULE_imce_custom_process', $custom_process = variable_get('imce_custom_process', array())))
        {
            $custom_process['MODULE_imce_custom_process'] = true;
        }
        variable_set('imce_custom_process', $custom_process);
    }
}

//Custom process function
function MODULE_imce_custom_process(&$imce)
{
    $imce_preview_style = variable_get('imce_settings_preview_style', '');
    if ($imce_preview_style && !empty($imce['furl']) && !empty($imce['files']))
    {
        $names = array();
        foreach($imce['files'] as $file)
        {
            $names[] = $file['name'];
        }
        $uris = db_select('file_managed', 'fm')->condition('filename', $names)->fields('fm', array('filename', 'uri'))->execute()->fetchAllKeyed();
        foreach ($imce['files'] as &$file)
        {
            $file['itok'] = !empty($uris[$file['name']]) ? image_style_path_token($imce_preview_style, $uris[$file['name']]) : '';
        }
    }
}

//Form alter to add preview style setting
function MODULE_form_imce_admin_form_alter(&$form, &$form_state)
{
    $styles = image_styles();
    foreach ($styles as &$style)
    {
        $style = $style['label'];
    }
    $form['common']['preview_style'] = array(
        '#type' => 'select',
        '#title' => t('File browser image preview style'),
        '#options' => array_merge(array('' => t('None')), $styles),
        '#default_value' => variable_get('imce_settings_preview_style', null),
        '#description' => t('Select image style to use as preview in the file browser. Select "None" for no preview.'),
    );
    $form['#submit'][] = 'MODULE_form_imce_admin_form_submit';
}

//Submit function to save preview style setting
function MODULE_form_imce_admin_form_submit($form, &$form_state)
{
    variable_set('imce_settings_preview_style', $form_state['values']['preview_style']);
}

//I tried overriding things from js, but failed, the 
//Perhaps someone can make this work (see imce.thumbRow patch further down)
function MODULE_preprocess(&$variables, $hook)
{
    if ('imce_content' == $hook)
    {
        if ($imce_preview_style = variable_get('imce_settings_preview_style', ''))
        {

            drupal_add_js(array('imce' => array('prvstyle' => $imce_preview_style)), 'setting');
//            drupal_add_js(drupal_get_path('module', 'MODULE') . '/js/imce_extras_override.js');
        }
    }
}


 //Hooks in the .install file


//Update hook for already existing installations
//Or you could just manually add the function name to the variable

/**
 * Adds custom imce process function if IMCE is installed
 */
function MODULE_update_NNNN()
{
    if (module_exists('imce'))
    {
        MODULE_modules_installed(array('imce'));
    }
}
?>


<script>
//changes to imce_extras.js....I couldn't override this properly
imce.thumbRow = function (row) {
//PATCHSTART
    imce.vars.prvstyle = Drupal.settings.imce.prvstyle;
//PATCHEND
  var w = row.cells[2].innerHTML * 1;
  if (!w) return;
  var h = row.cells[3].innerHTML * 1;
//PATCHSTART
    var itok = jQuery(row).data('itok');
//PATCHEND
  if (imce.vars.tMaxW < w || imce.vars.tMaxH < h) {
    if (!imce.vars.prvstyle || imce.conf.dir.indexOf('styles') == 0) return;
    var img = new Image();
//PATCHSTART
//        img.src = imce.imagestyleURL(imce.getURL(row.id), imce.vars.prvstyle);
    img.src = imce.imagestyleURL(imce.getURL(row.id), imce.vars.prvstyle) + (itok ? ('?itok=' + itok) : '');
//PATCHEND
    img.className = 'imagestyle-' + imce.vars.prvstyle;
  }
  else {
    var prvH = h, prvW = w;
    if (imce.vars.prvW < w || imce.vars.prvH < h) {
      if (h < w) {
        prvW = imce.vars.prvW;
        prvH = prvW*h/w;
      }
      else {
        prvH = imce.vars.prvH;
        prvW = prvH*w/h;
      }
    }
    var img = new Image(prvW, prvH);
    img.src = imce.getURL(row.id);
  }
  var cell = row.cells[0];
  cell.insertBefore(img, cell.firstChild);
};
</script>

// Template file: imce-file-list.tpl.php
<?php
$imce =& $imce_ref['imce'];//keep this line.

/*
 * Although the file list table here is avaliable for theming,
 * it is not recommended to change the table structure, because
 * it is read and manipulated by javascript assuming this is the deafult structure.
 * You can always change the data created by format functions
 * such as format_size or format_date, or you can do css theming which is the best practice here.
 */
?>

<table id="file-list" class="files"><tbody><?php
if ($imce['perm']['browse'] && !empty($imce['files'])) {
  foreach ($imce['files'] as $name => $file) {?>
  <tr id="<?php print $raw = rawurlencode($file['name']); ?>"<?php if (!empty($file['itok'])): ?> data-itok="<?php echo $file['itok']; endif; ?>">
    <td class="name"><?php print $raw; ?></td>
    <td class="size" id="<?php print $file['size']; ?>"><?php print format_size($file['size']); ?></td>
    <td class="width"><?php print $file['width']; ?></td>
    <td class="height"><?php print $file['height']; ?></td>
    <td class="date" id="<?php print $file['date']; ?>"><?php print format_date($file['date'], 'short'); ?></td>
  </tr><?php
  }
}?>
</tbody></table>
Karol Haltenberger’s picture

Version: 7.x-1.5 » 7.x-1.9
krem’s picture

Hi guys,

I got a workaround overriding the imce-file-list.tpl.php:

1. Place 'modules/imce/tpl/imce-file-list.tpl.php' in your template folder
2. Replace

<td class="name"><?php print $raw; ?></td>

by

<td style="display: none;"></td>
<td class="name">
    <?php echo('<img src="' . $imce['furl'] . '/' . $imce['dir'] . '/' . $file['name'] . '" width="50" />'); ?>
    <?php print $raw; ?>
</td>

I know it is strange to create an extra column before 'name' column but without it the img tag does not work... I am guessing some javascript treatment is involved.

So far no issues, please confirm ;)

errand’s picture

#7 Works like a charm!
Bravo krem!

volca’s picture

Thank you, Krem. Helps a lot!

Acertijo’s picture

Thank you #7

butterwise’s picture

#7 worked for me. Thank you!

ron_s’s picture

The problem with #7 is it's loading every picture at full size and scaling it to be 50 pixels wide. If you have a directory with hundreds of images, it could be a huge performance hit.

The pre-Drupal 7.20 method created a tiny thumbnail image of only a few bytes. This approach is not the same.

ron_s’s picture

FYI, one other problem with the response in #7: the extra <td> tag with display:none causes the IMCE image preview to break.

ron_s’s picture

Title: How to show a image preview of the files in IMCE file browser? » Add image preview option using security tokens
Version: 7.x-1.9 » 7.x-1.x-dev
Category: Support request » Feature request
Status: Active » Needs review
Related issues: +#1930698: Drupal 7.20 update broke IMCE's feature for generating previews via image styles
FileSize
6.5 KB

@Karol Haltenberger, I spent some time looking at your code in #5, and created a patch for IMCE that incorporates a lot of the concepts directly into the module.

The one major issue I found was code in the MODULE_imce_custom_process function. The db_select assumes that filename in the file_managed table is unique, and this is not always the case. The uri will be unique, and this value needs to be used for checking, not filename.

I also added some logic to break out of the javascript if itok is undefined. Otherwise there are situations where we will see a broken image in IMCE.

Please review the attached patch and let me know if there are any suggestions. Thanks.

(Note: for anyone testing this code, make sure to run update.php and add the image style to be used for the thumbnail in /admin/config/media/imce in the Common settings section at the bottom.)