image crop and resize wishes

[Marty Walker]

Hi,

I really do like how PW crops and resizes images but, you know, I always want more So my little wish list goes like this:

• Set quality on the fly: $thumb = $image->size(100,100,75) - some images like logos need 90% quality and some would only need 75. And you could argue that some could cop a 50% hit in image quality - full page background images for example.
  
• Set the position of where the crop takes place ala phpThumb (useful yet hideous in many ways):
  $thumb = $image->size(100,100,90,TL) or $thumb = $image->size(100,100,90,TR) or $thumb = $image->size(100,100,90,C)
  

Cheers

Marty

[renobird]

+1

[ryan]

I think these are good ideas. Regarding the quality setting: ImageSizer does support adjustment of the quality (via the setQuality() method), but there's not currently a way to get directly to that from the size(), width() or height() functions (like with the upscaling option). However, I'm wondering if this is something that needs to be on-the-fly or might be better off in a $config setting that you can set for the whole site? (or modify it at runtime as needed). Something like this:

// just an idea, but not yet implemented, so don't put in your config.php yet 

$config->imageSizerQuality = 90; 
$config->imageSizerUpscaling = false; 
$config->imageSizerCropping = true; 

Of course, that could still be on-the-fly, by modifying the $config properties at runtime. But just wondering if this might be better than adding params to functions that most won't need to utilize. In addition, we could always provide a 3rd param $options array to the size() function that could override individual settings too, but wouldn't want to make that the only way since I'm guessing most don't need to set these things but once.

Regarding the crop, I like the idea and capability. I just don't know how to do it, yet. If anyone wants to collaborate I'd love to get the capability in there. Rather than getting it in as another function param, I'd want to integrate that option as part of the $options array to the function, i.e.

$image->size(100, 100, array('position' => 'top-left', 'quality' => 95)); 

[Marty Walker]

$image->size(100, 100, array('position' => 'top-left', 'quality' => 95)); 

Something along those lines would be fantastic.

Regards

Marty

[MadeMyDay]

Especially regarding Retina-compatibility, this is an important feature. Interesting fact is: Retina demands doubled size (in each dimension), but you can set the jpg quality to 15-20% for getting sharp results without losing quality. So a feature to determine the quality "on the fly" would be fantastic. I use the picture element (well, not a real element because not implemented by browser vendors yet) for serving different image dimensions to different sreen sizes / pixel ratios. So I would need a possibility to server a 20%-jpg to Retina displays while leaving the 90% version for usual screens (original image already reduced).

Good example here: http://retinafy.me/e...eg-scaling.html

(I have a Retina display and the examples are stunning!)

[ryan]

I'm a little confused about what you mean by the 20% quality setting and how this relates to retina displays? I would think a 20% quality setting would look horrible, but obviously it doesn't (as your examples show). So I'm just scratching my head, not sure exactly what this is. Looking on my desktop (30" dell screen) the first image looks potentially a little sharper, though close call. Looking on my iPad or iPhone (both retina) the second image is visibly sharper (especially on the first example). Quite interesting to see the difference, though not sure I'd notice if they weren't actually side-by-side. Still, can't quite believe those are 15/25 quality, so scratching my head.

[interrobang]

I think it would be nice if we could do something like that:

$myImagesizer = new ImageSizer();
$myImagesizer->setUpscaling(false);
$myImagesizer->setQuality(20);
$myImagesizer->size(600, 400);

$img->apply($myImagesizer);

This way it would even be possible to extend Imagesizer and add some new methods to it without modifying Pageimage. I am thinking at filters like blur, desaturize,...

[MadeMyDay]

I also recognized this effect when saving for web in Photoshop and got proven by this example from the author of retinfy.me. My only explanation is: On Retina displays you have a quadrupled amount of pixels on the same amount of space (twice in every dimension). So the effect of artefacts done by a JPG compression which usually only combines near and similar pixels is not so visibible (somehow). But areas of details where pixels show high contrast are not that much compressed, so the result on Retina is much sharper in the end. But this is only my explanation, perhaps I am totally wrong. But nevertheless, it would be nice to have an option to determine the quality for images

[ryan]

Sounds good, I had planned on adding a quality setting with the $options array to the size() function like mentioned above. I'll push this forward in 2.3.

