Imagepicker iframe, CSS and background issue...

I would agree that using iframe is problematic, but I have found that imagepicker does pick up the css with the more 'conventional' themes, such as Bluemarine or Foliage. It loads style.css and makes use of the primary and secondary classes which some themes have not defined. With the more complex themes such as Tapestry it goes woefully wrong, these are dynamically loaded from variables generally set in template.php. With themes using the colorwheel such as Garland or pixture_reloaded imagepicker comes out with the default colors but does pick up the rest of the css.

The only way I can think of to get rid of the iframe would be a rewrite to make it use Jquery with ajax, not so simple.

So no easy solution but there are some workarounds

Here is some experimental code, not tested

function theme_imagepicker(&$content) {
  $head_title = (drupal_get_title() ? strip_tags(drupal_get_title()) : variable_get('site_name', 'Drupal'));
  $path = drupal_get_path('module', 'imagepicker');
  drupal_add_css($path .'/imagepicker.css');
  $styles = drupal_get_css();
  $scripts = drupal_get_js();
  $tabs = theme('menu_local_tasks');
  $messages = imagepicker_strip_messages(theme('status_messages'));
  $template = 'imagepicker.tpl.php';
  $defaulttemplate = variable_get('theme_default', '');
  if ($defaulttemplate) {
    $templatepath = drupal_get_path('theme', $defaulttemplate);
    if (file_exists($templatepath .'/'. $template)) {
      $template = $templatepath .'/'. $template;
    }
  }
  include($template);
  drupal_page_footer();
  exit;
}

replace the existing theme_imagepicker() function with the above and copy 'imagepicker.tpl.php' to the default theme directory and edit that to suit your needs. If anyone tries this please report back ;-)
This should work for D5 and D6

I really can't tell by the code you've added what you are trying to do. The only difference is in the conditional checking for $defaulttemplate.

The purpose of the code is to look into the default theme's directory and if a file named 'imagepicker.tpl.php' is found, use that one instead of modules/imagepicker/imagepicker.tpl.php. This means you can tweak imagepicker.tpl.php to suit your theme without losing your tweaks on the next imagepicker update, I've just tried it and it works.

FWIW, apparently none of the css is being applied inside the iframe. Even the 'Upload' and 'Browse' tabs are not showing up as tabs. Rather, they appear as a vertical list.

Drupal uses <ul> to build tabs. Garland for instance shows Upload and Browse as a vertical list because it cannot find the images it uses. If you copy imagepicker.tpl.php into the Garland directory they will be rendered properly, I've just tried it and it works. I'll be adding the changes to theme_imagepicker() to the dev versions shortly, it's clearly an improvement.

Popups

Ugh. The reason for avoiding popups is that it will not solve the css problems and they get lost behind the main screen or get blocked by the browser. Inexperienced users get confused by these things. I host a number of Drupal sites and have run across these issues many times.

...the option to link to an image on the web...

Already there, select Show: title and Link: File, page or lightbox

As for video, Lightbox2 supports videos I believe. Using http upload for large files is fraught with difficulties, requires massive timeouts and huge upload max settings. Some of these settings are global in php and will cause all sorts of problems on a hosting server.

I'm trying to keep imagepicker as simple as possible and avoid the 'creeping featuritis' that only confuses some users, the vast majority of my customers for starters.

More advanced users can use the more complex modules, the main thing is to provide choice, Horses for Courses.

As far as the tabs, if I can ever figure out a way to get the browser to apply the right CSS to the iframe, I think the tabs will display correctly. But this has escaped me so far. Like you said, the iframe is picking up the styles.css file and applying the body selector.

Try rebuilding the menu by going in to admin > menu and editing a menu item, it might be caching

"the option to link to an image on the web"

OK now I understand ;-)

All imagepicker is doing is building up a piece of html and inserting it into the body using javascript, once it is pasted that's the end of imagepicker's involvement.
I just tried pasting an img src straight in and that works but I had to switch off TinyMce

I agree that Drupal can idiosyncratic but at least it's mostly doable and it has a published API which is not complete but it certainly helps.

