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

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