ZF Image Resizer

Tue 12 Nov 2019

I've created the MVP release for my image resizer the other day. This makes resizing images in ZF3 easier than ever. It provides a service object, input filters. It has been released on packagist and can be used in combination with my image optimiser to provide a really strong tool chain that can be applied in ZF3.

It has a similar base code to the optimiser. The difference being that you could apply multiple optimisers to the same image as where you can only apply 1 resizer to one image.

That being said, lets dive into this. My main goal was once again to support multiple methods of usage. It currently supports:

  • Service object
  • InputFilter
  • Commandline (incomplete)

The reason that commandline is incomplete is that there is, as of now, not really a clear advantage in using it commandline. Why not use ImageMagick directly when you are at the commandline anyway.

Image model

The image model does some things out of the gate. It calculates the target width and height when only one is provided for example. It can also calculate the coordinates where to crop when using one of the predefined crop settings. Currently the following automatic crop modus are supported:

const MANUAL_CROP       = 'manual';
const UPPER_LEFT_CROP   = 'upper-left';
const UPPER_MIDDLE_CROP = 'upper-middle';
const UPPER_RIGHT_CROP  = 'upper-right';
const MIDDLE_LEFT_CROP  = 'middle-left';
const CENTERED_CROP     = 'centered';
const MIDDLE_RIGHT_CROP = 'middle-right';
const BOTTOM_LEFT       = 'bottom-left';
const BOTTOM_MIDDLE     = 'bottom-middle';
const BOTTOM_RIGHT      = 'bottom-right';

They represent an area in the picture that I think, needs no further explaining.

Service Object

The service object has been setup in a service-adapter setup. Making this highly extendable. Currently we support ImageMagick. It is widely used already and provides an excellent base to get started.

Just like my image optimiser you don't necessarily have to provide a logger. If you want to provide one it will have to implement the Zend\Log\LoggerInterface to be compliant. The sample below shows getting the service through the service manager and one where we provide the logger and build it.

class SomeFactory implements FactoryInterface
{
    public function __invoke(ContainerInterface $container, $requestedName, array $options = null)
    {
        /** @var ImageResizerService $imageResizerService */
        $imageResizerService = $container->get(ImageResizerService::class);

        # or... provide your own LoggerInterface

        /** @var Logger $logger */
        $logger = $container->get(Logger::class);
        /** @var Stream $writer */
        $logger->addWriter(new Stream('php://output'));
        /** @var ImageResizerService $imageResizerService */
        $imageResizerService = $container->build(ImageResizerService::class, ['logger' => $logger]);

        # ... other factory stuff
    }
}

It is pretty straight forward but once again included in here for those who are newer with using zend packages and the DI that comes with that.

InputFilters

This is where this package shines. You can crop, resize, optimise images in InputFilters when you use this package with my optimiser in the InputFilters. An user avatar would be a great example to take. You want to limit the size of the avatar, maby even at the defined form, square for example. The following snippet would do just that:

$this->add(
    [
        'type'       => FileInput::class,
        'name'       => 'avatar',
        'required'   => false,
        'filters'    => [
            # ... Other filters
            [
                'name'    => ImageResizer::class,
                'options' => [
                    'mode'        => Image::ONLY_CROP_MODUS,
                    'crop_mode'   => Image::CENTERED_CROP,
                    'crop_width'  => 100,
                    'crop_height' => 100,
                ],
            ],
        ],
        'validators' => [
            # ... Validators
        ],
    ]
);

It will take the 100x100 in center of the provided image. Super easy, on the fly. I have it hooked up to where the avatar gets uploaded, abstract metadata gets filled in on the entity, image get resized and optimiser all in one go! The entity that carries the metadata gets persisted in the DB for easier access.

Some examples

The beautiful image on the README serves as an example of what this package can do. It was published under a free license by Scott Walsh. Thanks for doing that!

This is the full image:Full image, by Scott Walsh

When resized to a 300x200:

Resized to 300x200

When taking a centered crop of the full picture:

Cropped 350x350 Centered

Venturing into the wild with cropping and defining a different height:

Cropped 300x450 Centered

Going ape with manual cropping and getting a total different picture... :)

Manual 400x400 crop with own coordinates

Try it!

Just give it a try, composer require rvdlee/zf-image-resizer to load it into your project!