Forum Activity for @ultrajam

SteveX
@ultrajam
04/27/14 02:01:17PM
2,589 posts

Image sizes


Design and Skin Customization

This seems to work for all images I've tried:

                // Check for an aspect ratio crop
                if (strpos($_post['crop'], ':')) {


//                     // Our aspect ratio crop will come in like 4x3 or 16x9, etc.
//                     list($w, $h) = explode(':', $_post['crop']);
//                     $w = (int) $w;
//                     $h = (int) $h;
//                     // What is our existing ratio?
//                     if ($w > $h) {
//                         $chunk           = round($src_height / $w);
//                         $src_y_offset    = round(($src_height - ($h * $chunk)) / 2);
//                         $new_width       = $_post['width'];
//                         $new_height      = round(($_post['width'] / $w) * $h);
//                         $_post['height'] = $new_height;
//                         $src_height     -= round($src_y_offset * 2);
//                     }
//                     else {
//                         $chunk           = round($src_width / $h);
//                         $src_x_offset    = round(($src_width - ($w * $chunk)) / 2);
//                         $new_height      = $_post['width'];
//                         $new_width       = round(($_post['width'] / $h) * $w);
//                         $_post['width']  = $new_width;
//                         $_post['height'] = $new_height;
//                         $src_width      -= round($src_x_offset * 2);
//                     }

                
                    // Our aspect ratio crop will come in like 4:3 or 16:9, etc.
					$crop = array_filter(explode(':', $_post['crop']));

					$ratio = array(0 => $src_width / $src_height, 1 => $crop[0] / $crop[1]);

					$w = $crop[0];
					$h = $crop[1];
			
					// What is our existing ratio?
					if ($w > $h) {
					
						if ($ratio[0] > $ratio[1]) {
							$width = $src_height * ($w / $h);
							$src_x_offset = ($src_width - $width) / 2;
							$src_width = $width;
						
						}

						else if ($ratio[0] < $ratio[1]) {
							$height = $src_width / ($w / $h);
							$src_y_offset = ($src_height - $height) / 2;
							$src_height = $height;
						}

						$new_width       = $_post['width'];
						$new_height      = round(($_post['width'] / $w) * $h);
						$_post['height'] = $new_height;
						
					}
                    else {

						if ($ratio[0] > $ratio[1]) {
							$width = $src_height * ($w / $h);
							$src_x_offset = ($src_width - $width) / 2;
							$src_width = $width;
						}

						else if ($ratio[0] < $ratio[1]) {
							$height = $src_width / ($w / $h);
							$src_y_offset = ($src_height - $height) / 2;
							$src_height = $height;
						}
						
						$new_height      = $_post['width'];
						$new_width       = round(($_post['width'] / $h) * $w);
						$_post['width']  = $new_width;
						$_post['height'] = $new_height;
							
                    }

                }
                else {
                    // Default auto height/width
SteveX
@ultrajam
04/27/14 06:58:15AM
2,589 posts

Image sizes


Design and Skin Customization

That doesn't seem right at all, all cropped images are distorted regardless of the ratio.
For a 800x601 image (using "large" for 256x256 output):
/blog/image/blog_image/1/large/crop=33:33
|src_height=601 src_width=792 src_y_offset=0 src_x_offset=4|

src_width should be 601 with a src_x_offset of 99

Similar for both landscape and portrait crops 2:1 and 1:2

Also, after emptying the image cache I don't always see a new image being created (the fdebug in the crop section of jrImage/include.php doesn't get triggered). I'm not sure how that image cache is supposed to be working.
SteveX
@ultrajam
04/24/14 10:16:34AM
2,589 posts

Sponsoring a new module


General

Yeah, but not successful news I'm afraid.

From my experiments I'd say sorting and filtering need to be implemented in the skin or the display module. I haven't found a way to add that into other modules (or an aparna module) and skins in a way which makes sense.

The easiest way for you to do this would be to modify your skin templates (if it is a page) or your custom module templates if you want it shown on a profile page.

You'd probably need to add classes or data attributes to filter/sort on to the item (ie add the classes or data attributes to the item row).
SteveX
@ultrajam
04/23/14 03:58:48PM
2,589 posts

Image sizes


Design and Skin Customization

brian:so this is basically just cropping to something that is not a square

When you put it like that it sounds so simple - a linear thread, spiralling on a square.
SteveX
@ultrajam
04/23/14 03:47:06PM
2,589 posts

Image sizes


Design and Skin Customization

I'm not sure, whatever woulld be most useful to the target market I guess.

cd/square, book, portrait, banner, tv, facebook, twitter and google?
updated by @ultrajam: 04/23/14 03:52:31PM
SteveX
@ultrajam
04/23/14 01:19:38PM
2,589 posts

Image sizes


Design and Skin Customization

brian:It's easy to say how it should work, but I've been doing this for over 10 years and have yet to find a perfect solution that works 100% of the time for 100% of images.

I know man, I'm talking it rather than coding it, and I know I'm out classed: Everything I know about php is via you and your excellent code (and now the Jamroom Team), so it's kind of weird even attempting to explain what I mean (especially as we've been in a similar thread before jr5, and most people seem totally unconcerned by squishing or squareness), but you did say you were all ears, and I do love to shoot the breeze.

So my apologies for the wordiness in this thread. I'm going to attribute that to perfect weather here at the moment.

Important to note, I'm perfectly happy working with square images, and they do work flawlessly.
updated by @ultrajam: 04/23/14 01:35:18PM
SteveX
@ultrajam
04/23/14 12:16:24PM
2,589 posts

