Add image preview option using security tokens

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

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

https://drupal.org/project/image_allow_insecure_derivatives

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

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>

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 ;)

#7 Works like a charm!
Bravo krem!

Thank you, Krem. Helps a lot!

Thank you #7

#7 worked for me. Thank you!

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.

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

@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.)

Patch #14 no longer applies to the recent version of IMCE. Attached is an updated version for review.

Patch #15 does not work when images are in root directory so I re-rolled the patch and implemented it.
The problem now is that I couldn't enable thumbnail if the image metadata is disabled.

I create the function imce.getDimensionsImgDataDisable() in imce_extras.js but it is not working to get the image data when the metadata is disabled.

Should I create a message in the config form that is not possible to show images in thumbnail if metadata is disabled or we will wait until we find a solution?

Thanks.