Interrobang I think that looks like a good clean route too--decorating an image with an imagesizer. Though for doing the same thing, I think the $options array may be a little simpler both to implement and [subjectively] use. Plus we're using similar $options arrays elsewhere in ProcessWire, so it'll maintain consistency there.

[Pete]

I was literally just looking up how to change the quality and came across this topic when searching - I know I've read it before but now I have reason to leave a comment.

+1 for the options array - sounds like it could be really useful in places, and definitely having it available in the template code makes the most sense so you're not blanket-assigning it to a field used all over the place - well thought out once again ryan

[ryan]

Just added that optional options array to the size() function, so it should appear in the core this week. Currently you can specify: quality (1-100), upscaling (boolean), cropping (boolean). The position stuff will be added later.

$image->size($width, $height, $options); 

You can also choose a default set of options and specify them in your /site/config.php:

$config->imageSizerOptions = array(
 'upscaling' => true,
 'cropping' => true, 
 'quality' => 90,
 );

[Marty Walker]

Hazzah! Thanks Ryan!

[jacmaes]

Ryan, it would be great to have also a sharpening option. I find that rescaled images commonly come out slightly blurry.

PhpThumb uses this script to sharpen thumbnails:

http://vikjavev.no/computing/ump.php

Would that be something you'd consider?

[Pete]

I would actually suggest a third-party image editor that could somehow be included as a module. I get the feeling it's been suggested before, but I saw this one recently from some of the Picnik devs (Picnik got snapped up by Google it seems and integrated into Google+) who decided to build their own app and thus we have http://www.picmonkey.com

I've seen this in another piece of software and it's pretty neat - basically the picture is sent to the Picmonkey service and you edit it there, save it and it passes the image back to your system - ProcessWire in this case. There's an API to facilitate all of this: https://docs.google.com/document/pub?id=1OhlOYcCvJiV44c13XpDx0HJV3UArKgRya3lq_Ahr5T0

All that said, I'm not sure how you would even begin to go about it, just that a full set of tools via a module would be nice to have even if it does go third-party for the editing process.

[ryan]

Someone recently made a module that integrates with another image editing service. It looks like they never submitted it to the modules directory, and now I can't find it… I need to track it down, as I recall it worked quite well when I tested it.

[Soma]

Pixlr... Am on mobile

[Pete]

Here we go: http://processwire.c...03-pixlreditor/

I did have have a sneaky suspicion as I was typing that someone might have done this and it turns out I even replied in that thread - my memory is rubbish!

Looks like you said you were going to do something there in that last post ryan.

[jacmaes]

In my humble opinion, Pixlr serves a specific purpose: it's probably very useful for occasional image adjustments, and apparently is quite powerful. And I see a couple of major problems with it:

1. It's Flash-based, so it's obviously not a future-friendly solution. Flash is dying on mobile devices since Adobe officially killed it (it never really was an option anyway). Who cares, you might say? Who would want to edit images on a mobile device from a PW admin? Well, I already have a couple of clients who are literally in the "post-PC era": they do all their work on tablets. Don't ask them to edit their sites on their laptops or desktops: they don't have one anymore. Most of us might think this is a strange idea to edit a PW site on a mobile device, but this is already happening, and whether we like it or not, it's very likely to become the norm within a few years.
   
2. I can't just ask my clients on high-traffic websites to open an image-editing module dozens of times each day and hunt for the sharpening tool each and every time that they upload a new picture. They wouldn't do it, and I wouldn't blame them. I wouldn't want them to mess with the other filters either ("I put it all my pictures in sepia because they look prettier that way").
   

Image sharpening is the only nagging "issue" I have with PW for all the image-heavy sites that I'm developing. Admittedly, most users wouldn't notice that pictures are slightly blurry. But I do, and it bothers me. I want my sites to look as good as I can make them to be, not just acceptable. I'm sure most of you share that philosophy.

I can get around the problem by enforcing crops in apeisa's excellent module at a larger size than required and then shrinking the image in my HTML or CSS, but it's not a good solution. It seems to me that image sharpening should be a configurable option globally (whether as a module or included in the core), just like image quality now is.

[Soma]

I upload big images, and scale them down using quality of 80 or 90% and they look very sharp. Don't see what the problem is to be honest.

