Now if it only worked with image nodes :)

Here is a feature request list, if you made it work with image nodes:

1. Keep original size image as the original size
2. Option to crop for the different preset sizes (thumbnail, preview) and the user selected presets, of course.
3. Ability to zoom in and out in the image. If the original is very big I might want a certain resulting size from the crop, but it might not be a small area in a very big picture, but a certain area at a certain zoom level. Think one face in a group shot. The shot might be 3000x2000 pix, the resulting thumnail might have the dimensions 300x200 then my crop might want to zoom a bit in on one person, even though that will need to blow up the pixels from the original.

So in total it should not change the original, I would like to be able to select different crops for the different presets, and I would like to crop in a zoomed in picture, even blowing up details.

But, kudos for creating something sorely lacking in Drupal. As it stands now with automatic cropping and resizing it has been sorely lacking your funtionality.

Comments

yhager’s picture

yhager commented
Assigned: Unassigned » yhager

Thanks for the review and comments.

Here is a feature request list, if you made it work with image nodes:

Since there are a number of ways to manage images in Drupal, I had to choose one to start with. I chose to go with extending CCK's imagefield, figuring contains the image node functionality (create a content item with an imagefield to have an image node).

Quite a lot of time has passed since that decision was taken. I now realize that image nodes have functionality that does not exist for CCK & imagefield combination (ease of galleries for example).

I haven't looked at the ability to add this to image nodes, but my gut tells me it would be simpler than the current implementation. I'll look at it when I have the time.

1. Keep original size image as the original size

So you want the crop box to be sized according to the original image? I had that in an earlier version (in my sandbox), but I am not convinced the user *wants* to view a 3000x2000 px image on her screen without scaling. The way I see it is that users do not need to mess with the image, or have any knowledge about its resolution. They have the image, upload it and crop it, and the app should play along these lines. Also, for advanced theming, you may want to know the exact size the crop box will be in so you can design the rest of the page to fit.

2. Option to crop for the different preset sizes (thumbnail, preview) and the user selected presets, of course.

Does that mean a different crop for each preset size? Or just have different sizes after you crop? If it is the latter try to use imagecache - I haven't tested it with this module, but they should be unrelated.

3. Ability to zoom in and out in the image. If the original is very big I might want a certain resulting size from the crop, but it might not be a small area in a very big picture, but a certain area at a certain zoom level. Think one face in a group shot. The shot might be 3000x2000 pix, the resulting thumnail might have the dimensions 300x200 then my crop might want to zoom a bit in on one person, even though that will need to blow up the pixels from the original.

The is already an option to "use unscaled (original) image for cropping", so although you are seeing a scaled-down version of the image while the cropping interface is shown on screen, back under the hood, the original image is used for the cropping, so quality is not reduced if possible.

Zooming in-and-out is a good idea, but I am not sure I know how to do that with nice-and-cool JS.. maybe server side, or server-side+ajax if we want to avoid the reload. I'll keep that in mind.

pkej’s picture

pkej commented

1.

So you want the crop box to be sized according to the original image? I had that in an earlier version (in my sandbox), but I am not convinced the user *wants* to view a 3000x2000 px image on her screen without scaling. The way I see it is that users do not need to mess with the image, or have any knowledge about its resolution. They have the image, upload it and crop it, and the app should play along these lines. Also, for advanced theming, you may want to know the exact size the crop box will be in so you can design the rest of the page to fit.

No. There must be a canvas. But I was thinking along the lines in the image module. The crop could be either the image itself, as it is done now, or it might be a way of visibly selecting thumbnail crops. So, when you select thumbnail crops, you will not loose the original image. As it is now I can do this with your widget. I can create two image fields, the first without the crop-widget, and the second with the crop-widget. But now the user has to upload the image twice, first for creating the original image. And then once for the thumbnail.

In one application I tried you see the different preset sizes as canvases on the page. Then the original image is shown inside the canvas. By dragging the image you will see exactly what the crop will look like. By doing a ctrl+drag I was able to zoom in and out into the original image.

I'll take a screenshot of the app and mail it to you privately if you're interested.

2.

Does that mean a different crop for each preset size? Or just have different sizes after you crop? If it is the latter try to use imagecache - I haven't tested it with this module, but they should be unrelated.

The former.

I might want a 800px x 150 px wide plug-image, for use only on the front page to cover the whole column width. I would like to crop so that the face of the person is either in the left or to the right in the crop, thus making a better impact on the front page. Then for the story page I might want the whole image but cropped to the stanard size of 800x600.

For an image gallery the crop I would use might be 150px x 150 px for the preview, so I want it to show just the face of the person. Etc.

3. I think the above two explanations from me more clearly states how the zoom would work. I'll try to take a few screenshots and show you how this works.

Paul

pkej’s picture

pkej commented
Title: Great widget » Relevance-Enhanced Image Reduction: Better Thumbnails

Here is the "Show don't tell" version of what I meant: http://www.useit.com/alertbox/9611.html Scroll down to the header "Relevance-Enhanced Image Reduction: Better Thumbnails".

Of course, and implementation of this must be able to insert an "Operation" into the "Image"-module s that one can choose it from the admin page "admin/settings/image".

One would then be able to choose "Scale image", "Scale and crop image" or "Relevance-Enhanced Scaling".

Notice that the article is from 1996 and is still relevant. I've yet to see an implementation in this outside one commercial system, namely Polopoly of Sweden, but I haven't tried out all systems, of course.

Best regards,
Paul

yhager’s picture

yhager commented

Please note that you can resize the crop box, and (the admin can) set the output image size, so effectively achieving:

  • Scaling - if you just include the whole image in the box, you'll achieve scaling only.
  • Cropping - if you use a crop box which is exactly the same size as the output image size.
  • Scale & crop - if you crop any part of the image any size - it will get reduced to the output size.

So I can achieve all three options from the example you linked.

Also, if you want to use different croppings of the same image at the same time (one for the front page, another for teaser, etc. - imagecache on steroids..) - I guess it is a little out of the scope of this humble widget. I'll continue thinking what is the best way to implement it and post back once I have thought it through. Maybe this needs to be shared with the usability group for some discussion.

pkej’s picture

pkej commented

I'll post to the usability group at groups.drupal.org and link to this issue.

pkej’s picture

pkej commented

Posted

yhager’s picture

yhager commented
Status: Active » Postponed

Thank you for the post. It is very informative.

I will keep thinking about this till I come up with the best approach for implementation (should be coordinated with imagefield and/or image nodes as well).

I am marking this as 'postponed' for the moment.

yhager’s picture

yhager commented

Maybe this is the right direction: http://drupal.org/node/234898

pkej’s picture

pkej commented

Brilliant, thanks for the heads up.