Hello

I've noticed a strange behavior of IMCE, which is used as a file manager with FCKEditor, when Acrylic theme is enabled for the site.
With all other themes that I tested, IMCE has options Upload, Thumbnails, Delete, Resize, Send to FCKEditor. However, when Acrylic is enabled, only two of the options remain, Upload and Send to FCKEditor. Persistent in all major browsers...
Does anybody happen to know?

CommentFileSizeAuthor
#2 imce-page.tpl_.php_.txt901 bytes_teseo_
#2 acrylic.info_.txt939 bytes_teseo_

Comments

dsms’s picture

dsms commented

Hi,
I had a the same problem with my own template and I can at least tell you why this issue occurs and which workaround I used.

When some JavaScript from your Template and some JavaScript from IMCE use the same function names, namespaces or act on same DOM-nodes, something crashes, like the options bar.

So, it is very likely that your specific theme includes a certain JavaScript that interferes with the IMCE JavaScript files.

Your template defines it's JavaScript files that it want to use in it's themename.info file and it is loaded by calling drupal_get_js()
in sites/modules/imce/tpl/imce-page.tpl.php

so, two things you can do now: find out what particular JavaScript file from themename.info causes the conflict, remove this
entry from themename.info, go to the head section of your page.tpl.php and add the JavaScript reference by hand.
(use Firebug and disable the included js-references one by one)

that would probably be the best solution.

what I did is: change to a working theme (e.g. garland), open IMCE (that should work for the moment), open the HTML source
and copy the head-section, paste it into imce-page.tpl.php and removed all unnecessary CSS and JS references.

this should be done very carefully, because IMCE pushes some settings to jQuery.extend-Drupal.settings that might be
user-sensitive.. so I would not recommend this if you use IMCE with different profiles.

to the IMCE people I would recommend, to hardly reconsider if drupal_get_css and drupal_get_js make sense in imce-page.tpl.php
because there is no need to include theme-specific stuff and as you see, it causes only problems.

so probably it would be a good idea to find another way to propagate the IMCE js+css to the template-files OR you switch
to a working admin theme (e.g. garland) for IMCE. Admins (like me) who only have a custom frontend-template use always
a drupal standard theme as admin theme, so it would be a good idea to use the admin-theme (if enabled) for IMCE too.

_teseo_’s picture

_teseo_ commented
StatusFileSize
new acrylic.info_.txt939 bytes
new imce-page.tpl_.php_.txt901 bytes

I've been trying it like you did it, and appears delete button, but then other things don´t run correctly, like select files, or Send to FCKEditro. I'm going to attach imce.page.tpl and acryilic.info, and paste head of html source of imce working with garland theme, for you can see it, and tell me about.

Sorry for my poor english, and thanks for all.

HTML Sorce with Garland Theme

<head>
  <title>File Browser</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link type="text/css" rel="stylesheet" media="all" href="/./modules/cck/theme/content-module.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/date/date.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/date/date_popup/themes/datepicker.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/date/date_popup/themes/timeentry.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/dhtml_menu/dhtml_menu.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/filefield/filefield.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/node/node.css?W" />

<link type="text/css" rel="stylesheet" media="all" href="/./modules/system/defaults.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/system/system.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/system/system-menus.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/upload_element/upload_element.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/user/user.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./sites/all/modules/fckeditor/fckeditor.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/calendar/calendar.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./misc/farbtastic/farbtastic.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/forum/forum.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/cck/modules/fieldgroup/fieldgroup.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./modules/imce/css/imce-content.css?W" />
<link type="text/css" rel="stylesheet" media="all" href="/./themes/garland/style.css?W" />
<link type="text/css" rel="stylesheet" media="print" href="/./themes/garland/print.css?W" />
  <script type="text/javascript" src="/./misc/jquery.js?W"></script>
<script type="text/javascript" src="/./misc/drupal.js?W"></script>

<script type="text/javascript" src="/./sites/default/files/languages/es_d348ca847788d8c0d60548a89f719ee4.js?W"></script>
<script type="text/javascript" src="/./modules/dhtml_menu/dhtml_menu.js?W"></script>
<script type="text/javascript" src="/./misc/jquery.form.js?W"></script>
<script type="text/javascript" src="/./modules/imce/js/imce.js?W"></script>
<script type="text/javascript" src="/./modules/imce/js/imce_extras.js?W"></script>
<script type="text/javascript" src="/./modules/imce/js/imce_set_app.js?W"></script>
<script type="text/javascript">jQuery.extend(Drupal.settings, { "basePath": "/./", "dhtmlMenu": { "slide": "slide", "siblings": "siblings", "children": "children", "doubleclick": "doubleclick", "relativity": 0, "clone": 0 }, "imce": { "extensions": "gif png jpg jpeg pdf doc", "dimensions": "800x600", "filenum": 1, "url": "/./imce", "clean": true, "prvt": false, "furl": "/./sites/default/files", "direct": true, "dir": "u1", "perm": { "subnav": 1, "browse": 1, "upload": 1, "thumb": 1, "delete": 1, "resize": 1 }, "dirsize": 828929, "error": false } });</script>
<script type="text/javascript">
  imce.hooks.load.push(imce.initiateShortcuts);//shortcuts for directories and files
  imce.hooks.load.push(imce.initiateSorting);//file sorting
  imce.hooks.load.push(imce.initiateResizeBars);//area resizing bars
  imce.hooks.list.push(imce.thumbRow); $.extend(imce.vars, {tMaxW: 120, tMaxH: 120, prvW: 40, prvH: 40});//inline thumbs
