Automatic logo resizing. (Solved)

[Martijn Geerts]

I'm trying to resize a logo to fit in a boundary box. Works great with only fitting the box. (see first 2 pictures)

But I wished it could add some automatic scaling factor.

+---+----------+---+  +------------------+
|   |\\\\\\\\\\|   |  |                  |
|   |\\\\\\\\\\|   |  +------------------+
|   |\\\image\\|   |  |\\\\\image\\\\\\\\|
|   |\\\\\\\\\\|   |  |\\\\\\\\\\\\\\\\\\|
|   |\\\\\\\\\\|   |  +------------------+
|   |\\\\\\\\\\|   |  |                  |
+---+----------+---+  +------------------+

If the original image has the same pixel dimensions as the box, the image should be shrinked like the picture below.

+------------------+
| +--------------+ |
| |\\\\\\\\\\\\\\| |
| |\\\\image\\\\\| |
| |\\\\\\\\\\\\\\| |
| |\\\\\\\\\\\\\\| |
| +--------------+ |
+------------------+

• If the boundary box has the same amount of pixels as the re-scaled image, we should re-scale the image again, with the highest amount of 'compression'.
• If the image contains little bit less pixels then the box, we should scale it less then the maximum scaling rate.
• If the image has 30% of the pixels of the box, don't re-scale it.

to use:

// single page image
$logo = $page->image;

// initialize the module
$module = $modules->get("ImageFitBoundaries");

//  max. horizontal space <--+    +--> max vertical space an image can take
$info = $module->load($logo, 200, 95)->info();

$width = $info['width']; 
$height = $info['height'];

// create the thumb
$thumb = $logo->size($width,$height, array('sharpening' => 'none')); // sharpening none, due bug in png resize

echo "<img src='$thumb->url' alt='$thumb->description' width='{$width}' height='{$height}'>";

Which Math genius can help me out. I started a Gist.

[DaveP]

I did something like this some time ago (in a previous job, so I don't have access to the code any more). It was to come up with a method of showing rows of manufacturers thumbnails in an e-commerce setting. The problem was that they were all very different shapes and it was hard to make them look 'balanced'.

The theory I came up with was that, regardless of shape, the same pixel area (say 2,000 pixels) would look right whether the logo was square, a landscape rectangle, or a portrait rectangle. As I recall, it was a matter of working out the width to height ratio and applying that to the required total pixel area.

Dunno if that helps, but it might give you something to think about...

[Martijn Geerts]

Tnx for your responce DaveP. The use case for this is exactly what you describe. And it's true that thin lined logo's with cross shapes won't work very well the automated way for example. 

The theory you have is the same theory I have, but's its only theory on my part  .

I can calculate the percentage that the logo takes in comparison to the box. So the biggest possible image = 100%; This one should scale the most. A landscape image, who's only taking 30%, should be made smaller but just a tiny fraction. Here's where my poor Math skills can't work it out.

Maybe I just go for an ugly switch for every 10 percent or something.

[DaveP]

I think the crux of my method was that a very thin landscape image

+--------------------+
|                    |
+--------------------+

should be allowed to be wider than an image with the same area, but square or squarer.

+----------+
|          |
|          |
|          |
|          |
+----------+

so long as they both have about the same pixels, eg 100 x 20 or 40 x 50 are both 2000 pixels. This seemed to give a reasonable 'visual balance'. 

Disclaimer - I am not a designer and have no idea why some things look better than others.  Maybe one of the designers here could offer some insight.

[Martijn Geerts]

Problem Solved, updated the gist.

To use: 

$image = $page->image; // image from $page, or any other ProcessWire image

// $x & $y are required
$x = 200; // width, the size of the box (max width an image can scale in width)
$y = 100; // height, the size of the box (max height an image can scale in height)

// $compress is optional
$compress = 20; // makes heavier smaller then normal images, from (low) 1 to (high) 99 compression

// usage 1
$img = $modules->get("ImageFitBoundaries");
$img = $img->load($image, $x, $y, $compress);
echo $img->render();

// usage 2
$mod = $modules->get("ImageFitBoundaries");
$info = $mod->load($image, $x, $y, $compress)->info(); // also works: $mod->load($image, $x, $y, $compress)->info
$thumb = $image->size($info['width'], $info['height']);
echo "<img src='$thumb->url'>";

Thanks Dave, for your insight!