This patch fixes some CSS hard-coded stuff to be more dynamic. With it, plup will be able to handle thumbnails of any size.

This patch also hides the big upper panel that had "min-height: 120px", because it makes the end user feel that something is missing there when he didn't send any images yet, and might make the user drag images there, thus breaking the page.

Default view:
Default plup view

With some images uploaded:
Listing images

ps. patch formated with "git format-patch"

Comments

Fidelix’s picture

StatusFileSize
new1.68 KB

Updated patch.

Fidelix’s picture

StatusFileSize
new2.23 KB
new5.47 KB

Same patch with 1 more improvement:

Added a border to the draggable area so the user knows where he can drop the files.
Border

Fidelix’s picture

StatusFileSize
new2.76 KB

Same as before, but with a line-height fix.

Anonymous’s picture

Status: Needs review » Active

I'll look into it.

fietserwin’s picture

These style changes don't work when alt and/or title texts are allowed to be defined by the editor.

So, I think it is not such bad idea to use thumbnails of known predefined dimensions. However this module should define its own image style for that and not "hijack" the Drupal defined thumbnail image style. An example of a module doing so is Linkit (7.x-2.x version), but basically it comes down to defining the hook like below (copied from a features generated module). I found this issue because I had a problem with this module, because my thumbnail dimensions have been overruled for other purposes...

function plup_image_default_styles() {
  $styles = array();

  // Exported image style: plup_thumb
  $styles['plup_thumb'] = array(
    'name' => 'plup_thumb',
    'effects' => array(
      4 => array(
        'label' => 'Scale',
        'help' => 'Scaling will maintain the aspect-ratio of the original image. If only a single dimension is specified, the other dimension will be calculated.',
        'effect callback' => 'image_scale_effect',
        'dimensions callback' => 'image_scale_dimensions',
        'form callback' => 'image_scale_form',
        'summary theme' => 'image_scale_summary',
        'module' => 'image',
        'name' => 'image_scale',
        'data' => array(
          'width' => '100',
          'height' => '100',
          'upscale' => 1,
        ),
        'weight' => '0',
      ),
    ),
  );

  return $styles;
}
Fidelix’s picture

StatusFileSize
new3.31 KB

fietserwin, I have to disagree.

The ability to define your own image styles for thumbnails is a very good feature of this module, and I strongly believe that it should not be removed.
There are numerous use cases for defining your own image styles.

I have created a patch that has all the previous changes in 1 single commit.
Besides that, it adds a placeholder text to the Title and "Alt Text" input fields, improving usability.
It also adds a proper class to each input field in order to distinguish them, and improves the CSS of the fields to work with any thumbnail size.
Also, it changes the JS behavior so that the fields only appear when hovering over or focusing the thumbnail. I'm not sure if that improves usability, but I did it so the fields don't prevent the user from viewing the thumbnails.

Fidelix’s picture

StatusFileSize
new3.31 KB

This also contains a small fix to prevent the remove button from going behind the input in a natural way.

If the user focuses on the input field, the remove button will go behind, as expected.

Anonymous’s picture

Status: Active » Closed (fixed)
alex.87’s picture

Can anyone provide .zip with working patch for various thumbs sizes? I dont have shell access.

alex.87’s picture

Issue summary: View changes

Added description to images.