</script>
  <style media="all" type="text/css">/*Quick-override*/</style>

</head>
dsms’s picture

dsms commented

try this one: 


<head>
  <title><?php print t('File Browser'); ?></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
  <?php if (isset($_GET['app'])): drupal_add_js(drupal_get_path('module', 'imce') .'/js/imce_set_app.js'); endif;?>
  <?php print drupal_get_html_head(); ?>
	
  <?php if (false): ?>
  <?php print drupal_get_css(); ?>
  <?php print drupal_get_js('header'); ?>
  <?php endif; ?>

<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?m" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?m" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?m" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?m" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?m" />

<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/imce/css/imce-content.css?m" />
<script type="text/javascript" src="/misc/jquery.js?m"></script>
<script type="text/javascript" src="/misc/drupal.js?m"></script>

<script type="text/javascript" src="/misc/jquery.form.js?m"></script>
<script type="text/javascript" src="/sites/all/modules/imce/js/imce.js?m"></script>
<script type="text/javascript" src="/sites/all/modules/imce_mkdir/imce_mkdir.js?m"></script>
<script type="text/javascript" src="/sites/all/modules/imce/js/imce_extras.js?m"></script>
<script type="text/javascript" src="/sites/all/modules/imce/js/imce_set_app.js?m"></script>

<script type="text/javascript">jQuery.extend(Drupal.settings, { "basePath": "/./", "dhtmlMenu": { "slide": "slide", "siblings": "siblings", "children": "children", "doubleclick": "doubleclick", "relativity": 0, "clone": 0 }, "imce": { "extensions": "gif png jpg jpeg pdf doc", "dimensions": "800x600", "filenum": 1, "url": "/./imce", "clean": true, "prvt": false, "furl": "/./sites/default/files", "direct": true, "dir": "u1", "perm": { "subnav": 1, "browse": 1, "upload": 1, "thumb": 1, "delete": 1, "resize": 1 }, "dirsize": 828929, "error": false } });</script>

<script type="text/javascript">
<!--//--><![CDATA[//><!--

  imce.hooks.load.push(imce.initiateShortcuts);//shortcuts for directories and files
  imce.hooks.load.push(imce.initiateSorting);//file sorting
  imce.hooks.load.push(imce.initiateResizeBars);//area resizing bars
  imce.hooks.list.push(imce.thumbRow); $.extend(imce.vars, {tMaxW: 120, tMaxH: 120, prvW: 40, prvH: 40});//inline thumbs

//--><!]]>
</script>

  <style media="all" type="text/css">/*Quick-override*/</style>
</head>
ufku’s picture

ufku commented
Category: bug » support
Priority: Critical » Normal

It's probably script.js of the theme that is removing some buttons which IMCE converts to tabs.
I could help identifying the problem if it were implemented using jQuery.

_teseo_’s picture

_teseo_ commented

I´ve tried that dsms told me, but nothing, appears buttons, but all is wrong and not run.

ufku, and how can I know if it is implemented using jQuery? What do you need to help me? some file?
I need fix.

Thanks

dsms’s picture

dsms commented

you could also try the following:

go into your acrylic.info and put a ; at the front of line 'scripts[] = script.js' so
that it looks like '; scripts[] = script.js'

go into all template files that begin with 'page' (in the acrylic from drupal.org that would be page.tpl.php, page-blog.tpl.php, page-node.tpl.php and page-node-add.tpl.php)

modify the lines 

<?php echo $styles ?>
<?php echo $scripts ?>

to 

<?php echo $styles ?>
<script type="text/javascript" src="<?php print base_path(); ?>sites/themes/acrylic/script.js"></script>
<?php echo $scripts ?>

then you need to go to the theme-section in your backend and hit the save button.

see what happens ;)

_teseo_’s picture

_teseo_ commented

Thanks for your help.

I've done everything you have told me, but nothing changes. Buttons don't appear.

another idea?

Thanks for your help again.

ufku’s picture

ufku commented

Found out that acrylic and other artisteer themes change button markup from input to button.
In your template.php

find 