http://www.velokurier.com/ look at the news images scaled, I don't see anything blurred.

I could see and option to add gd2 or imagemagic, as imagemagic is known to produce slightly sharper images than gd2.

[jacmaes]

Soma, I probably need to mess with the quality settings some more to see if I can achieve better results out of the box without generating unnecessarily large files, which would slow the site down. That said, as you mentioned, all is fine if you have images that are reasonable large enough to start with. If I edit the site myself, that's doable. I can look for artwork with good resolution and size, or request them from my client.

But if it's my client who is in charge of updating the content, they often don't have the resources, time, interest or access to good resolution pics. Let me give you an example. I'm finishing a template for an events website that might be used in more than 50 different countries if approved. Each event would have a thumbnail, a larger pic, and an even larger pic (650px x 300px) if this is to be a featured event. The thumbnails usually look sharp enough, but I'm running into problems at larger sizes, especially if the size of the original image is close to the cropped one (let's say 800px x 600px for a featured event), as is to be expected in a real-case scenario since the images would come from various institutions who I know from experience don't care about image quality or size.

If the quality is bad to start with, then there's not much that can be done. But I do think a sharpening option would make a difference in most (of my) cases. Let me reiterate that most users would not see much of a difference, and that it's just a minor nuisance for me. But since this is a wishlist thread, I thought I'd mention it.

[diogo]

Concerning the pixlr module, I just wanted to add aviary to the discussion. I always liked aviary tools, and their web widget does seem nice http://www.aviary.com/web

[Pete]

It is all possible to do in PW of course, especially with the right image library on your server (Image Magic will do more than GD and is install able on most servers) but that will be a longer-term solution as someone will have to write that module (preferably detect Image Magic and if its not there fall back to a lesser feature set using GD2).

It would be an awesome module though!

[Jozsef]

Hi everyone, I've just switched from Drupal a few weeks ago and I'm so glad I did! ProcessWire already helped me to develop a site only third of the time I expected. I also love the active and helpful community.

But back to retina images:

A "retinafy" option would be very helpful for the image resize/crop as I use this technique too, serving 1 image to all devices with double dimensions but low image quality based on this technique explained by Daan Jobsis. It is possible to achieve it in the template but this kind of maths just doesn't belong there.

The retinafy option could work like this when set to true:

The image is automatically sized/cropped to double dimensions but $img->width or $img->height reports the intended dimensions.

Example:

I want to have a 150x100px retina image so I use $page->image->size(150, 100, $options) with retinafy => true.

The result is a 300x200px image with the markup: 

<img src="/site/assets/files/123/image.jpg" width="150" height="100"/>

What do you think? Would you suggest any simple way to achieve this without writing many lines of php for every image? Of course it has to take the upscale => false option into account if enabled.

[LostKobrakai]

@jjozsi 

While there's no native version in ProcessWire you could do this on your own with a small module. Just hook into the Pageimage functions and look for the retinafy option. If it's true you can double the size values and lower the quality. More on changing arguments here: http://processwire.com/api/hooks/#read_arguments

[horst]

@jjozsi

welcome to the forums.

@jjozsi & @all

I think this is a perfect task for Pia. I would suggest to implement it this way:

// create a pageimage with any known method or module (width, height, size, crop, contain, cover, ...)
$image = $images->first()->size(400,400,$options);

// return output for retina displays
$image->retina();

Pia will inspect the given pageimage for width and height and outputs a html img tag according to your settings in ModuleConfig but fills in the half value for width and height.

Available placeholders should be each available Pageimage property from your system as uppercase wrapped into [], so the default ones are:

   - 

   -  [WIDTH]

   -  [HEIGHT]

   -  [DESCRIPTION]

 

So, if you have this configsetting: <img src="" width="[WIDTH]" height="[HEIGHT]" alt="[DESCRIPTION]" />

and your $image->width is 400 and your $image->height is 300, the output of $image->retina() will be something like:

<img src="/site/assets/files/1234/basename.400x300.jpg" width="200" height="150" alt="the image description" />

What do you think?

 

Or is it odd to calculate the double size for the initial images by yourself? The advantage of this implementation is that you can use it with any core- or module-method (even future ones) that return a pageimage!