Hope you can get the tabs up

I've read through this thread and realize that it's not (exactly) as you are describing. The issue is the order in which styles are applied. Unfortunately, the order in which styles are applied are a "Drupal" thing which presents a particular collision with various themes. So this seems to work reasonably well as a work-around:

The easy way:

1. Remove all of the bad css definitions in imagepicker.css
   (that's everything after the header comment up to the definition of tbody {)
2. Edit imagepicker.tpl.php and replace this statement:
   

         <body>
   

   with

          <body style="background: #ffffff">
   

   Of course - you'll need to supply your favorite background color.

You are quite right, the body and tbody stuff should not be there, I will remove them in the dev versions.

This is a theme dependent problem, I am seeing the following generated by $tabs

<ul class="tabs primary">
<li class="active" ><a href="/imagepicker" class="active">Upload</a></li>
<li ><a href="/imagepicker/browse">Browse</a></li>
</ul>

You can copy imagepicker.tpl.php to your theme's directory and it will be used instead of the default if you are using the most recent version of imagepicker.

The template override does not seem to work in my themes directory- either in all/, or my specific site directory.

It should be in the default themes directory, that's what imagepicker looks up.
In D6 you will likely need to flush the themes registry, the devel module will do this or just save the theme might do it.

sites/default/themes? Good to know. It's a little different from usual theme customization practices- inasmuch as I understand what those are.

no no, the default theme currently in use on your site.
You should put contributed modules in sites/all/modules and contributed themes in sites/all/themes
It's all in the drupal docs

This did the trick for me.

The Thickbox module might be a good candidate for integration to streamline the IFrame.

I will have a look, thanks for the heads up

that worked with me .. but will there be any problem with updating the module ?

sjz suggestion

1. Remove all of the bad css definitions in imagepicker.css
(that's everything after the header comment up to the definition of tbody {)
2. Edit imagepicker.tpl.php and replace this statement:

with

Of course - you'll need to supply your favorite background color.

I've lost the thread here, what works for you?
BTW, if it's theming you are concerned with, there is much better support in the most recent version

There are now two template files which need to be modified in the same fashion

• imagepicker-page.tpl.php
• imagepicker.tpl.php

the same changes apply

Replace

<body>

with

<body style="background: white;">
(or whatever your favorite color should be)

and Yes - You will need to remember to do this when you do updates.

-steve

The issue title seems to has been accidentally changed. I replaced it.

@steve (aka sjz) No, you don't have to modify the file in the module, just copy the template file (imagepicker-page.tpl.php with latest version) to your Theme and modify it there! Hutch modify the module to handle that override feature. You can than update the module over and over, the file in your theme will always remains the same.

That's will work as long as the original template do not change too much over the time, with further updates (it's really simple so it should not be an issue). In that case, you may have to copy it again from the module to your Theme and modify it again in your Theme. The module will use the template from your Theme instead of the original one, if it exist.

@Hutch May I suggest you to add an ID to the body, so we can simply modify the CSS from the theme without having to copy and modify the template. The only modification I had to do to the template was:

<body id="imagepicker">

And I add those lines to my Theme CSS file:

#imagepicker {
  background-color:#FFFFFF;
  background-image:none;
}

Btw, thanks for this wonderful module. I just install it and so far, it's exactly what my team was looking for!

I was expecting it to works like the IMCE module, with the popup, just because our users are used to that. But as long as I can remove the image button from the CKEditor, I guess that's will be alright.

I have added <body id="imagepicker"> to CVS so that will appear in the dev version soon

All I needed to do was add some inline styling to the tag of the
imagepicker.tpl.php file within the Imagepicker module directory.

<body id="imagepicker" style="background-color:#FFF; background-image:none; line-height:70%;">

Better to copy imagepicker.tpl.php to your theme and do it there, then it won't get over-written at the next update.
Or you can add something like

#imagepicker {
background-color:#FFF;
background-image:none;
line-height:70%;
}

to your theme's stylesheet.

Good point. Thanks for the heads up.

Solution number 6 is perfect - thanks!