function acrylic_button($element) {

and change into

function acrylic_button($element) { 
  if (arg(0) == 'imce') return theme_button($element);
dsms’s picture

dsms commented

Found out that acrylic and other artisteer themes change button markup from input to button.

I can confirm that, Zen does it likewise. but despite the links appear as buttons, they are at least present. I'm not sure if this is really the problem here.

_teseo_’s picture

_teseo_ commented

Perfect!!! It runs!!!

Thanks for all, dsms & ukfu! Thank you very much! really thanks!

codewatson’s picture

codewatson commented

Same issue of missing buttons with a different theme. The way we found around it was to use the ThemeKey module to have it switch to a different theme when showing the imce browser window (gave it a path of imce, so anything that was http://www.yoursite.com/imce* would load the garland theme). Probably not the best solution but ended up being the easiest to do without mucking through other js files.

ufku’s picture

ufku commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

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

jweowu’s picture

jweowu commented

http://drupal.org/project/admin_theme allows for a similar solution.

Just enter imce/* as a pattern to use the admin theme on.

smokefree’s picture

smokefree commented

How was this finally resolved? Did someone make a change to IMCE or is it necessary to patch Artiseer themes? I'm thinking of using Artiseer, and want to know if I'm going to have trouble, and if so how to get around it. Thanks in advance!

jweowu’s picture

jweowu commented

smokefree: It's not a problem with IMCE, and you don't need to patch anything. Use one of the other contrib modules mentioned so that you can use a different theme for the IMCE windows. I'd suggest using Garland -- unsurprisingly it works very well :)

See comments #11 and #14

http://drupal.org/project/themekey
http://drupal.org/project/admin_theme

TimeBandit’s picture

TimeBandit commented

I ended up using this technique for a troublesome RootCandy issue. It resolved the problem and now I can see the "send to" stuff as usual. Related comment.

roxy317’s picture

roxy317 commented

I use Artisterr and have had no problems with IMCE ... works great!

anasynth’s picture

anasynth commented

I had the same symptoms described here (missing buttons in the imce interface) with the Energetic theme. Again the only buttons visible were "upload" and "send to". I just wanted to say that I tried the solution from #8 and it seems to have worked perfectly for me. I just added the if statement directly under the first line of the function (ignoring the rest of the function).

Thanks ufku!

I am learning’s picture

I am learning commented

Thanks ufku your comment at @ #8 fixed my problem.

I had the same problem, I'm using Jaded theme, I could fix the problem by your approach. in my template.php, the function jaded_button($element) {

I added
if (arg(0) == 'imce') return theme_button($element);

and voilla, it worked.

swill’s picture

swill commented

I had this issue on my own custom theme and this is how I resolved it.

Here is the issue that I have found. When IMCE is loaded it is loaded into an iFrame. This iFrame includes all of the CSS and JS that was on the original page in the head. This can cause a problem if the JS that you have on your site makes any assumptions about the content that is on the page.

For example. I had this line of code on my site: map_obj.map = new GMap2(document.getElementById("map-canvas"));

The 'map-canvas' WAS on the PAGE, but it was NOT in the IMCE iFrame. Because all the CSS and JS is loaded into the head of the iFrame, this line of code was attempting to run in the context of the iFrame. This was giving an error of "Uncaught TypeError: Cannot read property 'firstChild' of null" which was causing the options in IMCE not to load.

I was able to solve this by simply doing a test to make sure the element was on the page with something like: if ($("#map-canvas").length > 0) { addGMapToPage(); }

Basically, this problem is due to some JS file making an assumption that something is on the page (which it may be), but it is not on the page in the context of the IMCE iFrame.

I hope this helps someone...

fuzzyjared’s picture

fuzzyjared commented

My issue was datepicker() jquery library.

I was calling the function on a couple of custom module form fields
$("#edit-date-from").datepicker();
$("#edit-date-to").datepicker();

removing the datepicker calls allowed imce to work as advertised. It took me forever to find it now I just have to resolve it....

Cyberflyer’s picture

Cyberflyer commented

General issue and resolution

Turns out there is a potential for conflict between IMCE and a lot of themes, among them Clean, Energetic, Acrylic, Zen, Artisteer, Jaded and RootCandy which results in IMCE feature failure, typically--but not limited to--the buttons not appearing at the top of the file browser page.

This is because the file browser inherits the theme's javascript and various issues result, such as name-space collision, missing regions and the like. The hard solution is to go in and deduce the specifics and change your page.tpl files to weed out the conflicts or hack at IMCE.

The easy and generally useful solution is to install ThemeKey and create one rule that forces all pages where drupal:path = imce to use the Garland theme. That simply solves everything, since IMCE works in Garland but has no real theme to it. This post hopes to tie several related threads together to save the next guy time.

http://drupal.org/node/584952#comment-2149802

cardentey’s picture

cardentey commented
Issue summary: View changes

My solution:

/**
 * Implementation of hook_custom_theme().
 */
function mymodule_custom_theme() {
  
  if (arg(0) == 'imce-filefield' || arg(0) == 'imce') {
     // Use the admin theme for the current request (if global admin theme setting is checked).
     return variable_get('admin_theme');
  }
   
}
nathan573’s picture

nathan573 commented

#24 worked for me. I use the stock Drupal 7 "Administration theme" setting at "admin/appearance" (set to "Shiny") and all the file management buttons on the IMCE popup were not displaying whilst editing nodes and using CKEditor and IMCE. When clicking the IMCE button on the CKEditor toolbar a JS error in a custom JS include in the site's main, front-end theme (Zen-based sub-theme) was being thrown, preventing the IMCE popup from working properly. I added the code from #24, customizing the module name and theme to my environment and the IMCE popup now works properly, displaying the buttons that were missing and allowing the preview function to operate. Thanks cardentey!