API: resize images on upload

[Dennis Spohr]

Hi all,

in the backend of ProcessWire it's possible to define a maximum width and height for images. If you upload an image, it will be resized automatically. I find this feature very handy to safe space. Very often users upload images which are much bigger than needed.

On my application users can upload their images via the frontend. But if you upload images using the API, images won't be resized automatically.

Is there any way to do this?

Currently that's my code:

if ($_FILES['thumbnail']['name'])
{
	$upload = new WireUpload('thumbnail');
	$upload->setMaxFiles(1);
	$upload->setOverwrite(true);
	$upload->setDestinationPath($lesson->video_image->path());
	$upload->setValidExtensions(array('jpg', 'jpeg', 'png'));

	$lesson->video_image->removeAll();

	foreach ($upload->execute() as $file)
		$lesson->video_image->add($file);
}

Thanks very much!

Dennis

[horst]

I would use the hook that is called on adding the image to the images field. This is called everytime you add a new image, regardless if you do it via API or via Inputfield.

An up to date code example for this hook is here:

In this example you can check for a $p->template->name to match as condition to run different code parts, etc.
To resize the original image itself, you may want to invoke the imagesizer manually.

----------

Instead of the hook, (for your case above), you only may use the manually invoked ImageSizer for each uploaded file *before* you add it to the image field:

    // set the max dimensions
    $targetWidth = 800;
    $targetHeight = 600;

    foreach($upload->execute() as $file) {

        // first get the filename of the *original image* (in case when hooking into file add !!)
        $filenameOrig = $file;

        // set options to not upscale, and set quality to 100%, if this image is a source for variations!!
        $options = array('upscaling' => false, 'quality' => 100, 'sharpening' => 'soft');

        // call the imagesizer
        $imageSizer = new ImageSizer($filenameOrig, $options);
        $success = $imageSizer->resize($targetWidth, $targetHeight); // resize to max dimensions

        if($success) $lesson->video_image->add($filenameOrig);
    }

 

----------

If you first need to inspect an image, (for conditional processing), you may use the ImageInspector :

    $imageInspector = new ImageInspector();

    foreach($imageFiles as $filename) {
        $result = $imageInspector->inspect($filename);

        // to check if we have a valid result, it must be an array
        if(!is_array($result)) continue;

        // $result['info'] has all relevant data, like width, height, imageType, mime, orientation, rotate, flip, channels, bits, ...
        $width = $result['info']['width']; 
        $height = $result['info']['height'];

        // ...
        
    }

 

[Dennis Spohr]

Perfect horst, thank you very much! 

[Dennis Spohr]

I just did a test, but unfortunately it doesn't work somehow.

I have the following code:

if ($_FILES['thumbnail']['name'])
{
	$upload = new WireUpload('thumbnail');
	$upload->setMaxFiles(1);
	$upload->setOverwrite(true);
	$upload->setDestinationPath($lesson->video_image->path());
	$upload->setValidExtensions(array('jpg', 'jpeg', 'png'));

	$lesson->video_image->removeAll();

	foreach ($upload->execute() as $file)
	{
            $original = $file;
            $options  = array('upscaling' => false, 'quality' => 100);

            $imageSizer = new ImageSizer($original, $options);
            $success    = $imageSizer->resize(500, 500);

            if ($success)
        	$lesson->video_image->add($original);
	}
}

I always get this error:

Quote

Error: Exception: no valid filename passed to image inspector (in D:\xampp\htdocs\test\wire\core\ImageSizerEngine.php line 428)

 

[Dennis Spohr]

Just found the error, adding the path did the trick:

$imageSizer = new ImageSizer($lesson->video_image->path().$original, $options);

Thanks!