Image sizes


Design and Skin Customization

http://stackoverflow.com/questions/999250/php-gd-cropping-and-resizing-images

This page has a self contained example which does more of the maths. Change the aspect ratio and size on the last line.

imagetest.php:
<?php
function Image($image, $crop = null, $size = null) {
    $image = ImageCreateFromString(file_get_contents($image));

    if (is_resource($image) === true) {
        $x = 0;
        $y = 0;
        $width = imagesx($image);
        $height = imagesy($image);

        /*
        CROP (Aspect Ratio) Section
        */

        if (is_null($crop) === true) {
            $crop = array($width, $height);
        } else {
            $crop = array_filter(explode(':', $crop));

            if (empty($crop) === true) {
                    $crop = array($width, $height);
            } else {
                if ((empty($crop[0]) === true) || (is_numeric($crop[0]) === false)) {
                        $crop[0] = $crop[1];
                } else if ((empty($crop[1]) === true) || (is_numeric($crop[1]) === false)) {
                        $crop[1] = $crop[0];
                }
            }

            $ratio = array(0 => $width / $height, 1 => $crop[0] / $crop[1]);

            if ($ratio[0] > $ratio[1]) {
                $width = $height * $ratio[1];
                $x = (imagesx($image) - $width) / 2;
            }

            else if ($ratio[0] < $ratio[1]) {
                $height = $width / $ratio[1];
                $y = (imagesy($image) - $height) / 2;
            }

        }

        /*
        Resize Section
        */

        if (is_null($size) === true) {
            $size = array($width, $height);
        }

        else {
            $size = array_filter(explode('x', $size));

            if (empty($size) === true) {
                    $size = array(imagesx($image), imagesy($image));
            } else {
                if ((empty($size[0]) === true) || (is_numeric($size[0]) === false)) {
                        $size[0] = round($size[1] * $width / $height);
                } else if ((empty($size[1]) === true) || (is_numeric($size[1]) === false)) {
                        $size[1] = round($size[0] * $height / $width);
                }
            }
        }

       $result = ImageCreateTrueColor($size[0], $size[1]);

        if (is_resource($result) === true) {
            ImageSaveAlpha($result, true);
            ImageAlphaBlending($result, true);
            ImageFill($result, 0, 0, ImageColorAllocate($result, 255, 255, 255));
            ImageCopyResampled($result, $image, 0, 0, $x, $y, $size[0], $size[1], $width, $height);

            ImageInterlace($result, true);
            ImageJPEG($result, null, 90);
        }
    }

    return false;
}

header('Content-Type: image/jpeg');
Image('http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png', '16:9', '320x');

?>
SteveX
@ultrajam
04/23/14 11:13:39AM
2,589 posts

Image sizes


Design and Skin Customization

Nothing will work perfectly for 100% of all images until image saliency (facial recognition, horizon, etc) is taken into account which is years away, but surely different aspect ratios (16:9, 4:3) work in the same way that crop to square (1:1) works?

I could be wrong, definitely being foolish in trying to explain it , but looking at imagecopyresampled, wouldn't it work like this?:

imagecopyresampled($image['handle'], $image['source'], $hnd_x_offset, $hnd_y_offset, $src_x_offset, $src_y_offset, $new_width, $new_height, $src_width, $src_height)


Instead of $new_width : $new_height and $src_width : $src_height both being 1 : 1, they can both be 4 : 3, or 16 : 9
As long as $new_width : $new_height and $src_width : $src_height are the same aspect ratios there will be no distortion, regardless of the aspect ratio of the uploaded image - $src_width and $src_height are not the width and height of the src image, they are the width and height that you are copying out of the src image.

You still need to work out the offsets - $src_x_offset = 0 unless the height hits the boundary, $src_y_offset = 0 unless the width hits the boundary.


Say we have a 1600 x 1200 image and we want a 16:9 crop (160x90) from the center.


$src_width = $actual_source_image_width;
$src_height = ($actual_source_image_width / 16) * 9;
$src_y_offset = ($actual_source_image_height - $src_height) / 2;
$new_width = 160;
$new_height = 90;
$image['handle'] is 160 x 90
$image['source'] is 1600 x 1200

imagecopyresampled($image['handle'], $image['source'], 0, 0, 0, 150, 160, 90, 1600, 900)

A 1200 x 1600 source:
imagecopyresampled($image['handle'], $image['source'], 0, 0, 0, 462, 160, 90, 1200, 675)

A 1200 x 1200 source:
imagecopyresampled($image['handle'], $image['source'], 0, 0, 0, 262, 160, 90, 1200, 675)

A 100 x 100 source:
imagecopyresampled($image['handle'], $image['source'], 0, 0, 0, 22, 160, 90, 100, 56)


I know I'm oversimplifying it, but wouldn't that give a set of 160x90 thumbnail images with no distortion?

A 9:16 portrait from a 100x100 could be similar:
imagecopyresampled($image['handle'], $image['source'], 0, 0, 22, 0, 90, 160, 56, 100)
SteveX
@ultrajam
04/22/14 02:37:33PM
2,589 posts

Image sizes


Design and Skin Customization

Apart from abstract backgrounds maybe, you should never see a distorted image displayed anywhere (not sure if that's the job of the skin or the core) - noticeable distortion always looks bad, whilst a close crop sometimes looks good. But it's just my opinion, people dont seem to mind a bit of squishing.

Its just that this looks more PhotoPro to me:
paul-on-squished-cello.jpg paul-on-squished-cello.jpg - 94KB

updated by @ultrajam: 04/22/14 02:38:28PM
  156