Matthias

Fill uploaded images empty space with white

Recommended Posts

Hi there, hopefully i didn't miss something, but i have the following question: I want to show a square picture after upload, independent of the original aspect ratio of the uploaded image. But instead of cutting the parts of the original image, it should be filled up the empty spaces with white, so that in any case the full content of the uploaded original is visible.

When i use something like
 

$square = $page->original_uploaded_image->size(500,500); 

The image will just be cropped. Did i miss something, are there options or any ideas how to ensure that all content will be still visible?

Thanks :)
 

Share this post


Link to post
Share on other sites

You could use $imageobject->width and $imageobject->height

So you will use it like that :

$square = $page->original_uploaded_image; 
echo ($square->width >= $square->height) ? '<img src="' . $square->width(500)->url . '" />'; : '<img src="' . $square->height(500)->url . '" />';

Share this post


Link to post
Share on other sites

Thank you very much, but i fear the new build image won't be a square then, but just keeping the original aspect ratio.

Share this post


Link to post
Share on other sites

There are two possible options to fit / contain images into a predefined rectangle / square:

With the bare core options, you need to pass your width / height and an additonal setting for cropping = false. (the distribution default is true!)

$containedImage = $page->original_uploaded_image->size(500, 500, array("cropping" => false)); 

 

If you find this to abstract or clumpsy, you may use the beautyful Pia, which reduces this to

$containedImage = $page->original_uploaded_image->contain("square=500");

 

Optionally / additionally interesting in this regard maybe the weighten option of Pia here.

------

But both options only help in rendering images that fit into your defined boundaries. They will work with appropriate markup and css styles applied to them, but they do not apply a canvas to the image files. If you really want to increase the images filesizes for that, by adding pixels and not use css styles, you can use the ImageManipulators canvas method. It does exactly that.

When using the Imagemanipulator with a recent PW version, please pay attention to use $image->pim2load()->...! the API examples all show the method for PW version prior to 2.6

------

Examples with Pia and IM:

$square = $page->original_uploaded_image->contain("square=500, quality=100")->pim2load("squarecanvas")->canvas(500, 500, array(255,255,255))->pimSave();

// or
$bgColor = array(255,255,255);
$suffix = "squarecanvas";
$innerSize = 480;
$outersize = 500;
$square = $page->original_uploaded_image->contain("square=$innerSize, quality=100")->pim2load($suffix)->canvas($outersize, $outersize, $bgColor)->pimSave();

// or
$bgColor = array(255,255,255);
$suffix = "squarecanvas";
$oneSizeFitsAll = 500;
$square = $page->original_uploaded_image->contain("square=$oneSizeFitsAll, weighten=1, quality=100")->pim2load($suffix)->canvas($oneSizeFitsAll, $oneSizeFitsAll, $bgColor)->pimSave();

 

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.