Missing options in IMCE with Acrylic theme

_teseo_ - September 22, 2009 - 20:46
Project:IMCE
Version:6.x-1.2
Component:User interface
Category:support request
Priority:normal
Assigned:Unassigned
Status:closed
Description

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?

#1

dsms - September 23, 2009 - 14:40

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.

#2

_teseo_ - September 23, 2009 - 16:33

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>

AttachmentSize
acrylic.info_.txt 939 bytes
imce-page.tpl_.php_.txt 901 bytes

#3

dsms - September 23, 2009 - 18:12

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>

#4

ufku - September 24, 2009 - 22:53
Category:bug report» support request
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.

#5

_teseo_ - October 1, 2009 - 00:40

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

#6

dsms - October 1, 2009 - 11:15

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

#7

_teseo_ - October 1, 2009 - 12:10

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.

#8

ufku - October 1, 2009 - 14:46

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

#9

dsms - October 2, 2009 - 02:09

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.

#10

_teseo_ - October 3, 2009 - 11:20

Perfect!!! It runs!!!

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

#11

dwatson - October 14, 2009 - 13:57

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.

#12

ufku - November 3, 2009 - 22:49
Status:active» fixed

#13

System Message - November 17, 2009 - 22:50
Status:fixed» closed

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

#14

jweowu - November 26, 2009 - 05:55

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

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

 
 

Drupal is a registered trademark of Dries Buytaert.